当前位置：首页 > VUE

VUE实现表头过滤

2026-01-17 18:38:33VUE

VUE实现表头过滤的方法

在VUE中实现表头过滤通常结合Element UI或Ant Design Vue等UI库的表格组件，以下是具体实现方式：

使用Element UI的Table组件

Element UI的el-table组件内置表头过滤功能，通过column的filters和filter-method属性实现：

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

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

自定义表头过滤

对于需要完全自定义的场景，可以通过表头插槽实现：

<el-table :data="filteredData">
  <el-table-column prop="name" label="姓名">
    <template #header="scope">
      <el-input v-model="nameFilter" placeholder="筛选姓名"/>
    </template>
  </el-table-column>
</el-table>

computed: {
  filteredData() {
    return this.tableData.filter(item => 
      item.name.includes(this.nameFilter)
    );
  }
}

使用Ant Design Vue的Table

Ant Design Vue通过customFilterDropdown属性实现自定义过滤：

<a-table :columns="columns" :data-source="data">
  <template #customFilterDropdown="{ setSelectedKeys, selectedKeys }">
    <div style="padding: 8px">
      <a-input
        placeholder="搜索名称"
        :value="selectedKeys[0]"
        @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
      />
    </div>
  </template>
</a-table>

动态过滤逻辑

对于复杂过滤需求，可以结合计算属性和watch实现动态过滤：

data() {
  return {
    filters: {
      name: '',
      status: []
    }
  }
},
computed: {
  filteredData() {
    return this.originalData.filter(item => {
      return (
        item.name.includes(this.filters.name) &&
        (this.filters.status.length === 0 || 
         this.filters.status.includes(item.status))
      );
    });
  }
}

服务端过滤

当数据量较大时，建议采用服务端过滤：

methods: {
  async fetchData(params) {
    const res = await api.get('/data', { params });
    this.tableData = res.data;
  },
  handleFilterChange(filter) {
    this.fetchData({ filter });
  }
}

以上方法可根据具体项目需求选择使用，Element UI/Ant Design Vue的封装方案适合快速实现，自定义方案则提供更高灵活性。

VUE实现表头过滤