vue3中tanstack表中的全局过滤器,列过滤器

toiithl6  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(147)

我在我的vue 3项目中学习并实现了tanstack-table。然而,我找不到太多关于vue全局过滤器和列过滤器的文档或教程。我花了很多时间研究和实现,但仍然没有找到解决方案。

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

字符串
作为一个vue的新手,需要使用tanstack表,请帮助我
我有一个搜索输入和一个用户名。我想当我点击搜索按钮,我将执行过滤器搜索两个假设列名称-输入和性别-用户名

b1payxdu

b1payxdu1#

是的,看起来他们的大部分文档都围绕着React版本,但是看了这些文档,我就知道了Vue的版本。他们的React example is here
对于Vue来说,全局过滤器非常简单。在表config中,在state下添加globalFilter(),它将返回要过滤的值。这个全局过滤器将影响所有列。

const myGlobalFilter = ref("");

const table = useVueTable({
    data: myData,
    columns: myColumns,
    getFilteredRowModel: getFilteredRowModel(),
    state: {
        get globalFilter(): {
            return myGlobalFilter.value;
        }
    }
});

字符串
对于列过滤器,您需要在列定义中充实它。请确保将idfilterFn分配给您想要过滤的对象。filterFn的值可以是其内置函数列表中的字符串,或者你也可以自己做一个FilterFn,(参见内置列表下面的定义)。然后,您需要将用于过滤的数据馈送到columnFilters()中,类似于state,作为一个数组,包含与列匹配的valueid对象。我一直在用计算值创建它。

const filterFoo = ref("");
const filterBar = ref("");
const filtersComputed = computed(() => {
    const filters = [];
    if (filterFoo.value) filters.push({ id:"foo", value:filterFoo.value });
    if (filterBar.value) filters.push({ id:"bar", value:filterBar.value });
    return filters;
});

const myColumns = [{
    id: "foo",
    header: "Foo",
    accessorKey: "foo",
    filterFn: "includesString",
},{
    id: "bar",
    header: "Bar",
    accessorKey: "bar",
    filterFn: "equalsStringSensitive",
}];

const table = useVueTable({
    data: myData,
    columns: myColumns,
    getFilteredRowModel: getFilteredRowModel(),
    state: {
        get columnFilters() {
            return filtersComputed.value;
        }
    }
});


可以同时使用全局筛选器和列筛选器。

相关问题