当前位置:   article > 正文

Element UI Table排序顺序错乱处理_el-table 后台排序后 表格数据与返回的顺序不同

el-table 后台排序后 表格数据与返回的顺序不同

1、(a, b) => { return a.total_money - b.total_money; } 

a-b>0表示a大于b;

a-b=0表示a等于b;

a-b<0表示a小于b;

  1. <el-table-column
  2. prop="total_money"
  3. label="支付金额(元)"
  4. width="180"
  5. sortable
  6. :sort-method="(a, b) => { return a.total_money - b.total_money; }">
  7. </el-table-column>

2、如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听

sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。 

  1. <el-table
  2. :data="tableData"
  3. style="width: 100%"
  4. :default-sort = "{prop: 'date', order: 'descending'}" @sort-change="change">
  5. <el-table-column
  6. prop="date"
  7. label="日期"
  8. sortable="sortable"
  9. width="180">
  10. </el-table-column>
  11. <el-table-column
  12. prop="address"
  13. label="地址"
  14. :formatter="formatter">
  15. </el-table-column>
  16. </el-table>
  1. var Main = {
  2. data() {
  3. return {
  4. tableData: [{
  5. date: '2016-05-02',
  6. name: '王小虎',
  7. address: '上海市普陀区金沙江路 1518 弄'
  8. }, {
  9. date: '2016-05-04',
  10. name: '王小虎',
  11. address: '上海市普陀区金沙江路 1517 弄'
  12. }, {
  13. date: '2016-05-01',
  14. name: '王小虎',
  15. address: '上海市普陀区金沙江路 1519 弄'
  16. }]
  17. }
  18. },
  19. methods: {
  20. change(res,s){
  21. console.log(res)
  22. console.log("---",res.order)
  23. },
  24. formatter(row, column) {
  25. return row.address;
  26. }
  27. }
  28. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/172395
推荐阅读
相关标签
  

闽ICP备14008679号