element-ui el-table字段联合检索(后点击的作为次要条件)

示例:这个表格需要联合检索dueDate和essaySubmissionDeadline

特殊需求:后点击进行筛选的列,后端需要作为联合检索的次要条件

所以考虑使用:

:header-cell-class-name & @sort-change 实现功能

<el-table
  empty-text="No Data"
  :data="tableData"
  style="width: 100%"

  :header-cell-class-name="handleTheadAddClass"
  @sort-change="sortTableData"
>
  <el-table-column prop="title" label="Title" width="300"></el-table-column>
  <el-table-column
    prop="dueDate" label="Application Deadline" width="180"
    sortable="custom" :sort-orders="['ascending', 'descending', null]"
  ></el-table-column>
  <el-table-column
    prop="essaySubmissionDeadline" label="Essay Submission Deadline" width="180"
    sortable="custom" :sort-orders="['ascending', 'descending', null]"
  ></el-table-column>
  
</el-table>

方法:

/**
 * @Author      : zhq_zvik
 * @description : 动态调整需要进行联合检索的数据
 * @param        {*} prop
 * @param        {*} order
 * @return       {*}
 */
sortTableData ({ prop, order }) {
  // 需要进行联合检索的字段数量
  const maxLen = 2
  // 当前数组对象长度
  const sortLen = this.sortObj.length
  // 判断是否已经存在对应prop的值,不存在的话直接插入一条数据
  const index = this.sortObj.findIndex((item) => {
    return item.prop === prop
  })
  if (index === -1 && sortLen < maxLen) {
    if (order !== null) {
      this.sortObj.push({ prop: prop, order: order })
    }
  } else {
    if (order === null) {
      this.sortObj.splice(index, 1)
    } else {
      if (index < maxLen - 1) {
        // 不是最后一个的话,切除当前数据,然后尾部加一个
        this.sortObj.splice(index, 1)
        this.sortObj.push({ prop: prop, order: order })
      } else if (index === maxLen - 1 || sortLen === 1) {
        // 是最后一个话直接修改数据
        this.sortObj[index].order = order
      }
    }
  }
},
/**
 * @Author      : zhq_zvik
 * @description : 动态添加联合检索的检索样式
 * @param        {*} column
 * @return       {*}
 */
handleTheadAddClass ({ column }) {
  const prop = column.property
  const index = this.sortObj.findIndex((item) => {
    return item.prop === prop
  })
  if (index !== -1) {
    column.order = this.sortObj[index].order
    return 'active-thead'
  }
},

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值