table后台排序

其实elementui官网上都已经写得很清楚了,让后台远程排序的方法

但是其中的一个小知识点如果不仔细看的话，还是做不了这个功能的

先贴图看看效果

image.png

1.第一个关键点是在需要在要排列的列上加上sortable: 'custom',

  <el-table-column
       prop="date"
       label="打卡时间"
       sortable="custom"
       width="180">

2.在table上添加事件,@sort-change="topTableSort"
如果有需要添加一个默认排序方式，:default-sort = "{prop: 'opdt', order: 'ascending'}"
ascending 排序的上面箭头会高亮
descending 排序的下面箭头会高亮

   <el-table  size="medium"
                  :data="tableDataTop"
                  stripe
                  @sort-change="topTableSort"
                  :default-sort = "{prop: 'opdt', order: 'ascending'}"
                  style="width: 100%">

3.规定@sort-change对应方法topTableSort传递参数,order指的是你点击的是升序还是降序，
，如果升序传递什么参数，如果是降序传递什么参数，具体的参数是需要和后台商量订的。

 topTableSort({ column, prop, order }) {

if (column) {
       if(column.label === '打卡时间' && order === 'descending'){
            this.params.timeSort = 1;
          }
          if(column.label === '打卡时间' && order === 'ascending'){
            this.params.timeSort = 0;
          }

}
}

其实前面的两步在elementui上都能找得到，第三步可能就要仔细看了，很多人就是不知道，如何判断什么时候应该传什么参数，希望看了这篇文章对你有帮助。

如果有帮助 请点赞