我在我的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表,请帮助我
我有一个搜索输入和一个用户名。我想当我点击搜索按钮,我将执行过滤器搜索两个假设列名称-输入和性别-用户名
1条答案
按热度按时间b1payxdu1#
是的,看起来他们的大部分文档都围绕着React版本,但是看了这些文档,我就知道了Vue的版本。他们的React example is here。
对于Vue来说,全局过滤器非常简单。在表config中,在
state
下添加globalFilter()
,它将返回要过滤的值。这个全局过滤器将影响所有列。字符串
对于列过滤器,您需要在列定义中充实它。请确保将
id
和filterFn
分配给您想要过滤的对象。filterFn
的值可以是其内置函数列表中的字符串,或者你也可以自己做一个FilterFn,(参见内置列表下面的定义)。然后,您需要将用于过滤的数据馈送到columnFilters()
中,类似于state
,作为一个数组,包含与列匹配的value
和id
对象。我一直在用计算值创建它。型
可以同时使用全局筛选器和列筛选器。