18910140161

antd的Table筛选

顺晟科技

2021-07-09 11:25:25

287

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是下图image.png现在希望在主管列加筛选怎么实现?image.png

对某一列数据进行筛选,使用列的 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,

},];

我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航