問題描述element table排序默認是單列排序,樣式也是相應的點一列后之前那一列的樣式會被取消,我現在的需求就是多列排序(功能實現為后臺排序,前臺只需在點擊后重新發請求即可),點擊一列的排序,另一列的排序的樣式能夠保留(觀察發現是classname為ascending和descending控制顯示)問題出現的環境背景table 表格實現點擊多列,每列之前的排序樣式不會互相影響
1 回答
紅顏莎娜
TA貢獻1842條經驗 獲得超13個贊
結合 sort-change 事件 以及 header-cell-class-name 方法
<el-table @sort-change="handleSortChange" :header-cell-class-name="handleTheadAddClass" class="table">
//...
</el-table>data: { return {
curThead: ''
}
}
handleTheadAddClass({row, column, rowIndex, columnIndex}){
// 判斷找到當前列 添加樣式 if( column.prop == this.curThead ){ return 'active-thead'
}
},
handleSortChange({ column, prop, order }){
console.log( column, prop, order )
//拿到當前列的某個屬性
this.curThead = prop
}- 1 回答
- 0 關注
- 1936 瀏覽
添加回答
舉報
0/150
提交
取消