Elementui:el-table 结合 filters 实现表头的筛选过滤功能

阴宏爽
2023-12-01
<el-table-column
        prop="location"
        label="安装位置"
        align="center"
        min-width="160"
        :filters="LocationList"
        :filter-multiple="false"
        :filter-method="typeFilter"
        filter-placement="bottom-start"
        column-key="locationJointName"
      >
  • filters 的数组元素内部为有 text 和 value 的对象
  • filter-method 过滤方法没有起到实际作用
  • 需要结合 filter-change 一起使用,当表格的筛选条件发生变化的时候会触发该事件
<el-table
      v-if="show"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
      class="assetTable"
      :key="tableKey"
      @filter-change="filterChange"
      @selection-change="handleSelectionChange"
    >

    filterChange(filters) {
      if (!filters) return;
      if (filters["locationJointName"]) {
        this.locationId= filters["locationJointName"][0];
      }
      if (filters["brand"]) {
        this.manufacturerId = filters["brand"][0];
      }
    },
  • filters["locationJointName"]其中的 locationJointName 是由 column-key 做的标识
 类似资料: