react antd 实现 表格（Table）多个多选功能组件实现_react多选框

Ⅰ- 壹 - 功能展示和使用需求

需求描述

基于antd 实现

表格要实现多个多选互不影响包含 全选 半选 。（可自由拓展）

功能展示

可以禁止选择某一个

Ⅱ - 贰 - 封装代码

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

const MultipleMultipleTables: React.FC<any> = (props: any) => {
  /**
   * Array- dataList 表格数据
   * Object- checkAllList 多选字段全选
   * String- rowKey   主键 默认 id
   * String- showField   需要展示的字段 字符串 使用 空格 隔开
   * Object- checkAllTitle 多选字段名称表头 不传 为空 对应 showField 表头
   * func-  onChangeDataList 事件  返回 当前改变的数据
   */
  const { dataList, checkAllList, rowKey, showField, checkAllTitle, onChangeDataList } = props;
  //表格数据
  // let dataList = [
  //   {
  //     id: '1',
  //     c: '按钮权限',
  //     age: 32,
  //     enabled: true,
  //     editor: false,
  //     del: false,
  //     name: '大王',
  //   },
  //   {
  //     id: '2',
  //     c: 'Jim Green',
  //     age: 42,
  //     enabled: true,
  //     editor: true,
  //     del: false,
  //     name: '大王1',
  //   },
  //   {
  //     id: '3',
  //     c: 'Joe Black',
  //     age: 32,
  //     enabled: true,
  //     editor: true,
  //     del: false,
  //     name: '大王2',
  //   },
  // ];
  // 带有禁选功能的数据
  //const dataList = [
//   {
//     id: '1',
//     c: '按钮权限',
//     age: 32,
//     enabled: true,
//     editor: false,
//     isenabled:true,
//     name: '大王',
//   },
//   {
//     id: '2',
//     c: '字段权限',
//     age: 42,
//     enabled: true,
//     editor: false,
//     iseditor:true,
//     name: '大王1',
//   },
//   {
//     id: '3',
//     c: '任务权限',
//     age: 32,
//     enabled: true,
//     editor: true,
//     name: '大王2',
//   },
// ];
  //设置 全选的 字段 必填 对应数据 控制的字段
  // let checkAllList = {
  //   enabled: null,
  //   editor: null,
  // };

  /**
   * @description: 初始化 全选默认值 根据 dataList和checkAllList 设置
   * @param {*}
   * @return {*}
   */
  const checkAllFun = () => {
    let trueArr: any = {};
    let checkAll = {};
    let checkAllKeys = Object.keys(checkAllList);
    for (const iKey of checkAllKeys) {
      for (const i in dataList) {
        if (!trueArr[iKey]) trueArr[iKey] = [];
        trueArr[iKey].push(dataList[i][iKey]);
      }
    }

    for (const key in trueArr) {
      checkAll[key] = trueArr[key].every((item: { [x: string]: any }) => item);
    }
    return checkAll;
  };

  //全选 必须对应 表格内容数据的  
  const [checkAll, setCheckAll] = useState<any>(checkAllFun()),
    //表格数据
    [data, setData] = useState(dataList),
    //全选属性
    [typeNext, setTypeNext] = useState('');

  //监听数据变化
  useEffect(() => {
    //设置当前点击的 是否全选
    if (!typeNext) return;
    setCheckAll(() => {
      return {
        ...checkAll,
        [typeNext]: data.every((item: { [x: string]: any }) => item[typeNext]),
      };
    });
    //每次有效操作会传递给父组件
    if (onChangeDataList) onChangeDataList(data);
  }, [data, typeNext]);

 //全选 必须对应 表格内容数据的 类型状态多选字段  生成 columns
  const columnsFun=()=>{
    if (!showField) return
    const columns: any = [];
    const field = showField.split(' ');

    field.map((item: any, index: any) => {
      if (Object.keys(checkAll).includes(item)) {
        let multiple = {
          title: () => {
            return (
              <Checkbox
                indeterminate={indeterminateFun(item)}
                onChange={(e) => onCheckAllChange(e, item)}
                checked={checkAll[item]}
              >
                {checkAllTitle[item] || ''}
              </Checkbox>
            );
          },
          dataIndex: item,
          render: (text: any, record: { enabled: boolean | undefined }, index: any) => {
            return (
              <>
                <Checkbox
                  onChange={(e) => onCheckAllChange(e, record, item)}
                  checked={record[item]}
                  disabled={record['is' + item]} //控制字段不可选, 开启后对应字段 showField  字段需要修改 数据,列如:isenabled:true
                ></Checkbox>
              </>
            );
          },
        };
        columns.push(multiple);
      } else {
        columns.push({
          title: checkAllTitle[item],
          dataIndex: item,
        });
      }
    });
    return columns
  }
  const columns = columnsFun()


  /**
   * @description: 半选的状态 表达式
   *               当前全选 为true 半选为 false
   *               当前全选 为false 半选 判断当前是否有选中项 有就返回true
   * @param {any} type 全选的类型
   * @return {*}
   */
  const indeterminateFun = (type?: any) => {
    let indeterminate = data.some((someItem: { [x: string]: any }) => someItem[type]);
    return (checkAll[type] && !indeterminate) || (!checkAll[type] && indeterminate);
  };

  /**
   * @description:  当为三个参数的时候 处理的是 子复选框  当为俩参数的时候 为全选的复选框
   * @param {any} e 事件 获取当前选择的状态
   * @param {any} recordAndType 当前数据或者选择类型
   * @param {any} type 类型
   * @return {*}
   */
  const onCheckAllChange = (e: any, recordAndType?: any, type?: any) => {
    setData(() => {
      return data.map((item: any) => {
        'string' == typeof recordAndType
          ? (item[recordAndType] = e.target.checked)
          : item.id == recordAndType.id
          ? (item[type] = e.target.checked)
          : '';
        return item;
      });
    });
    setTypeNext('string' == typeof recordAndType ? recordAndType : type);
  };

  return (
    <>
      <Table rowKey={rowKey || 'id'} columns={columns} dataSource={data} />
    </>
  );
};

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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210

如果想禁用不可选择可以 通过在数据添加 字段 isXXX

 disabled={disabled || !record['is' + item]}
1

Ⅲ - 叁 - 使用

import {Table } from 'antd';
import MultipleMultipleTables from './components/MultipleMultipleTables';
//  模拟接口数据 表格内容数据
const dataList = [
  {
    id: '1',
    c: '按钮权限',
    age: 32,
    enabled: true,
    editor: false,
    del: false,
    name: '大王',
  },
  {
    id: '2',
    c: 'Jim Green',
    age: 42,
    enabled: true,
    editor: true,
    del: false,
    name: '大王1',
  },
  {
    id: '3',
    c: 'Joe Black',
    age: 32,
    enabled: true,
    editor: true,
    del: false,
    name: '大王2',
  },
];

const onChangeDataList = (dataList: any) => {
  console.log(dataList, '====父组件data======');
};

const SettingRoleRightsDetails: React.FC<{}> = (props: any) => {
  const [datas, setDatas] = useState(dataList);


  return (
    <div >
       <MultipleMultipleTables dataList={datas} showField="c age enabled editor" checkAllList={{enabled: null, editor: null,}} checkAllTitle={{c:'名称',age:'年龄',enabled:'是否可用',editor:'是否可编辑'}} onChangeDataList={onChangeDataList}></MultipleMultipleTables> 
    </div>
  );
};
export default SettingRoleRightsDetails;

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