因为需要去点击筛选项去生成选项,这里需要封装子组件去实现,在子组件中的useEffect中去在渲染时执行一次,然后
因为需要去监听col中sorter,图标跟筛选图标高亮以及变灰的问题,这里需要去监听对应的属性值的变化之后,在变化的基础上去重新设置colum的值,
这里使用的是假数据
let columns = [
{
title: 'Name',
dataIndex: 'name',
filterSearch: true,
filterDropdown:(_,record)=>{
return (<FileterMenu list={"name"} getSearchList={getSearchList} resetChange={resetChange} />)
},
filterIcon:<BgColorsOutlined />,
width: '30%',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === 'age' ? sortedInfo.order : null,
ellipsis: true,
},
{
title: 'Address',
dataIndex: 'address',
filterDropdown:(_,record)=>{
return (<FileterMenu list={"Address"} getSearchList={getSearchList} resetChange={resetChange}/>)
},
filterIcon:<BgColorsOutlined />,
width: '40%',
},
];
然后随便写点data数据
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
];
FilterMenu
import { Button, Checkbox, Space } from "antd";
import React, { useState, useEffect } from "react"
export const FileterMenu = (props) => {
const { list,getSearchList ,resetChange} = props;
const [plainOptions , setplainOptions ] = useState([])
const [indeterminate, setIndeterminate] = useState(true);
const [checkAll, setCheckAll] = useState(false);
const [checkedList, setCheckedList] = useState();
const onCheckAllChange = (e) => {
// console.log('e.target.checked',e.target.checked)
setCheckedList(e.target.checked ? plainOptions : []);
setIndeterminate(false);
setCheckAll(e.target.checked);
};
const onChange = (list) => {
// console.log(list,"list")
setCheckedList(list);
setIndeterminate(!!list.length && list.length < plainOptions.length);
setCheckAll(list.length === plainOptions.length);
};
useEffect(() => {
getMenuData()
}, [])
const getMenuData = () => {
console.log("list", list)
let result = [
{
label: 1,
value: '1'
},
{
label: 2,
value: '2'
},
{
label: 3,
value: '3'
},
]
setplainOptions(result)
}
const searchin=()=>{
// console.log("搜索")
getSearchList(checkedList,list)
}
const reset=()=>{
// console.log("重置所选项")
setCheckedList([])
setCheckAll(false)
resetChange(list)
}
return (
<div>
<Checkbox onChange={onCheckAllChange} checked={checkAll}>
Check all
</Checkbox>
<Checkbox.Group options={plainOptions} value={checkedList} style={{display:'flex',flexDirection:"column"}} onChange={onChange}></Checkbox.Group>
<Space><Button onClick={searchin}>搜索</Button>
<Button onClick={reset}>重置</Button></Space>
</div>
)
}
主页的代码
import { Button, Table } from 'antd';
import { useEffect, useState } from 'react';
import {FileterMenu} from './../components/FileterMenu'
import { ClockCircleOutlined,BgColorsOutlined } from '@ant-design/icons';
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sydney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
];
//案例一
const App = () => {
const [sortedInfo,setSortedInfo]=useState({})
const [allChoice,setAllChoice]=useState([])//存储所有选项值
const [col,setCol]=useState([])
useEffect(()=>{setCol(columns)},[])
//在onchange中设置排序结果到自定义变量中
const onChange = (pagination, filters, sorter, extra) => {
console.log('sorter', sorter);
setSortedInfo(sorter);
};
//清空排序内容
const resetsort=()=>{
setSortedInfo({})
}
// 点击手动设置sort排序
const setAgeSort = () => {
setSortedInfo({
order: 'descend',
columnKey: 'age',
});
};
//重置已选择数组
const resetChange=(val)=>{
let key
allChoice.forEach((item,index)=>{
if(Object.keys(item)[0]===val){
key=index;
}
})
//得到重置查询数据的当前下标,去掉下标
console.log('key',key)
let changeallchoice=allChoice
changeallchoice.splice(key, 1);
console.log('changeallchoice',changeallchoice)
setAllChoice(changeallchoice)
}
let columns = [
{
title: 'Name',
dataIndex: 'name',
filterSearch: true,
filterDropdown:(_,record)=>{
return (<FileterMenu list={"name"} getSearchList={getSearchList} resetChange={resetChange} />)
},
filterIcon:<BgColorsOutlined />,
width: '30%',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
sorter: (a, b) => a.age - b.age,
sortOrder: sortedInfo.columnKey === 'age' ? sortedInfo.order : null,
ellipsis: true,
},
{
title: 'Address',
dataIndex: 'address',
filterDropdown:(_,record)=>{
return (<FileterMenu list={"Address"} getSearchList={getSearchList} resetChange={resetChange}/>)
},
filterIcon:<BgColorsOutlined />,
width: '40%',
},
];
//外部使用方法在里面去调用
// filterIcon
const getSearchList=(val,ziduan,hasFilter)=>{
// console.log('allChoice',allChoice)
//这里对选中项进行添加,过滤,若重复则不添加
console.log("val",val,"columns",col,"ziduan",ziduan)
let cols=columns;
//设置筛选状态颜色
cols.forEach((item)=>{
if(item.dataIndex===ziduan){
item.filterIcon=<BgColorsOutlined style={{color:val.length!==0 ? "red": "#ccc"}}/>
}
})
console.log('cols',col)
// setCol(cols)
let obj=allChoice.filter((item)=>{
return item.hasOwnProperty(ziduan)!==false;
})
let obj2=[...allChoice,{[ziduan]:val}]
// allChoice.forEach((item)=>{
// if(item.hasOwnProperty(ziduan) ){
// return;
// }else{
// obj2 =[...allChoice,{[ziduan]:val}]
// }
// })
// console.log('obj2',obj2)
// console.log('obj',obj.length)
// if(obj.length===0){
// obj2 =[...allChoice,{[ziduan]:val}]
// setAllChoice([...allChoice,{[ziduan]:val}])
// }
setAllChoice([...allChoice,{[ziduan]:val}])
getMsgData(obj2)
}
const getMsgData=(filter)=>{
console.log('filter',filter)
}
return(<div><Table columns={columns} dataSource={data} onChange={onChange} />
<Button onClick={resetsort}>reset</Button>
<Button onClick={setAgeSort}>setAgeSort</Button>
</div>)}
export default App;
功能目前还有问题,使用setState目前导致没法及时更新col,后续会继续更新。。。