iview table 默认排序字段不高亮解决办法

1、表格增加排序时触发的方法

Table(:columns='columns':data='tableData'@on-sort-change="sortChange")

2、定义三个变量，sortColumnDefaultStyle存放默认的样式，定义页面默认的列以及顺序

// 默认样式sortColumnDefaultStyle: null,// 排序的列columnSorting: 'dialing_time',// 正序或者倒叙sortingRules: 'desc',

3、显示的列加上 sortable, 和样式

 sortable: 'custom',className: 'sort-column',

4、使用下面这块代表默认选中

mounted () {this.$nextTick(() => {// 获取到节点并添加一个元素on, on表示选中的样式this.sortColumnDefaultStyle = document.getElementsByClassName('sort-column')[0].getElementsByClassName('ivu-table-cell')[0].getElementsByClassName('ivu-table-sort')[0].getElementsByClassName('ivu-icon ivu-icon-arrow-down-b')[0]this.sortColumnDefaultStyle.classList.add('on')console.log('sortColumnDefaultStyle', this.sortColumnDefaultStyle)})},

5、点击时清除掉默认的排序

// column：当前列数据// key：排序依据的指标// order：排序的顺序，值为 asc 或 descsortChange (e) {let key = e.keyconst order = e.orderif (key === 'dialingTime') {key = 'dialing_time'} else if (key === 'timeCons') {key = 'time_cons'}this.columnSorting = keythis.sortingRules = orderif (this.sortingRules === 'normal') {this.columnSorting = nullthis.sortingRules = null}// 点击排序之后清除默认设置的高亮排序if (this.sortColumnDefaultStyle) {this.sortColumnDefaultStyle.classList.remove('on')this.sortColumnDefaultStyle = null}this.query()},

6、把排序的字段查询时传给后端

orderBy: this.columnSorting,
order: this.sortingRules