elementUI 表格排序多列排序

elementui 多列排序 使用效果上不是很好但需要记录下 多列排序的 有效方法
<el-table
:header-cell-class-name="handleHeaderClass"
@header-click="sortChangePushDate"
@sort-change="handleTableSort" >

  <script >
  method:{
  handleTableSort (column) {
        // 有些列不需要排序,提前返回
        if (column.sortable !== 'custom') {
            return
        }
        if (!column.multiOrder) {
            column.multiOrder = 'descending'
        } else if (column.multiOrder === 'descending') {
            column.multiOrder = 'ascending'
        } else {
            column.multiOrder = ''
        }
        this.handleOrderChange(column.property, column.multiOrder)
    },
    handleOrderChange(orderColumn, orderState) {
        let result = this.ordersList.find(e => e.orderColumn === orderColumn)
        if (result) {
            result.orderState = orderState
        } else {
            this.ordersList.push({
                orderColumn: orderColumn,
                orderState: orderState
            })
        }
        // 调接口查询,在传参的时候把ordersList进行处理成后端想要的格式
        console.warn("this.ordersList : 排序列", this.ordersList)
        this.loadUmengCountListDate()
    },
    // 设置列的排序为我们自定义的排序
    handleHeaderClass({column}) {
        column.order = column.multiOrder
    },
  }
  </script>

以上方法 适用于多列查询 ,一般情况下 多列查询条件不是很完善。使用条件 则不适用

posted @ 2021-01-04 09:41  JC-0527  阅读(1917)  评论(0编辑  收藏  举报