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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

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

 
                    
1
2
3
4
5
6
7
8
9
10

然后我们要处理一下这个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);

  };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41