如何在shadcn表格中按应用名称筛选预算追踪数据？

AI 小北

2026-6-27

解决数组格式字段的表格筛选问题

针对你遇到的应用名称数组格式筛选无结果的问题，核心是需要自定义一个数组包含匹配的筛选函数，替代默认的字符串匹配逻辑。以下是具体实现步骤：

1. 编写自定义筛选函数

这个函数会检查目标数组中是否包含筛选值，同时支持忽略大小写匹配（可根据需求调整）：

const arrayIncludesFilter = (row, columnId, filterValue) => {
  // 筛选值为空时，直接返回所有行
  if (!filterValue) return true;
  
  const appList = row.getValue(columnId);
  // 非数组格式直接过滤掉
  if (!Array.isArray(appList)) return false;
  
  // 检查数组中是否有元素包含筛选值（忽略大小写）
  return appList.some(app => app.toLowerCase().includes(filterValue.toLowerCase()));
};

2. 整合到ColumnDef列定义中

在你的apps列配置里，指定filterFn为上面的自定义函数，同时配置渲染逻辑把数组转为逗号分隔的字符串：

const columns = [
  // 其他列配置...
  {
    accessorKey: "apps",
    header: "应用名称",
    // 渲染数组为友好的字符串格式
    cell: ({ row }) => row.getValue("apps").join(", "),
    // 绑定自定义筛选函数
    filterFn: arrayIncludesFilter,
    // 指定筛选器类型为文本输入
    filter: "text",
  },
];

3. 绑定筛选输入框到表格状态

使用shadcn的Input组件，将输入值同步到表格的筛选状态中：

import { Input } from "@/components/ui/input";
import { useTable } from "@tanstack/react-table";

// 初始化表格实例
const table = useTable({
  columns,
  data: yourBudgetData,
});

// 获取筛选状态控制方法
const { setFilter } = table.getStateManager();

// 渲染筛选输入框
<Input
  placeholder="输入应用名称筛选"
  onChange={(e) => setFilter("apps", e.target.value.trim())}
/>