el-table多条件排序，el-table多字段排序，el-table后端排序,element的表格排序

首先点击排序会有两个地方触发。 一个是点击表头。 另一个是点击表头上的小三角。

sortable='custom' 后端排序属性，这个不用多说了吧。

@header-click="headerClick"  点击表头的函数

 @sort-change="sortChange"   这个属于监听，无论是点击表头还是点击小三角都会走这个函数。（这个我调试的时候遇到了一个问题。后面可以规避。）

     headerClick (column, event) {
            if (column.sortable !== 'custom') {
                return;
            }
            if (column.order == null) {
                this.handleOrderChange(column.property, column.order)
            }
        },

// 监听排序
        sortChange (sort) {
            // console.log(sort);
            if (sort.column != null) {
                if (sort.column.sortable !== 'custom') {
                    return;
                }
            }
            if (sort.prop != null) {
                this.handleOrderChange(sort.prop, sort.order)
            }
           //这里调接口
            this.load();
        },

 上面两个触发排序都调用了handleOrderChange，定义一个空数组ordersList去存参数。再传给后台。

        // 处理参数存入this.ordersList
        handleOrderChange (sort, order) {
            let result = this.ordersList.find(e => e.sort === sort)
            let a = ''
            if (order == 'ascending') {
                a = "asc"
            }
            if (order == 'descending') {
                a = "desc"
            }
            if (order == null) {
                a = null
            }
            if (result) {
                result.order = a
            } else {
                this.ordersList.push({
                    sort: sort,
                    order: a
                })
            }
            console.log('处理的数组', this.ordersList);
        },

 到这一步其实参数已经处理好了，但是前端el-table表格上的排序高亮的小三角图标与实际操作不符。（这里调试了好久。因为点击表头的事件永远可以拿到column参数。但是点击小三角走的是sortChange监听。他在取消排序的操作的时候拿不到column，这样就导致你取消了某列的排序，但是拿不到column，就不能把this.ordersList里的order设置为null！！！！！！！！！！！！我只能讲到这儿了。如果没理解的话也无所谓，因为下面这个函数会把小三角设置成不可被取消掉。所以这个问题就规避了。）

 :header-cell-style='headerCellStyle'

 // 设置排序角标高亮  这个设置了可以规避点击小三角拿不到colmun的问题。导致清空不掉this.ordersList的上一次排序.总之有了它功能就完美了
        headerCellStyle ({ row, column, rowIndex, columnIndex }) {
            this.ordersList.forEach(item => {
                if (item.sort == column.property) {
                    column.order = item.order ? `${item.order}ending` : ''
                }
            })
        },

到了这儿功能大成。 可以愉快的拿着this.ordersList 与后台交互了。！