iview treeSelect 组件封装
-
- 1、表格增加排序时触发的方法
- 2、定义三个变量,sortColumnDefaultStyle存放默认的样式,定义页面默认的列以及顺序
- [3、显示的列加上 sortable, 和样式](#3、显示的列加上 sortable, 和样式)
- 4、使用下面这块代表默认选中
- 5、点击时清除掉默认的排序
- 6、把排序的字段查询时传给后端
1、表格增加排序时触发的方法
javascript
Table(
:columns='columns'
:data='tableData'
@on-sort-change="sortChange"
)
2、定义三个变量,sortColumnDefaultStyle存放默认的样式,定义页面默认的列以及顺序
javascript
// 默认样式
sortColumnDefaultStyle: null,
// 排序的列
columnSorting: 'dialing_time',
// 正序或者倒叙
sortingRules: 'desc',
3、显示的列加上 sortable, 和样式
javascript
sortable: 'custom',
className: 'sort-column',
4、使用下面这块代表默认选中
javascript
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、点击时清除掉默认的排序
javascript
// column:当前列数据
// key:排序依据的指标
// order:排序的顺序,值为 asc 或 desc
sortChange (e) {
let key = e.key
const order = e.order
if (key === 'dialingTime') {
key = 'dialing_time'
} else if (key === 'timeCons') {
key = 'time_cons'
}
this.columnSorting = key
this.sortingRules = order
if (this.sortingRules === 'normal') {
this.columnSorting = null
this.sortingRules = null
}
// 点击排序之后清除默认设置的高亮排序
if (this.sortColumnDefaultStyle) {
this.sortColumnDefaultStyle.classList.remove('on')
this.sortColumnDefaultStyle = null
}
this.query()
},
6、把排序的字段查询时传给后端
javascript
orderBy: this.columnSorting,
order: this.sortingRules