项目中遇到一个需求,要求可以选择当前列,对当前列数据进行格式设置等,发现官方文档都不支持,于是自己封装了一下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;
使用的时候直接导入使用就好啦~
<TablesMultiple
dataList={dataSource}
showField={showField}
checkAllList={checkAllList}
checkAllTitle={checkAllTitle}
onChangeTableList={onChangeTableList}
showHeader={true}
pagination={false}
columnWidth={100}>
</TablesMultiple>
然后我们要处理一下这个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);
};