react 地区筛选_Ant Design of React 之 Table 的自定义筛选

文档地址：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);

}

}

},