用el-table做了一个6列的花名册列表,要求是每一列都是要有排序功能,并且排序是后端完成的,排序的状态列,只有一列是高亮的,而且退出到主页时,还要保留之前的筛选的状态高亮
1、首先要给需要排序的列设置sortable=‘custom’,表示该列开启排序功能,并且需要后端排序
<el-table-column label="公司部门" prop="dept" :show-overflow-tooltip="true" min-width="90%" sortable='custom' >
</el-table-column>
2、在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。
<el-table :data="rosterList" :header-cell-style="getRowClass" v-on:sort-change='sortChange' stripe style="width: 100%">
</el-table>
3、在sort-change事件的“sortChange”处理函数中,我们要记录当前列是哪一列,排序的顺序是什么,从回调函数的参数中可以拿到
sortChange({prop,order}){
// prop为排序列的名称
// order为排序的顺序,也就是正序,还是倒序,还是null
// 判断当前点击的列是否与上一次的列相同,如果不相同就首先将筛选顺序的参数置为空,然后进行下一下的排序,如果相同,就保留原来的排序状态
if(prop !== this.$store.state.column){
this.$store.commit('setSorting','')
}
// 点击表头排序进行时,将所排序的列名称以及排序顺序保存起来
this.$store.commit('setColumn',prop)
this.$store.commit('setProp',prop)
// 定义排序参数
if(!order){
this.$store.commit('setOrder','')
this.$store.commit('setSorting','')
}
if(order == 'ascending'){
this.$store.commit('setOrder','asc')
this.$store.commit('setSorting','ascending')
}
if(order == 'descending'){
this.$store.commit('setOrder','desc')
this.$store.commit('setSorting','descending')
}
this.getRosterList()
},
4、控制排序的小图标高亮
首先给table添加:header-cell-style方法
<el-table :data="rosterList" :header-cell-style="getRowClass" v-on:sort-change='sortChange' stripe style="width: 100%">
</el-table>
然后在其处理函数中控制
getRowClass: function ({ row, column, rowIndex, columnIndex }) {
// 判断列的名称是否与vux保存的数据是否一致
if(column.property === this.$store.state.column){
// 如果一致,将排序复制到该列
column.order = this.$store.state.sorting
}else{
// 如果不一致,就清空该列的排序信息
column.order = ''
}
// 下面是表头的样式,忽略
if (rowIndex === 0) {
return 'background:#EAECF3;color:#333333;box-shadow: 0px 4px 12px 0px rgba(195, 198, 210, 0.09);'
} else {
return ''
}
},
至于怎么缓存到本地,怎读取数据,以及刷新,和页面初次加载,和上一篇筛选状态的保留方法一致,欢迎大家指正
最后,还是一句话,多看文档