element 表格排序之远程排序去除默认排序

• element表格提供了三种数据的排序方法：
  • 升序排序 ascending
  • 降序排序 descending
  • 默认排序 null

    如果是前端本地排序 可设置 sort-doders 属性为 ['ascending', 'descending'] 去除默认排序具体可参考 element文档

• 远程排序即为后端排序，后端可按照前端参数（升序、降序、页码、数量）返回所有数据中的相应数据，看代码：

  <el-table :data="listData" stripe border @sort-change="sortChange" :default-sort="{prop:'createdOn', order: 'descending'}">
      <el-table-column prop="txCode" label="序号"></el-table-column>
      <el-table-column prop="createdOn" label="时间" sortable="custom" width="180"></el-table-column>
   </el-table>
  

注：远程排序需有列设置 sortable="custom" ，sort-change 监听点击排序的变化
本例需求为对于时间列进行排序，默认排序为倒序，要求点击排序不是升序就是降序，也就是去除element中的默认排序

• 思路：
  排序变化会触发 sortChange 函数，并且会传进一个参数，如下：

  sortChange (obj) {
    console.log(obj)
  }
  

由于在上面设置 default-sort 故初始化表格的时候得到的obj为 default-sort（升降序order和需要升降序的列的属性名称prop） 设置后的obj，但下次点击就会触发element内部默认排序，如下图：全为 null 的即为默认排序

colum 为点击升降序列的信息，里面包含列的属性（如宽度、排序方式、lable 等）
要想去除默认排序，只需改变obj中的值为上次相反的值即可

data () {
  filtrate: {
    sequence: '',
    sequenceOrder: ''
  },
  sortColumn: ''
},
sortChange (obj) {
  if (obj.order === null) {
    // 后面点击会进入默认排序，给obj赋相反的值，然后根据新值请求数据，再返回obj，界面就会按照设置发生变化
    this.filtrate.sequence === 'descending' ? obj.order = 'ascending' : obj.order = 'descending'
    obj.prop = this.filtrate.sequenceOrder
    obj.column = this.sortColumn
    // 注意：还要改变column里面的排列方式order
    obj.column.order = obj.order
    // 以下两行即为请求后台接口，把obj里的信息传递进去即可
    this.pageNo = 1
    this.getBuyList()
    return obj
  }
  // 初始化第一次进来就会走这里，给sortColumn、filtrate.sequence、filtrate.sequenceOrder赋值再请求数据
  this.sortColumn = ''
  this.sortColumn = obj.column
  this.filtrate.sequence = obj.order
  this.filtrate.sequenceOrder= obj.prop
  this.pageNo = 1
  this.getBuyList()
}

总结：我们知道 sort-change 返回一个对象，里面包含三个参数，分别为 order prop column 点击默认这三个值全部为 null ，所以我们只需改变点击列的相应值的排列方式 order 即可，因为 column 里也包含了 order 故也要改变里面的 order 为上次排序相反的排序 ，这样就实现了升序和降序的切换