当前位置：首页 > 前端教程

elementui filter

2026-01-14 20:05:11前端教程

ElementUI 过滤器（Filter）使用指南

ElementUI 是一套基于 Vue.js 的组件库，常用于快速构建前端界面。过滤器（Filter）在 ElementUI 中主要用于表格（Table）组件的列数据筛选或格式化显示。以下是常见的使用方法和示例。

表格列过滤器

在 ElementUI 的表格组件中，可以通过 filters 和 filter-method 属性实现列数据的筛选功能。

<el-table :data="tableData">
  <el-table-column
    prop="status"
    label="状态"
    :filters="[
      { text: '启用', value: 'active' },
      { text: '禁用', value: 'inactive' }
    ]"
    :filter-method="filterStatus">
  </el-table-column>
</el-table>

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

filters 定义筛选选项，text 是显示文本，value 是筛选值。
filter-method 是自定义筛选函数，参数为筛选值 value 和当前行数据 row，返回 true 表示匹配。

全局过滤器（Vue Filter）

ElementUI 本身不提供全局过滤器功能，但可以结合 Vue 的过滤器（Filter）对数据进行格式化。

// 注册全局过滤器
Vue.filter('formatDate', function(value) {
  if (!value) return '';
  return new Date(value).toLocaleDateString();
});

<el-table :data="tableData">
  <el-table-column prop="createTime" label="创建时间">
    <template slot-scope="scope">
      {{ scope.row.createTime | formatDate }}
    </template>
  </el-table-column>
</el-table>

自定义筛选弹出框

对于更复杂的筛选需求，可以通过 scoped slot 自定义筛选界面。

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名">
    <template slot="header" slot-scope="scope">
      <el-input
        v-model="searchName"
        size="mini"
        placeholder="输入姓名筛选"
        @change="handleNameFilter"/>
    </template>
  </el-table-column>
</el-table>

data() {
  return {
    searchName: '',
    tableData: [] // 原始数据
  };
},
methods: {
  handleNameFilter() {
    this.tableData = this.originalData.filter(item => 
      item.name.includes(this.searchName)
    );
  }
}

表单输入框过滤器

ElementUI 的输入框（Input）可以通过监听事件实现实时过滤。

<el-input
  v-model="searchText"
  placeholder="输入关键词过滤"
  @input="handleFilter">
</el-input>
<el-table :data="filteredData"></el-table>

data() {
  return {
    searchText: '',
    originalData: [],
    filteredData: []
  };
},
methods: {
  handleFilter() {
    this.filteredData = this.originalData.filter(item =>
      item.name.includes(this.searchText)
    );
  }
}