iview table 默認排序字段不高亮解決辦法

iview treeSelect 組件封裝

- 1、表格增加排序時觸發的方法
- 2、定義三個變量，sortColumnDefaultStyle存放默認的樣式，定義頁面默認的列以及順序
- 3、顯示的列加上 sortable, 和樣式
- 4、使用下面這塊代表默認選中
- 5、點擊時清除掉默認的排序
- 6、把排序的字段查詢時傳給后端

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

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/165895.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/165895.shtml
英文地址，請注明出處：http://en.pswp.cn/news/165895.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！