reactjs 如何用React过滤Antd Table中的标签?

qgzx9mmu  于 12个月前  发布在  React
关注(0)|答案(1)|浏览(206)
{
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;


我想为标签添加一个过滤器,并只显示已过滤标签的行。感谢任何帮助。谢谢!x1c 0d1x

e0bqpujr

e0bqpujr1#

我想你可以试试这个

{
    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,
}

字符串

相关问题