当前位置：首页 > VUE

vue实现表格筛选

2026-01-16 18:45:18VUE

实现表格筛选的基本思路

在Vue中实现表格筛选通常涉及以下几个核心步骤：数据绑定、筛选逻辑处理、动态渲染。以下是具体实现方法。

基础数据绑定与表格渲染

定义表格数据和表头结构，使用v-for循环渲染表格内容。

<template>
  <div>
    <input v-model="searchQuery" placeholder="输入筛选条件" />
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header.key">
            {{ header.label }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in filteredData" :key="item.id">
          <td v-for="header in headers" :key="header.key">
            {{ item[header.key] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: '',
      headers: [
        { key: 'name', label: '姓名' },
        { key: 'age', label: '年龄' },
        { key: 'department', label: '部门' }
      ],
      tableData: [
        { id: 1, name: '张三', age: 25, department: '技术部' },
        { id: 2, name: '李四', age: 30, department: '市场部' }
      ]
    };
  }
};
</script>

计算属性实现筛选逻辑

通过计算属性filteredData动态返回符合筛选条件的数据。此处以多字段模糊匹配为例：

vue实现表格筛选

computed: {
  filteredData() {
    const query = this.searchQuery.toLowerCase();
    if (!query) return this.tableData;

    return this.tableData.filter(item => {
      return Object.values(item).some(
        val => String(val).toLowerCase().includes(query)
      );
    });
  }
}

进阶筛选：分字段精确匹配

若需针对特定字段单独筛选，可扩展输入框和筛选逻辑：

<input v-model="filters.name" placeholder="姓名筛选" />
<input v-model="filters.department" placeholder="部门筛选" />

data() {
  return {
    filters: {
      name: '',
      department: ''
    }
  };
},
computed: {
  filteredData() {
    return this.tableData.filter(item => {
      const nameMatch = item.name.includes(this.filters.name);
      const deptMatch = item.department.includes(this.filters.department);
      return nameMatch && deptMatch;
    });
  }
}

性能优化：防抖处理

当数据量较大时，可为输入框添加防抖函数减少频繁计算：

vue实现表格筛选

methods: {
  debounce(fn, delay) {
    let timer;
    return function(...args) {
      clearTimeout(timer);
      timer = setTimeout(() => fn.apply(this, args), delay);
    };
  }
},
created() {
  this.debouncedFilter = this.debounce(this.updateFilter, 300);
}

使用第三方组件库

对于复杂场景，可借助现成组件库如Element UI的el-table：

<el-table :data="filteredData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="department" label="部门">
    <template #header>
      <el-input v-model="filters.department" size="mini" />
    </template>
  </el-table-column>
</el-table>

服务端筛选实现

当数据量极大时，建议将筛选逻辑移至服务端：

methods: {
  async fetchData() {
    const res = await axios.get('/api/data', {
      params: { search: this.searchQuery }
    });
    this.tableData = res.data;
  }
},
watch: {
  searchQuery() {
    this.fetchData();
  }
}