antd table表格支持多选框选择当前列，进行格式设置等

项目中遇到一个需求，要求可以选择当前列，对当前列数据进行格式设置等，发现官方文档都不支持，于是自己封装了一下antd table组件

import { Checkbox, Table } from "antd";
import React, { useEffect, useState } from "react";

const MultipleMultipleTables = (props) => {
  /**
   * Array- dataList 表格数据
   * Object- checkAllList 多选字段全选
   * String- showField   需要展示的字段 字符串 使用 空格 隔开
   * Object- checkAllTitle 多选字段名称表头 不传 为空 对应 showField 表头
   * func-  onChangeTableList 事件  返回 当前改变的数据
   * Boolean -  showHeader 属性 是否显示表头
   * Boolean - pagination 属性 是否加载分页器
   * String- columnWidth 属性 列宽
   */
  const {
    dataList,
    checkAllList,
    showField,
    checkAllTitle,
    onChangeTableList,
    showHeader,
    pagination,
    columnWidth,
  } = props;

  let columns = []

  //全选 必须对应 表格内容数据的
  const [checkAll, setCheckAll] = useState(checkAllList),
    //表格数据
    [myColumns, setMycolumns] = useState([]);


  //监听数据变化
  useEffect(() => {
    console.log(11111111111111)
    //每次有效操作会传递给父组件
    // if (onChangeTableList) onChangeTableList(columns);
  }, [dataList, myColumns]); // eslint-disable-line

  //全选 必须对应 表格内容数据的 类型状态多选字段  生成 columns
  const columnsFun = () => {
    // console.log('field===========', showField)
    if (!showField) return;
    const columns1 = [];
    const field = showField.split(" ");
    field.forEach((item, index) => {
      console.log('Object.keys(checkAll)',item)
      let multiple = {
        title: () => { // 设置标题复选框
          return (
            <Checkbox
              onChange={() => onCheckAllChange(item)}
              checked={checkAll[item]}
              key={`${item}${index}`}
            >
              {checkAllTitle[item] || ""}
            </Checkbox>
          );
        },
        dataIndex: item,
        width: columnWidth,
        // align: 'center',
        render: (text, record, index) => {
          return (
            <div key={`${text}${index}`}>
              {record[item]}
            </div>
          );
        },
      };
      columns1.push(multiple);

    });
    return columns1;
  };
  columns = columnsFun();
 



  /**
   * @description: 
   * @param {any} e 事件 获取当前选择的状态
   * @param {any} recordAndType 当前数据或者选择类型
   * @param {any} type 类型
   * @return {*}
   */
  const onCheckAllChange = (recordAndType) => {
    Object.keys(checkAll).forEach(key => { // 遍历标题全选对象，当前选项设反，其余选项全部取消勾选

      if (key === recordAndType) {
        checkAll[recordAndType] = !checkAll[recordAndType] // 当前列选择状态
      } else {
        checkAll[key] = false // 每次只能选择一列，所以把其他列取消选择
      }
    })
    
    columns = columnsFun()
   
    setCheckAll(checkAll) // 重新设置标题选项组
    setMycolumns(columns) // 设置列
    console.log('recordAndType', checkAll[recordAndType])

    if (checkAll[recordAndType]) {
      onChangeTableList(recordAndType) // 回传当前列
    } else {
      onChangeTableList('') // 回传空值 
    }

  };

  return (
    <>
      <Table
        columns={columns}
        dataSource={dataList}
        showHeader={showHeader}
        pagination={pagination}
        scroll={{
          x: dataList.length > 0 ? columns.length * 110 : false,
          y: dataList.length > 0 ? 315 : false,
        }}
      />
    </>
  );
};

export default MultipleMultipleTables;

使用的时候直接导入使用就好啦~

然后我们要处理一下这个checkAllLilst和checkAllTitle赋值

  // 设置表格数据
  const handleFormData = (data) => {
    console.log('dhandleFormDatahand', data)
    let { columns, tableData } = data;
    setColumnsArr(columns);
    let showFiled = ''
    let allList = {} // 多选字段全选 
    let allTitle = {} //  多选字段名称表头
    const myColumns = columns.map((item, index) => {
      if (index < columns.length - 1) {
        showFiled = showFiled + item + ' ' // 需要展示的字段，用以判断是否要展示，这里做了拓展，我们可以利用这个属性设置当前列不可选择
      } else {
        showFiled = showFiled + item
      }
      allList[item] = false
      allTitle[item] = item

      return {
        title: item,
        dataIndex: item,
        key: item,
      };
    });
    let source = tableData.map((item, index) => {
      let obj = {};
      obj.key = index;
      myColumns.forEach((ele, ind) => {
        obj[`${ele.title}`] = item[ind];
      });
      return obj;
    });

    console.log('设置后的数据', showFiled, allList, allTitle)
    setShowFiled(showFiled)
    setCheckAllList(allList)
    setCheckAllTitle(allTitle)
    setColumns(myColumns);
    setDataSource(source);

  };