首頁猿問 element-ui table...

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

CSS3

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

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

查看完整描述

2 回答

一只萌萌小番薯

TA貢獻(xiàn)1795條經(jīng)驗(yàn) 獲得超7個(gè)贊

結(jié)合 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}){
    // 判斷找到當(dāng)前列 添加樣式    if( column.prop == this.curThead ){       return 'active-thead'
    }
},
handleSortChange({ column, prop, order }){
    console.log( column, prop, order )
    //拿到當(dāng)前列的某個(gè)屬性
    this.curThead = prop
}

反對回復(fù) 2019-03-08

largeQ

TA貢獻(xiàn)2039條經(jīng)驗(yàn) 獲得超8個(gè)贊

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

反對回復(fù) 2019-03-08