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

最新推荐文章于 2024-07-30 16:12:41 发布

_Elias

最新推荐文章于 2024-07-30 16:12:41 发布

阅读量437

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/zhq_zvik/article/details/115374454

版权

Vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

示例：这个表格需要联合检索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'
  }
},