react table filters筛选用法

最新推荐文章于 2026-06-29 19:23:57 发布

原创最新推荐文章于 2026-06-29 19:23:57 发布 · 1.2w 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

本文介绍了一种使用Ant Design框架中表格组件的过滤器功能的方法。通过具体示例展示了如何设置和使用filters属性来实现数据筛选，特别是如何利用map方法转换数据格式以及定义onFilter回调函数来完成记录匹配。

1.
filters的数据是数组，把获取相应的数组使用map方法，将数据转换为text:,value:,
再将onFilter:(value,record) => { 
    return record.  = value
}
例子：

store:

let type = [];
            for (var key in x.data.category) {
                if (x.data.category.hasOwnProperty(key)) {
                    type.push({
                        name: x.data.category[key].name,
                        id: key
                    })
                }
            }
            this.skuType = type.map(x => ({ text:x.name, value:x.id }));

{
            title: '分类',
            dataIndex: 'catename',
            key: '分类',
            filters: toJS(this.props.sku.skuType) || [],
            onFilter: (value, record) => {
                return record.cateid === value},
        }