实现远程排序
给要排序的列el-table-column上加上sortable属性，值为custom,同时el-table上监听sort-change事件。
分析null出现的场景
触发排序的方式有两种，都可以出现排序规则为null的情况
- 点击表头触发
点击表头触发排序时，排序规则会依次按照sort-orders设置的值的顺序排序，sort-orders默认为 ['ascending', 'descending', null]，点击某一列就会按照顺序依次，升序、降序、null，一般的业务需求都是默认降序的，这时我们可以把sort-orders设置为['descending','ascending']，就可以去掉点击表头出现的null
sort-orders.png
- 点击表头旁边的小箭头触发
点击小箭头触发时，向上的箭头表示升序，向下的箭头表示降序，但是他支持取消操作，再次点击箭头，可以把状态从排序状态变为null。
找了半天文档，没看到解决办法（也有可能是我没发现），这里另辟蹊径。
查看源码发现sort-change事件参数column中的order属性的值会作为class名放在表头上，控制排序箭头高亮。现在就可以通过控制order的值来去掉null的情况。测试过程中发现当手动给某一列的order赋值之后，再次点击其他列时，之前的列不会改变状态，我这里是先将全部的列都置为null状态，再将当前列置为sort-change中的状态。下面是具体的代码
sortChange({column, prop, order}) {
//如果取消排序,则直接给当前点击的列的order赋原来的值（this.order_by）
if(!order) {
column.order = this.order_by
} else{
// 获取表格实例上所有列的数据columns
let columns = this.$refs.myTable.columns
columns.forEach(item => { //把所有列的排序规则都置为 null
if (item.order) {
item.order = null
}
})
// 给当前点击的列的排序规则赋值
column.order = order
this.order_by = order
this.sort = prop
this.getData() //重新请求数据
}
},
另外发现还可以实现下面功能
1.因为有class类名的变化，可以通过css将表头文字也改成高亮。
.el-table th.ascending{
color: #ff0000;
}
.el-table th.descending{
color: #00ff00;
}
- 可以做出多列排序
发现手动给order赋值之后，点击其他列不会自动自动改变之前列状态，正好适合多列排序，这里就不写示例了。
