文档地址:https://ant.design/components/table-cn/
在antd文档中有相关介绍可以发现筛选项的配置在表格的列配置(columns)中实现,相关文档如下
可以发现主要由filterDropdown属性画自定义内容,代码参考:
/**
* 筛选项
*/
const filterList=[
{ text: '1', value: '1',ischecked:true },
{ text: '2', value: '2', ischecked:true },
{ text: '3', value: '3' ,ischecked:true},
];
const [filterCon,setFilterCon] = useState(); // 确定筛选
const [filterIsChecked,setFilterIsChecked] = useState(filterList); // 筛选项
const [filtered,setFiltered] = useState(false); // 筛选项是否高亮
const [filterDropdownVisible,setFilterDropdownVisible] = useState(false); // 筛选项下拉
/**
* 筛选选中
* @param e
* @param text
*/
const handleChangeCheckbox = (e:any,text:any,index:any) => {
let newfilter:any=[...filterIsChecked];
newfilter[index].ischecked=e.target.checked;
setFilterIsChecked(newfilter);
}
/**
* 筛选重置事件
*/
const handleReset = () => {
let newfilter:any=[...filterIsChecked];
newfilter.forEach((item:any) => {
item.ischecked=true;
});
setFiltered(false);
setFilterIsChecked(newfilter);
setFilterCon([]);
}
/**
* 筛选确定事件
*/
const handleSearch = () => {
setFiltered(true);
let newfilter:any=[...filterIsChecked];
let checked:any = [];
newfilter.forEach((item:any) => {
if(item.ischecked){
checked.push(item.text);
}
});
setFilterCon(checked);
setFilterDropdownVisible(false);
}
//列配置项
{
title:'分类',
dataIndex:'indexCategory',
filterDropdown:() => (
{filterIsChecked.map((item:any,index:any) => //筛选项循环
handleChangeCheckbox(e,item.text,index)} checked={item.ischecked}>{item.text}
)}
onClick={() => handleReset()}
size="small"
>
重置
type="primary"
onClick={() => handleSearch()}
size="small"
>
确定
),
filterDropdownVisible:filterDropdownVisible,
filterIcon: () => ,
onFilterDropdownVisibleChange:(visible:any) => { //是否显示筛选框
if(visible){
setFilterDropdownVisible(true);
}else{
setFilterDropdownVisible(false);
}
}
},