后端排序时去掉element表格排序的null状态
经常会遇到远程排序,需要去掉null状态的排序,当设置sortable='custom'时,设置sort-orders为['ascending', 'descending']是不生效的。
然后查到了一种解决办法,如下:
element表格排序有三种状态,升序、降序、null,现在想要实现的效果为只要升序和降序。
主要思想是检测返回的排序值是否为null,如果是的话则和上一个排序取相反的值(需要先用变量保存上一次的排序值),代码如下:
- //这是排序触发函数
- change_sort(row) {
- if (row.order === null) {
- this.save_sort === 'descending' ? row.order = 'ascending' : row.order = 'descending'
- row.column.order = row.order
- }
- if (row.order == 'ascending') { //降序
- this.listParams.sort = 1;
- } else {
- this.listParams.sort = 0;
- }
- this.save_sort = row.order;
- this.getList();
- },
按照上面这种方式在指对某一列进行排序时是没有问题的,但如果需要多行进行排序,在多次点击时,就会出现如下情况:
主要是为当你点击某一列的排序为null时,改变了column.order和order,然后点击不同列的时候,前一列的排序并没有被清空。可以通过this.$refs.table.columns查看前一行的order
解决思路就是当前order为null时,记录下当前prop,然后下一列排序,如果当前prop与之前prop不相同,则清除上一次的order,代码如下
- // 后端排序
- sortChange({column, prop, order}) {
- //自定义排序事件 {column: {…}, prop: "time", order: "descending"}, sqlchemy分页器只能识别desc/asc,注意转换
- // 取消默认排序状态null
- if (order !== null && this.prevProp !== prop) {
- let columns = this.$refs.myTable.columns.find(x => x.property === this.prevProp);
- columns.order = '';
- }
- if (order === null) {
- column.order = this.saveSort === 'descending' ? 'ascending' : 'descending';
- this.prevProp = prop;
- }
- this.saveSort = column.order;
- const order_new = {
- 'ascending': 'asc',
- 'descending': 'desc',
- }
- this.pageHelper.ordercol = prop
- this.pageHelper.order = order_new[column.order]
- this.fetchData()
- },
参考博文:https://www.cnblogs.com/fangnianqin/p/13155781.html
后端排序时去掉element表格排序的null状态的更多相关文章
- Jtable 表格按多列排序(支持中文汉字排序)
这两天公司让做一个Jtable表格的排序,首先按A列排序,在A列相等时按B列排序,B列相等时按C列排序,ABC三列可以任意指定,最多分三列,这样的一个需求.由于我是大神,所以必须做了出来.ok,不自恋 ...
- JS对表格排序(支持对序号,数字,字母,日期)
JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...
- 案例学习总结:原生JS实现表格排序
最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...
- javascript 表格排序和表头浮动效果(扩展SortTable)
前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了 ...
- [datatable]排序时指定某列不可排序
datatable是一个jquery扩展的表格插件.其提供了强大的表格功能. 官方地址:http://www.datatables.net/ 在官方示例中,对于表格的是否可排序是在初始化中设置的一个值 ...
- element-ui el-table表格排序sortable参数解析
表格组件的排序功能,点击排序表头可以进行升序和降序进行排序 页面代码,基本上排序的参数都使用了 <el-table :data="tableData" style=" ...
- JS实现前台表格排序功能
JS实现前台表格排序功能 虽然数据量不大的情况下,前台排序速度比较快,但一般情况下,我们的项目只使用后台排序,原因有二: 一是代码简单:二是前台JS排序对于有分页的情况无法处理. 前段时间,有个功能需 ...
- mysql 查询数据时按照A-Z顺序排序返回结果集
mysql 查询数据时按照A-Z顺序排序返回结果集 $sql = "SELECT * , ELT( INTERVAL( CONV( HEX( left( name, 1 ) ) , 16, ...
- hashmap先按照value从大到小排序,value相等时按照key从小到大排序
hashmap先按照value从大到小排序,value相等时按照key从小到大排序. [2]是从小到大排序,在[2]代码基础上交换o1,o2位置即可. 代码中用到[1]中提到的在value相等时再比较 ...
随机推荐
- 足球动图gif(一)
- 线性dp 之 奶牛渡河
题目描述 Farmer John以及他的N(1 <= N <= 2,500)头奶牛打算过一条河,但他们所有的渡河工具,仅仅是一个木筏. 由于奶牛不会划船,在整个渡河过程中,FJ必须始终在木 ...
- css :clip rect 正确的使用方法
CSS clip 是一个极少使用,但又确实存在的属性. 而且,它其实在CSS2时代就有了. w3school 上有这么一句话: clip 属性剪裁绝对定位元素. 也就是说,只有 position:ab ...
- 用scratch编程大炮打幽灵
首先来看看效果: 是不是很炫酷呢?想知道具体程序的话请关注微信公众号!
- 地图热点 jquery.image-maps.js 的使用
在我悠闲了几天之后,我们后端给了我个任务,地图热点问题.简单来说,就是后台划出热点区域,设置链接,前端拿到数据渲染页面,显示热点区域.我主要使用了jquery.image-maps.js,并且添加了一 ...
- Dicom文件基本操作
官方文档 网址:https://github.com/fo-dicom/fo-dicom托管在github上. 官方例子 Dicom文件基本操作 var file = DicomFile.Open(@ ...
- NFS /etc/exports参数解释
nfs 安装 执行以下命令安装 nfs 服务器所需的软件包 yum install -y nfs-utils 执行命令 vim /etc/exports,创建 exports 文件,文件内容如下: / ...
- 常见的HTTP返回状态值
200 (成功) 服务器已成功处理了请求. 通常,这表示服务器提供了请求的网页. 301 (永久移动) 请求的网页已永久移动到新位置. 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自 ...
- 01_Linux基础篇
学于黑马.传智播客.尚硅谷 感谢 黑马官网 传智播客官网 尚硅谷官网 微信搜索"艺术行者",关注并回复关键词"linux"获取视频和教程资料! b站在线视频 第 ...
- FPAG_Microblaze_PWM_定时器
由于Xilinx底层库的定时器没有PWM例程,调试过程中费了不少劲.生产PWM需要两个定时器同时工作,一个控制频率,一个控制占空比,位数可通过硬件设置. #include "xtmrctr_ ...