如何使用React过滤Antd Table中的标签？

Question

 {
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
render: (_, { tags }) => (
  <>
    {tags.map((tag) => {
      let color = tag.length > 5 ? 'geekblue' : 'green';
      if (tag === 'loser') {
        color = 'volcano';
      }
      return (
        <Tag color={color} key={tag}>
          {tag.toUpperCase()}
        </Tag>
      );
    })}
  </>
),

},

const App = () => <Table columns={columns} dataSource={data} />;
export default App;

我想为标签添加过滤器并仅显示已过滤标签的行。感谢任何帮助。谢谢！

Answer 1

I think you can try this


title: 'Tag',
key: 'tags',
dataIndex: 'tags',
filters: [
      {
        text: 'NICE',
        value: 'nice',
      },
      {
        text: 'DEVELOPER',
        value: 'developer',
      },
      {
        text: 'LOSER',
        value: 'loser',
      },
      {
        text: 'COOL',
        value: 'cool',
      },
      {
        text: 'TEACHER',
        value: 'teacher',
      },
    ],
onFilter: (value: string | boolean | React.Key, record: DataType) => {
      if (typeof value === 'string') {
        return record.tags.some((tag) => tag === value);
      }
      return false;
    },
filterSearch: true,