zoukankan      html  css  js  c++  java
  • 后端排序时去掉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

  • 相关阅读:
    ECS内网穿透
    设置服务器ssh会话时间
    VScode插件
    Linux拷贝U盘文件(命令行)
    打开IDM下载视频时弹出防火墙阻止下载,解决方案
    如何将jmeter.bat命令文件固定到任务栏
    jmeter安装教程
    安装JDK8.0(JDK1.8) & 环境变量配置 & idea中配置java路径
    教你不用任何第三方软件实现任务栏居中
    [Unity优化]gc03:代码优化
  • 原文地址:https://www.cnblogs.com/cherylgi/p/13408370.html
Copyright © 2011-2022 走看看