zoukankan      html  css  js  c++  java
  • 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>
    

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


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

  • 相关阅读:
    【模板】高斯消元
    【洛谷P1730】最小密度路径
    【模板】矩阵乘法优化线性递推
    【洛谷P3723】礼物
    【洛谷P3338】力
    【模板】NTT
    【洛谷P1919】A*B Problem升级版
    测试理论基础(思维导图)
    Fiddler
    常用 Linux 命令
  • 原文地址:https://www.cnblogs.com/JC-0527/p/14228215.html
Copyright © 2011-2022 走看看