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

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

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

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

<el-table :data="listData" stripe border @sort-change="sortChange" :default-sort="{prop:'createdOn', order: 'descending'}"><el-table-column prop="txCode" label="序号"></el-table-column><el-table-column prop="createdOn" label="时间" sortable="custom" width="180"></el-table-column></el-table>

注：远程排序需有列设置 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.sequenceOrderobj.column = this.sortColumn// 注意：还要改变column里面的排列方式orderobj.column.order = obj.order// 以下两行即为请求后台接口，把obj里的信息传递进去即可this.pageNo = 1this.getBuyList()return obj}// 初始化第一次进来就会走这里，给sortColumn、filtrate.sequence、filtrate.sequenceOrder赋值再请求数据this.sortColumn = ''this.sortColumn = obj.columnthis.filtrate.sequence = obj.orderthis.filtrate.sequenceOrder= obj.propthis.pageNo = 1this.getBuyList()
}

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

element 表格排序之远程排序去除默认排序相关推荐

mysql查询默认排序规则_深究 mysql 默认排序， order by 的顺序【收藏】
mysql 语句中如果没有使用 order by 来排序,通常会用主键正序排列,但是有的时候不是这样,来看一个实例. 实例群友问:请教一个问题,mysql 默认排序问题,当sql 语句的排序没有 ...
mysql 2个排序规则_基于mysql 默认排序规则的坑
mysql默认varchar类型是对大小写不敏感(不区分),如果想要mysql区分大小写需要设置排序规则: utf8_bin将字符串中的每一个字符用二进制数据存储,区分大小写. utf8_genera ...
element表格排序（带有数值、字符串）解决排序错乱
目录问题描述解决步骤 1. 在el-tabel中添加 `@sort-change="handleSort"` 2. methods中添加方法 3. 验证问题描述 elemen ...
NetTiers学习笔记09---RADGrid + EntityDataSource设置默认排序, 及表格自动排序,分页的方法...
前段时间虽然解决了排序和分页的问题,但始终没有解决默认排序的问题, 起初一直把焦点放在EntityDataSource的排序默认值上,但始终搞不定, 今天又花了不少时间Google和研究,终于通过设置 ...
基于Metronic的Bootstrap开发框架经验总结（16）-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理...
在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...
jggrid使用multiselect时修改默认排序
jggrid使用columnChooser时,该插件使用的排序方式是根据string的大小比较排序. colNames:['编号','处理时间','名称','类型','编写单位','编写人','处理结 ...
java删除有序数组中的重复元素_java去除已排序数组中的重复元素
题目描述给定一个已排序的数组,去除数组中的重复元素,只保留一个重复的元素,并且返回新的数组长度. 要求: 不要给数组分配额外的空间,你必须使用常量的内存大小进行原地操作. 例如: 给出数组A=[1, ...
Magento: 设置产品列表默认排序方式 How to sort Magento products by date added as default
方法一: 安装插件 Sort By Date(https://www.magentocommerce.com/magento-connect/sort-by-date.html) 方法二: 非插件 T ...
linux命令ls -l的默认排序方式
差不多快实现完了ls -l,但是在测试阶段发现一个问题,对于包含[a-ZA-Z]之外的字符,系统的排序方式并不一样. 很想了会儿,总算发现原来它的排序方式是无视[a-ZA-Z]之外的字符的至于怎么发 ...

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

element 表格排序之远程排序去除默认排序相关推荐

最新文章

热门文章