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