element 表格排序之远程排序去除默认排序

您所在的位置：网站首页 › 升降序怎么取消 › element 表格排序之远程排序去除默认排序

element 表格排序之远程排序去除默认排序

#element 表格排序之远程排序去除默认排序| 来源: 网络整理| 查看: 265

element表格提供了三种数据的排序方法：升序排序 ascending降序排序 descending默认排序 null

如果是前端本地排序可设置 sort-doders 属性为 ['ascending', 'descending'] 去除默认排序具体可参考 element文档

远程排序即为后端排序，后端可按照前端参数（升序、降序、页码、数量）返回所有数据中的相应数据，看代码：

注：远程排序需有列设置 sortable="custom" ，sort-change 监听点击排序的变化本例需求为对于时间列进行排序，默认排序为倒序，要求点击排序不是升序就是降序，也就是去除element中的默认排序

思路：排序变化会触发 sortChange 函数，并且会传进一个参数，如下： sortChange (obj) { console.log(obj) }

由于在上面设置 default-sort 故初始化表格的时候得到的obj为 default-sort（升降序order和需要升降序的列的属性名称prop）设置后的obj，但下次点击就会触发element内部默认排序，如下图：全为 null 的即为默认排序在这里插入图片描述 colum 为点击升降序列的信息，里面包含列的属性（如宽度、排序方式、lable 等）要想去除默认排序，只需改变obj中的值为上次相反的值即可

data () { filtrate: { sequence: '', sequenceOrder: '' }, sortColumn: '' }, sortChange (obj) { if (obj.order === null) { // 后面点击会进入默认排序，给obj赋相反的值，然后根据新值请求数据，再返回obj，界面就会按照设置发生变化 this.filtrate.sequence === 'descending' ? obj.order = 'ascending' : obj.order = 'descending' obj.prop = this.filtrate.sequenceOrder obj.column = this.sortColumn // 注意：还要改变column里面的排列方式order obj.column.order = obj.order // 以下两行即为请求后台接口，把obj里的信息传递进去即可 this.pageNo = 1 this.getBuyList() return obj } // 初始化第一次进来就会走这里，给sortColumn、filtrate.sequence、filtrate.sequenceOrder赋值再请求数据 this.sortColumn = '' this.sortColumn = obj.column this.filtrate.sequence = obj.order this.filtrate.sequenceOrder= obj.prop this.pageNo = 1 this.getBuyList() }

总结：我们知道 sort-change 返回一个对象，里面包含三个参数，分别为 order prop column 点击默认这三个值全部为 null ，所以我们只需改变点击列的相应值的排列方式 order 即可，因为 column 里也包含了 order 故也要改变里面的 order 为上次排序相反的排序，这样就实现了升序和降序的切换

【本文地址】

element 表格排序之远程排序去除默认排序

element 表格排序之远程排序去除默认排序

今日新闻

推荐新闻