已解決430363個問題，去搜搜看，總會有你想問的

element-ui table 多列排序的樣式問題

首頁猿問 element-ui table...

element-ui table 多列排序的樣式問題

CSS3

慕工程0101907 2019-03-08 11:51:36

問題描述element table排序默認是單列排序,樣式也是相應的點一列后之前那一列的樣式會被取消,我現在的需求就是多列排序(功能實現為后臺排序,前臺只需在點擊后重新發請求即可),點擊一列的排序,另一列的排序的樣式能夠保留(觀察發現是classname為ascending和descending控制顯示)問題出現的環境背景table 表格實現點擊多列,每列之前的排序樣式不會互相影響

查看完整描述

2 回答

一只萌萌小番薯

TA貢獻1795條經驗獲得超7個贊

結合 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
}

反對回復 2019-03-08

largeQ

TA貢獻2039條經驗獲得超8個贊

<style scoped>
    .table >>> .active-thead .sort-caret.descending{        border-top-color: #409eff;
    }    .table >>> .active-thead .sort-caret.ascending{        border-top-color: #409eff;
    }</style>

反對回復 2019-03-08

2 回答
0 關注
5741 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

element-ui table 多列排序的樣式問題

element-ui table 多列排序的樣式問題

2 回答

添加回答