经常会遇到远程排序,需要去掉null状态的排序,当设置sortable='custom'时,设置sort-orders为['ascending', 'descending']是不生效的。
然后查到了一种解决办法,如下:

element表格排序有三种状态,升序、降序、null,现在想要实现的效果为只要升序和降序。
主要思想是检测返回的排序值是否为null,如果是的话则和上一个排序取相反的值(需要先用变量保存上一次的排序值),代码如下:

  1. //这是排序触发函数
  2. change_sort(row) {
  3. if (row.order === null) {
  4. this.save_sort === 'descending' ? row.order = 'ascending' : row.order = 'descending'
  5. row.column.order = row.order
  6. }
  7. if (row.order == 'ascending') { //降序
  8. this.listParams.sort = 1;
  9. } else {
  10. this.listParams.sort = 0;
  11. }
  12. this.save_sort = row.order;
  13. this.getList();
  14. },

按照上面这种方式在指对某一列进行排序时是没有问题的,但如果需要多行进行排序,在多次点击时,就会出现如下情况:

主要是为当你点击某一列的排序为null时,改变了column.order和order,然后点击不同列的时候,前一列的排序并没有被清空。可以通过this.$refs.table.columns查看前一行的order

解决思路就是当前order为null时,记录下当前prop,然后下一列排序,如果当前prop与之前prop不相同,则清除上一次的order,代码如下

  1. // 后端排序
  2. sortChange({column, prop, order}) {
  3. //自定义排序事件 {column: {…}, prop: "time", order: "descending"}, sqlchemy分页器只能识别desc/asc,注意转换
  4. // 取消默认排序状态null
  5. if (order !== null && this.prevProp !== prop) {
  6. let columns = this.$refs.myTable.columns.find(x => x.property === this.prevProp);
  7. columns.order = '';
  8. }
  9. if (order === null) {
  10. column.order = this.saveSort === 'descending' ? 'ascending' : 'descending';
  11. this.prevProp = prop;
  12. }
  13. this.saveSort = column.order;
  14.  
  15. const order_new = {
  16. 'ascending': 'asc',
  17. 'descending': 'desc',
  18. }
  19. this.pageHelper.ordercol = prop
  20. this.pageHelper.order = order_new[column.order]
  21. this.fetchData()
  22. },

参考博文:https://www.cnblogs.com/fangnianqin/p/13155781.html

后端排序时去掉element表格排序的null状态的更多相关文章

  1. Jtable 表格按多列排序(支持中文汉字排序)

    这两天公司让做一个Jtable表格的排序,首先按A列排序,在A列相等时按B列排序,B列相等时按C列排序,ABC三列可以任意指定,最多分三列,这样的一个需求.由于我是大神,所以必须做了出来.ok,不自恋 ...

  2. JS对表格排序(支持对序号,数字,字母,日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

  3. 案例学习总结:原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  4. javascript 表格排序和表头浮动效果(扩展SortTable)

    前段时间一个项目有大量页面用到表格排序和表头浮动的效果,在网上找了几个表格排序的js代码,最后选择了 Stuart Langridge的SortTable,在SortTable基础上做了些扩展,加上了 ...

  5. [datatable]排序时指定某列不可排序

    datatable是一个jquery扩展的表格插件.其提供了强大的表格功能. 官方地址:http://www.datatables.net/ 在官方示例中,对于表格的是否可排序是在初始化中设置的一个值 ...

  6. element-ui el-table表格排序sortable参数解析

    表格组件的排序功能,点击排序表头可以进行升序和降序进行排序 页面代码,基本上排序的参数都使用了 <el-table :data="tableData" style=" ...

  7. JS实现前台表格排序功能

    JS实现前台表格排序功能 虽然数据量不大的情况下,前台排序速度比较快,但一般情况下,我们的项目只使用后台排序,原因有二: 一是代码简单:二是前台JS排序对于有分页的情况无法处理. 前段时间,有个功能需 ...

  8. mysql 查询数据时按照A-Z顺序排序返回结果集

    mysql 查询数据时按照A-Z顺序排序返回结果集 $sql = "SELECT * , ELT( INTERVAL( CONV( HEX( left( name, 1 ) ) , 16, ...

  9. hashmap先按照value从大到小排序,value相等时按照key从小到大排序

    hashmap先按照value从大到小排序,value相等时按照key从小到大排序. [2]是从小到大排序,在[2]代码基础上交换o1,o2位置即可. 代码中用到[1]中提到的在value相等时再比较 ...

随机推荐

  1. Python Ethical Hacking - Malware Packaging(1)

    PACKAGING Convert python program into an executable that: Packages all program files into a single e ...

  2. 浏览器如何执行JS

    作为JS系列的第一篇,内容当然是浏览器如何执行一段JS啦. 首先通过浏览器篇我们可以得知,JS是在渲染进程里的JS引擎线程执行的.在此之后还要了解几个概念,编译器(Compiler).解释器(Inte ...

  3. 用scratch编程大炮打幽灵

    首先来看看效果: 是不是很炫酷呢?想知道具体程序的话请关注微信公众号!

  4. 04 . Filebeat简介原理及配置文件和一些案例

    简介 Beats轻量型数据采集器 Beats 平台集合了多种单一用途数据采集器.它们从成百上千或成千上万台机器和系统向 Logstash 或 Elasticsearch 发送数据. Beats系列 全 ...

  5. Python学习周期 学习Python要多久?

    学习python编程需要多长时间?首先我们需要明确一点,在互联网技术领域,技术始终在不断的迭代升级,只要进入IT行业就要时刻保持学习的状态,才能不被技术进步的车轮碾压.我们目前讨论的python学习周 ...

  6. 001.Nginx简介

    一 Nginx概述 1.1 Nginx简介 Nginx是一个高性能的HTTP和反向代理web服务器,Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在B ...

  7. python为什么这么火?里面肯定是有原因的

    因为人生苦短要用python啊! 看完本文,你将在结尾得到本文的一个福利彩蛋 你瞧瞧其他语言之父... Java之父——James Gosling PHP之父 ——Rasmus Lerdorf Obj ...

  8. 如何消灭飞机的“黑色十分钟”,AI来帮忙

    近年来,“AI的应用和落地”逐渐成了具化的关键词,它和很多事物很多行业结合在一起,形成了奇妙的“化学反应”.例如,在日常生活中,AI可以推送我们喜欢的新闻或视频,可以在拍照的时候识别场景提升照片的美感 ...

  9. lua中 string.find(查找获取字符串) string.gsub(查找替换字符串) string.sub(截取字符串)

    > aaa='/p/v2/api/winapi/adapter/lgj'> print(string.find(aaa, "^/.+/adapter/(.*)"))1 ...

  10. IO—》Properties类&序列化流与反序列化流

    Properties类 介绍:Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串. Properties类特点: ...