• 后端排序时去掉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

  • 相关阅读:
    MapReduce -- 统计天气信息
    设计模式--策略模式
    基于物品的协同过滤(二)
    Hadoop应用开发,常见错误
    基于物品的协同过滤(一)
    基于用户的协同过滤
    MapReduce开发程序,运行环境配置
    3DES加解密 C语言
    js获取对象位置的方法
    icheck.js的一个简单demo
  • 原文地址:https://www.cnblogs.com/cherylgi/p/13408370.html
Copyright © 2020-2023  润新知