• 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>
    

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


        吾之爱,心之念。
               携子手,到白头。

  • 相关阅读:
    C#:字符串(转载9)
    C# 数组(转载8)
    C#:可空类型(转载7)
    XD 05
    eclipse 快捷键 干货
    XD 04
    XD 03
    model, mapper, xml
    02 MyBatis & Druid
    注解 用到
  • 原文地址:https://www.cnblogs.com/JC-0527/p/14228215.html
Copyright © 2020-2023  润新知