Crud 模块

排序

排序 - 图1

表格中可显示的列字段进行排序,设置属性sortable接受一个Boolean的属性,设置为true即可开启排序,回调sort-change方法返回排序后的数据

  1. <avue-crud :data="data" :option="option" @sort-change="sortChange"></avue-crud>
  2. <script>
  3. export default {
  4. data() {
  5. return {
  6. data: [
  7. {
  8. sortable:true,
  9. name:'张三',
  10. sex:'男'
  11. }, {
  12. name:'李四',
  13. sex:'女'
  14. }
  15. ],
  16. option:{
  17. border:true,
  18. page:false,
  19. align:'center',
  20. menuAlign:'center',
  21. column:[
  22. {
  23. label:'姓名',
  24. prop:'name'
  25. }, {
  26. label:'性别',
  27. prop:'sex'
  28. }
  29. ]
  30. },
  31. };
  32. },
  33. methods: {
  34. sortChange(val){
  35. this.$message.success('排序'+ JSON.stringify(val));
  36. }
  37. }
  38. }
  39. </script>

默认排序

排序 - 图2

设置defaultSort一个属性接受prop排序的字段和order排序的方式俩个属性,初始化的时候根据设置默认排序,order中接受 ascending 表示升序,descending 表示降序,回调sort-change方法返回排序后的数据

  1. <avue-crud :data="data" :option="option1"></avue-crud>
  2. <script>
  3. export default {
  4. data() {
  5. return {
  6. data: [
  7. {
  8. name:'张三',
  9. sex:'男'
  10. }, {
  11. name:'李四',
  12. sex:'女'
  13. }
  14. ],
  15. option1:{
  16. defaultSort:{
  17. prop: 'name',
  18. order: 'descending'
  19. },
  20. border:true,
  21. page:false,
  22. align:'center',
  23. menuAlign:'center',
  24. column:[
  25. {
  26. sortable:true,
  27. label:'姓名',
  28. prop:'name'
  29. }, {
  30. label:'性别',
  31. prop:'sex'
  32. }
  33. ]
  34. }
  35. };
  36. }
  37. }
  38. </script>