ant 表格自定义表头和表格筛选

最新推荐文章于 2025-06-27 11:37:38 发布

原创最新推荐文章于 2025-06-27 11:37:38 发布 · 1.3w 阅读

16 ·

CC 4.0 BY-SA版权

react 同时被 2 个专栏收录

3 篇文章

订阅专栏

ant

2 篇文章

订阅专栏

本文介绍Ant Design中表格组件的高级应用技巧，包括如何实现数据筛选功能，通过列属性filters和onFilter控制筛选行为，以及如何在表头嵌入下拉选择框，实现状态筛选并触发数据重新加载。

1、ant 自动表格筛选组件

对某一列数据进行筛选，使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple用于指定多选和单选。
表头设置如下，实现了当前数据的筛选，如果需要查询接口进行数据筛选，而不是当前页的数据筛选，可以监听表格的onchange事件，在参数filters中，可以拿到变化的属性，进行数据的重新渲染。

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



function onChange(pagination, filters, sorter) {
  console.log('params', pagination, filters, sorter);
}

2、在表头中嵌入下拉选择框

API中，声明，title支持一个函数返回，所以，我们在函数中自定义返回内容即可，一下已下拉框为例

{
                title: this.downSelect(),
                dataIndex: 'status',
                key: 'status',
                render: (text, record) => {  
                        switch(text){
                            case 1:return "进行中";
                            case 2:return "已成交";
                            case 3:return "失败"
                        }
                   } 
            }





    downSelect = (currentPageData)=>{
        return(
            <Select defaultValue="none" style={{ width: 120 }} onChange={this.handleChange}>
            <Option value="none">状态(全部)</Option>
            <Option value="1">进行中</Option>
            <Option value="2">已提交</Option>
            <Option value="3">失败</Option>
          </Select>
        )
    }





 handleChange = (value)=>{
        this.setState({status:value},()=>{
            this.doFetch(); //更改状态后，重新请求数据。
        })
    }