当前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 = ''
}
}
}