Vue3中TanStack Table全局筛选与列筛选实现求助

1. 配置列的筛选规则 #

首先修改你的columnsTable数组，为需要筛选的列指定对应筛选函数：

const columnsTable = [
  {
    accessorKey: 'name',
    header: '姓名',
    // 姓名列使用模糊文本匹配
    filterFn: 'includesString',
  },
  {
    accessorKey: 'gender',
    header: '性别',
    // 性别列使用精确值匹配
    filterFn: 'equals',
  },
  // 其他列的配置...
];

2. 绑定筛选控件并实现筛选逻辑 #

在组件模板中添加输入框、下拉框和搜索按钮，通过Vue响应式变量绑定输入值，点击按钮时调用表格的setFilter方法应用筛选：

<template>
  <!-- 筛选控件区域 -->
  <div class="filter-bar">
    <input 
      v-model="nameFilter" 
      placeholder="输入姓名搜索"
      type="text"
    />
    <select v-model="genderFilter">
      <option value="">全部性别</option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <button @click="applyFilters">搜索</button>
  </div>

  <!-- TanStack Table 渲染部分 -->
  <table>
    <thead>
      <tr v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
        <th v-for="header in headerGroup.headers" :key="header.id">
          {{ header.isPlaceholder ? '' : header.renderHeader() }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in table.getRowModel().rows" :key="row.id">
        <td v-for="cell in row.getVisibleCells()" :key="cell.id">
          {{ cell.renderCell() }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { ref } from 'vue';
import { useVueTable, getCoreRowModel, getPaginationRowModel, getFilteredRowModel } from '@tanstack/vue-table';

// 假设你的数据源是响应式数组
const dataTable = ref([
  { id: 1, name: '张三', gender: 'male' },
  { id: 2, name: '李四', gender: 'female' },
  // 更多测试数据...
]);

// 筛选条件的响应式变量
const nameFilter = ref('');
const genderFilter = ref('');

const columnsTable = [
  {
    accessorKey: 'name',
    header: '姓名',
    filterFn: 'includesString',
  },
  {
    accessorKey: 'gender',
    header: '性别',
    filterFn: 'equals',
  },
];

const table = useVueTable({
  data: dataTable,
  columns: columnsTable,
  enableFilters: true,
  getCoreRowModel: getCoreRowModel(),
  getPaginationRowModel: getPaginationRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
  initialState: {
    pagination: {
      pageSize: 10
    }
  },
});

// 应用筛选的函数
const applyFilters = () => {
  // 设置姓名列筛选值，空值时清除筛选
  table.setFilter('name', nameFilter.value || undefined);
  // 设置性别列筛选值，空值时清除筛选
  table.setFilter('gender', genderFilter.value || undefined);
};
</script>

关键说明 #

• setFilter方法：第一个参数是列的accessorKey，第二个参数是筛选值，传入undefined会清除对应列的筛选状态
• 内置筛选函数：TanStack Table提供了includesString（模糊文本匹配）、equals（精确值匹配）等内置函数，满足基础筛选需求
• 响应式联动：通过v-model绑定筛选控件的值，点击按钮时统一提交筛选规则，表格会自动更新过滤后的行数据

内容的提问来源于stack exchange，提问作者Quang Trần