antd的Table筛选

Question

const {
      columns, dataSource, dispatch, isMe
    } = this.props;

    console.log(columns)
    
    return (
      <div className='grade-mainshow'>
        <Table
          columns={createColumns({
            arr: columns,
            show: this.handleShowPerformance,
            dispatch, isMe
          })}
          bordered
          dataSource={dataSource}
          size='middle'
          pagination={false}
          scroll={{ x: 1000, y: 540 }}
        ></Table>
      </div>
    )

打印出来的columns是下图

现在希望在主管列加筛选怎么实现？

Answer 1

对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple 用于指定多选和单选。
详情见https://ant.design/components...
const columns = [
{

title: 'Name',
dataIndex: 'name',
filters: [
  {
    text: 'Joe',
    value: 'Joe',
  },
  {
    text: 'Jim',
    value: 'Jim',
  },
  {
    text: 'Submenu',
    value: 'Submenu',
    children: [
      {
        text: 'Green',
        value: 'Green',
      },
      {
        text: 'Black',
        value: 'Black',
      },
    ],
  },
],
// specify the condition of filtering result
// here is that finding the name started with `value`
onFilter: (value, record) => record.name.indexOf(value) === 0,
sorter: (a, b) => a.name.length - b.name.length,
sortDirections: ['descend'],

},
{

title: 'Age',
dataIndex: 'age',
defaultSortOrder: 'descend',
sorter: (a, b) => a.age - b.age,

},
{

title: 'Address',
dataIndex: 'address',
filters: [
  {
    text: 'London',
    value: 'London',
  },
  {
    text: 'New York',
    value: 'New York',
  },
],
onFilter: (value, record) => record.address.indexOf(value) === 0,

},
];