element-ui el-table 排序高亮状态

一、清除el-table 排序高亮状态

需求背景：排序后，切换日期或其他条件重新渲染表格数据，这时候需要去除排序箭头高亮样式。

<el-table  ref="table" highlight-current-row style="width: 100%;">
      <el-table-column sortable ref="applyTimeRef"   prop="applyTime" label="申请时间" >  </el-table-column>
 </el-table>

created() {
  this.clearSortHighlight()
},
methods: {
  clearSortHighlight() { 
    if (this.$refs.table) {
      this.$refs.table.clearSort();
    }
    this.$refs.applyTimeRef.columnConfig.order = '';
  }
}

注：不管是el-table自带的排序还是远程排序，使用官方文档中的clearSort方法都无法去除排序的高亮效果。只能通过把el-table-column组件中的columnConfig的order字段设置为空才能清除高亮。

二、将排序的顺序状态保留，显示高亮

1、排序的列设置 sortable=‘custom’，表示该列开启排序功能，并且需要后端排序
2、Table 上监听sort-change事件，在事件回调中获取当前排序的字段名和排序顺序，根据实际业务情况编写逻辑并向接口请求排序后的表格数据。
3、在 sort-change 事件的 “sortChange” 处理函数中，需要记录当前列是哪一列，排序的顺序。
4、控制排序的小图标高亮，给table添加:header-cell-style方法。

<el-table :data="tableList" :header-cell-style="getRowClass" :sort-change='sortChange' style="width: 100%">
  <el-table-column prop="applyTime" sortable='custom' label="申请时间"></el-table-column>
</el-table>

data() {
    return { 
      sortType: 'descending',
    };
},
methods: {
  sortChange({prop,order}) {
      // prop为排序列的名称
      // order为排序的顺序，也就是正序，还是倒序，还是null
      this.sortType = val.order;
      //  根据实际业务情况编写逻辑并向接口请求排序后的表格数据
      this.getList()
    }，
  getRowClass({ row, column, rowIndex, columnIndex }) {
      // 判断 列的名称 是否与 业务需要使用的字段 是否一致   
      if(column.property ===  'applyTime') {
        // 如果一致，将排序顺序赋值，或者从sortChange获取的动态数据填在这里
        column.order = this.sortType
      } else {
        // 如果不一致，就清空该列的排序信息
        column.order = ''
      }
      // 下面是表头的样式，忽略
      if (rowIndex === 0) {
        return 'background:#FAFAFA;color: #606266;'
      } else {
        return ''
      }
  }
}

三、初始化修改默认头部排序字段高亮

通过上面的方法 二 的方法实现默然高亮，会有切换其他排序字段，默认添加的字段不变化的问题。以下是个人的临时新方案，如果大家有更好的可以互相交流：
在引用的table文件中调用

 mounted () {
    // NOTO: 这里需要添加定时延时，不然界面无效果
    setTimeout( () => {
      this.$nextTick(() => {
        // sortName：需要默认排序的字段名，eg:applyTime   sortType：排序的类型，升序还是降序，eg: 'ascending' 
        this.$refs.tables.sort(sortName, sortType)
      })
    }, 5000)
  },

效果图：
上传服务有问题，等可以上传了再上传效果图。