关于antd中table表格排序以及筛选问题汇总

因为需要去点击筛选项去生成选项，这里需要封装子组件去实现，在子组件中的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,后续会继续更新。。。