el-table使用排序功能，并且返回主页时将排序的顺序状态保留，显示高亮

用el-table做了一个6列的花名册列表，要求是每一列都是要有排序功能，并且排序是后端完成的，排序的状态列，只有一列是高亮的，而且退出到主页时，还要保留之前的筛选的状态高亮

1、首先要给需要排序的列设置sortable=‘custom’，表示该列开启排序功能，并且需要后端排序

 <el-table-column label="公司部门" prop="dept" :show-overflow-tooltip="true" min-width="90%" sortable='custom' >
 </el-table-column>

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

<el-table :data="rosterList" :header-cell-style="getRowClass" v-on:sort-change='sortChange' stripe style="width: 100%">
</el-table>

3、在sort-change事件的“sortChange”处理函数中，我们要记录当前列是哪一列，排序的顺序是什么，从回调函数的参数中可以拿到

sortChange({prop,order}){
	// prop为排序列的名称
	// order为排序的顺序，也就是正序，还是倒序，还是null
      // 判断当前点击的列是否与上一次的列相同，如果不相同就首先将筛选顺序的参数置为空，然后进行下一下的排序，如果相同，就保留原来的排序状态
      if(prop !== this.$store.state.column){
        this.$store.commit('setSorting','')
      }
      // 点击表头排序进行时，将所排序的列名称以及排序顺序保存起来
      this.$store.commit('setColumn',prop)
      this.$store.commit('setProp',prop)
      // 定义排序参数
      if(!order){
        this.$store.commit('setOrder','')
        this.$store.commit('setSorting','')
      }
      if(order == 'ascending'){
        this.$store.commit('setOrder','asc')
        this.$store.commit('setSorting','ascending')
      }
      if(order == 'descending'){
        this.$store.commit('setOrder','desc')
        this.$store.commit('setSorting','descending')
      }
      this.getRosterList()
    },

4、控制排序的小图标高亮

首先给table添加:header-cell-style方法

<el-table :data="rosterList" :header-cell-style="getRowClass" v-on:sort-change='sortChange' stripe style="width: 100%">
</el-table>

然后在其处理函数中控制

getRowClass: function ({ row, column, rowIndex, columnIndex }) {  
	// 判断列的名称是否与vux保存的数据是否一致   
      if(column.property === this.$store.state.column){
      // 如果一致，将排序复制到该列
        column.order = this.$store.state.sorting
      }else{
      // 如果不一致，就清空该列的排序信息
        column.order = ''
      }
      // 下面是表头的样式，忽略
      if (rowIndex === 0) {
        return 'background:#EAECF3;color:#333333;box-shadow: 0px 4px 12px 0px rgba(195, 198, 210, 0.09);'
      } else {
        return ''
      }
    },

至于怎么缓存到本地，怎读取数据，以及刷新，和页面初次加载，和上一篇筛选状态的保留方法一致，欢迎大家指正
最后，还是一句话，多看文档