之前写的后台管理系统,都是用的antd
+element
,table
组件中的【排序】问题是有一定的缺陷的。
想要实现的效果:
antv——table组件一次只支持一个参数的排序
如下图:
就算是可以自行将排序字段拼接到列表接口的入参中,页面中字段的排序也是只有一个的。不会同时显示排序的状态。比如像下面的
element——table组件一次只支持一个参数的排序
就连【default-sort】默认的排序参数,都只是一个对象,而非是一个数组。
没有办法实现我们想要的多个参数同时排序并且回显的效果。
前几天写的文章中的vxe-table
组件可以实现这样的效果。
vxe-table组件实现多个参数同时排序的效果
感觉官网上有一部分内容还是不太好看的,只有真正用到了,才能明白其中的含义。
<vxe-tablesize="small"borderresizableref="xTable1"id="toolbar_demo5":custom-config="customConfig"show-overflow="tooltip":sort-config="sortConfig":row-config="rowConfig":checkbox-config="checkboxConfig":data="dataSource":loading="loading"@checkbox-change="wipCheckboxChange"@checkbox-all="wipCheckboxAll"@sort-change="wipSortChange">....</vxe-table>
关于排序,这里面要用到的参数有:sortConfig
sort-change
步骤1:sortConfig
参数需要一开始mounted函数中就指定要排序的字段及方向
比如:我这边的要求是:将排序的内容缓存到本地,然后一进到这个页面就要显示上一次排序的效果。本次更改排序后再次缓存,一次循环。
所以在页面一开始mounted时,我就要取缓存的内容,并处理后放置到sortConfig
中
mounted(){let sort = localStorage.getItem('sort_arr');if (sort != undefined) {this.sort_arr = JSON.parse(sort);this.queryFrom.OrderBy = JSON.parse(sort).toString();}let sort_obj = JSON.parse(localStorage.getItem('sort_arr'));let defaultSort = [];if (sort_obj && sort_obj.length > 0) {sort_obj.forEach((item) => {let arr = item.split(' ');defaultSort.push({ field: arr[0], order: arr[1] });});this.sortConfig.defaultSort = defaultSort;}
}
步骤2:监听排序方法sort-change
// 排序
wipSortChange({ column, field, order, sortBy, sortList }) {console.log(column, field, order, sortBy, sortList);if (sortList.length != 0) {let arr = sortList.map((v) => {return v.field + ' ' + v.order;});localStorage.setItem('sort_arr', JSON.stringify(arr));}let sort = localStorage.getItem('sort_arr');if (sort != undefined) {this.queryFrom.OrderBy = JSON.parse(sort).toString();}this.card_list_api();//这个是请求列表数据的接口
},
完成!!!
我看之前同事写的的代码:在切换分页的时候用到了this.$refs.xTable1.clearAll()
,这个方法直接将排序的结果都清除了。这样是不对的。
页面选中的值,切换页码的时候没有回显的问题
可以在切换页码的时候,通过下面的代码来实现选中的回显:
if (this.selectedRows) {this.selectedRows.forEach((v) => {this.$refs.xTable1.setCheckboxRow(v, true);});
}