elementui filter

关于 Element UI 的过滤器（Filter）功能

Element UI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件。过滤器（Filter）通常用于表格（Table）组件的列筛选功能。以下是关于 Element UI 过滤器的使用方法和示例。

基本用法

在 Element UI 的表格组件中，可以通过 filters 和 filter-method 属性实现列筛选功能。filters 定义筛选选项，filter-method 定义筛选逻辑。

<el-table :data="tableData">
  <el-table-column
    prop="status"
    label="状态"
    :filters="[
      { text: '已完成', value: 'completed' },
      { text: '进行中', value: 'in-progress' },
    ]"
    :filter-method="filterHandler">
  </el-table-column>
</el-table>

自定义筛选逻辑

filter-method 是一个函数，接收两个参数：value（当前单元格的值）和 row（当前行的数据）。通过返回 true 或 false 决定是否显示该行。

methods: {
  filterHandler(value, row) {
    return row.status === value;
  }
}

多条件筛选

可以通过 filter-multiple 属性启用多选筛选模式。默认值为 true，允许同时选择多个筛选条件。

<el-table-column
  prop="status"
  label="状态"
  :filter-multiple="false"
  :filters="[...]"
  :filter-method="filterHandler">
</el-table-column>

远程筛选

如果需要从后端获取筛选数据，可以通过监听 filter-change 事件实现远程筛选。

<el-table
  :data="tableData"
  @filter-change="handleFilterChange">
  <el-table-column
    prop="status"
    column-key="status"
    :filters="statusFilters"
    :filter-method="filterHandler">
  </el-table-column>
</el-table>

methods: {
  handleFilterChange(filters) {
    // 根据 filters 调用后端接口获取数据
    this.fetchData(filters);
  }
}

筛选面板自定义

通过 scoped-slot 可以自定义筛选面板的样式和逻辑。

<el-table-column prop="status" label="状态">
  <template slot="filter" slot-scope="{ column }">
    <el-select v-model="filterValue" placeholder="请选择">
      <el-option
        v-for="item in column.filters"
        :key="item.value"
        :label="item.text"
        :value="item.value">
      </el-option>
    </el-select>
  </template>
</el-table-column>

注意事项

• 如果表格数据是动态加载的，确保 filters 选项与数据同步更新。
• 使用 column-key 属性可以确保筛选状态在列顺序变化时保持一致。
• 筛选功能依赖于 filter-method 的实现，确保逻辑正确以避免性能问题。

以上是 Element UI 中过滤器功能的基本用法和扩展技巧，可以根据实际需求进行调整。