element-ui table 多列排序的样式问题

Question

问题描述

element table排序默认是单列排序,样式也是相应的点一列后之前那一列的样式会被取消,我现在的需求就是多列排序(功能实现为后台排序,前台只需在点击后重新发请求即可),点击一列的排序,另一列的排序的样式能够保留(观察发现是classname为ascending和descending控制显示)

问题出现的环境背景

table 表格实现点击多列,每列之前的排序样式不会互相影响

Answer 1

结合&nbsp;sort-change&nbsp;事件&nbsp;以及&nbsp;header-cell-class-name&nbsp;方法&nbsp; <el-table&nbsp;@sort-change="handleSortChange"&nbsp;:header-cell-class-name="handleTheadAddClass"&nbsp;class="table"> &nbsp;&nbsp;&nbsp;&nbsp;//... </el-table>data:&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;curThead:&nbsp;'' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} } &nbsp;&nbsp;&nbsp; handleTheadAddClass({row,&nbsp;column,&nbsp;rowIndex,&nbsp;columnIndex}){ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;判断找到当前列&nbsp;添加样式&nbsp;&nbsp;&nbsp;&nbsp;if(&nbsp;column.prop&nbsp;==&nbsp;this.curThead&nbsp;){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;'active-thead' &nbsp;&nbsp;&nbsp;&nbsp;} }, handleSortChange({&nbsp;column,&nbsp;prop,&nbsp;order&nbsp;}){ &nbsp;&nbsp;&nbsp;&nbsp;console.log(&nbsp;column,&nbsp;prop,&nbsp;order&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;//拿到当前列的某个属性 &nbsp;&nbsp;&nbsp;&nbsp;this.curThead&nbsp;=&nbsp;prop }