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