【elementui】记录手动控制el-table的排序图标高亮

当前elementui版本：2.8.2 + vue2

场景：点击列头排序，入参传了排序相关的参数，但是列表的相关列排序图标没有高亮，其实多半是表格在不知道的地方自己又渲染了一遍，把排序高亮给弄没了，所以需要手动控制一下

解决：利用el-table的:header-cell-style属性，去控制当前是哪一列在排序，:header-cell-style的值可以是对象，也可以是function，这里用function，因为需要用到他的默认实参

<el-table:data="data":columns="columns":header-cell-style="headerCellStyle"
/>

// 设置sortParams是排序入参
this.sortParams = {sort_name: "",   // 列名，eg: 'fund_name'sort_flag: "",   // 升序or降序，eg: 'desc'或'asc'
}headerCellStyle({row, column, rowIndex, columnIndex}) {// 先判断一下this.sortParams有没有值，如果没有，说明本身列表就没排序，也无需高亮；如果有值，if(this.sortParams)  { // 空对象其实这样判空也会走进true，所以要针对自己当前的sortParams进一步判空，此处这样写就假装当有值if(column.property === this.sortParams.sort_name) {// 只有设置了sortable的列，column才会有property属性，设置了property的值就可以让该列排序图标高亮// 然后order属性值控制是升序亮还是降序亮column.order = this.sortParams.sort_flag ? `${this.sortParams.sort_flag}ending` : ''}else {column.order = ''}}
}