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

  • 相关阅读:
    matlab学习笔记第十章——曲线拟合
    matlab学习笔记第九章——变换
    matlab学习笔记第八章——积分
    matlab学习笔记第七章——常微分方程(ODE)的数值解
    matlab学习笔记第六章——基本符号演算和微分方程
    matlab学习笔记第五章——代数方程求解和其他符号工具
    javaScript中奇葩的假值
    对于javaScript闭包,立即执行函数的用法的一些理解
    Jquery——简单的视差滚动效果,兼容PC移动端
    网站前端开发与动画相关常见问题解答
  • 原文地址:https://www.cnblogs.com/cherylgi/p/13408370.html
Copyright © 2011-2022 走看看