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

本文介绍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(); //更改状态后,重新请求数据。
        })
    }

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值