原型:
代码片段:
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { Table } from "antd";
const SelfTableCommon = ({ data1,ar1r }) => {
const jsonData = data1
const width = `${100 / (jsonData.lastColNo + 2)}%`;
// console.log(Array(jsonData.lastColNo + 1).fill({ index: '1' }));
const lastColNo = Array(jsonData.lastColNo + 3).fill({});
const arr = ar1r || []
const columns = lastColNo.map((i, idx) => ({
render: (text, row, index) => {
const idxs = idx - 2;
if (idxs === -2 && arr.includes(index)) {
return "》》》";
}
if(idxs === -2) return ''
if (idxs === -1 && !index) {
return "序号";
} if (idxs === -1) {
return index;
}
return row[idxs]?.value ?? "";
},
onCell: (_, index) => {
const idxs = idx - 2;
if (idxs <= -1) return {};
const { endRow, row, endCol, col, colSpan, rowSpan } = _[idxs] || {};
if (rowSpan !== undefined) {
return { colSpan, rowSpan };
}
if (colSpan === 0) {
return { colSpan: 0 };
}
if (endRow && endRow !== row) {
// console.log('----', `${index}---${idxs}`);
return {
rowSpan: endRow - row + 1,
style: { width: index ? width : "" }
};
}
if (endCol && endCol !== col) {
console.log("=================", `${index}---${idxs}`);
return {
colSpan: endCol - col + 1,
style: { width: index ? width : "" }
};
}
// console.log('---=======');
return { style: { width: index ? width : "" } };
// colSpan: index < 4 ? 1 : 5,
// rowSpan
}
}));
const rowObj = {};
const fn = (r, c, rs) => {
for (let index = r; index <= rs; index++) {
rowObj[`${index}-${c}`] = { colSpan: 0 };
}
};
const fns = (r, c, rs) => {
for (let index = r; index <= rs; index++) {
rowObj[`${c}-${index}`] = { colSpan: 0 };
}
};
const fnss = (r, c, rs, cs) => {
for (let idxC = c; idxC <= cs; idxC++) {
for (let index = r; index <= rs; index++) {
rowObj[`${idxC}-${index}`] = { colSpan: 0 };
}
}
};
const data = jsonData.rows.map((v, i) => {
const cells = v;
const obj = { ...cells, cells: undefined };
cells?.cells.forEach((ii) => {
obj[ii.col] = ii;
});
for (let index = 0; index <= jsonData.lastColNo; index++) {
const temp = obj[index] || rowObj[`${i}-${index}`] || {};
const { col, row, endRow, endCol } = temp;
if (
endRow !== undefined &&
endRow !== i &&
endCol !== undefined &&
endCol !== index
) {
console.log("col、row 都合并");
fnss(col, i, endCol, endRow);
fn(i, index, endRow);
obj[index] = {
...temp,
rowSpan: endRow - row + 1,
colSpan: endCol - col + 1
};
} else if (endRow !== undefined && endRow !== i) {
fn(i, index, endRow);
obj[index] = temp;
} else if (endCol !== undefined && endCol !== index) {
fns(col, i, endCol);
obj[index] = temp;
} else {
// const temp = cells.cells[index]
obj[index] = temp;
}
}
return obj;
}); // filledArray; // [{ value: 0 }, { value: 0 }, { value: 0 }]
return (
<Table
aling="center"
columns={columns}
dataSource={data}
showHeader={false}
ellipsis
pagination={false}
bordered
/>
);
};
export default SelfTableCommon;
示例数据:
{
"index": 0,
"lastColNo": 16,
"lastRowNo": 3,
"regions": [],
"rows": [{
"cells": [{
"col": 0,
"colName": "A",
"endCol": 1,
"endRow": 1,
"refName": "A1",
"row": 0,
"type": 2,
"value": "单位信息"
}, {
"col": 2,
"colName": "C",
"endCol": 15,
"endRow": 0,
"refName": "C1",
"row": 0,
"type": 2,
"value": "个人信息"
}, {
"col": 16,
"colName": "Q",
"endCol": 16,
"endRow": 2,
"refName": "Q1",
"row": 0,
"type": 2,
"value": "回传信息"
}],
"lastCol": 16,
"row": 0
}, {
"cells": [{
"col": 2,
"colName": "C",
"endCol": 5,
"endRow": 1,
"refName": "C2",
"row": 1,
"type": 2,
"value": "个人基本信息"
}, {
"col": 6,
"colName": "G",
"endCol": 12,
"endRow": 1,
"refName": "G2",
"row": 1,
"type": 2,
"value": "参保信息"
}, {
"col": 13,
"colName": "N",
"endCol": 15,
"endRow": 1,
"refName": "N2",
"row": 1,
"type": 2,
"value": "附加信息"
}],
"lastCol": 15,
"row": 1
}, {
"cells": [{
"col": 0,
"colName": "A",
"fillColor": "0",
"refName": "A3",
"row": 2,
"type": 1,
"value": "单位编号"
}, {
"col": 1,
"colName": "B",
"fillColor": "0",
"refName": "B3",
"row": 2,
"type": 1,
"value": "单位名称"
}, {
"col": 2,
"colName": "C",
"fillColor": "0",
"refName": "C3",
"row": 2,
"type": 1,
"value": "姓名"
}, {
"col": 3,
"colName": "D",
"fillColor": "0",
"refName": "D3",
"row": 2,
"type": 1,
"value": "证件类型"
}, {
"col": 4,
"colName": "E",
"fillColor": "0",
"refName": "E3",
"row": 2,
"type": 1,
"value": "证件号码"
}, {
"col": 5,
"colName": "F",
"fillColor": "0",
"refName": "F3",
"row": 2,
"type": 1,
"value": "社保电脑号"
}, {
"col": 6,
"colName": "G",
"fillColor": "0",
"refName": "G3",
"row": 2,
"type": 1,
"value": "学历"
}, {
"col": 7,
"colName": "H",
"fillColor": "0",
"refName": "H3",
"row": 2,
"type": 1,
"value": "职称"
}, {
"col": 8,
"colName": "I",
"fillColor": "0",
"refName": "I3",
"row": 2,
"type": 1,
"value": "启用年月"
}, {
"col": 9,
"colName": "J",
"fillColor": "0",
"refName": "J3",
"row": 2,
"type": 1,
"value": "个人缴存基数"
}, {
"col": 10,
"colName": "K",
"fillColor": "0",
"refName": "K3",
"row": 2,
"type": 1,
"value": "户籍情况"
}, {
"col": 11,
"colName": "L",
"fillColor": "0",
"refName": "L3",
"row": 2,
"type": 1,
"value": "手机"
}, {
"col": 12,
"colName": "M",
"fillColor": "0",
"refName": "M3",
"row": 2,
"type": 1,
"value": "婚姻状况"
}, {
"col": 13,
"colName": "N",
"refName": "N3",
"row": 2,
"type": 1,
"value": "配偶姓名"
}, {
"col": 14,
"colName": "O",
"refName": "O3",
"row": 2,
"type": 1,
"value": "配偶证件号码"
}, {
"col": 15,
"colName": "P",
"refName": "P3",
"row": 2,
"type": 1,
"value": "单位职工编号"
}],
"lastCol": 15,
"row": 2
}, {
"cells": [{
"col": 0,
"colName": "A",
"refName": "A4",
"row": 3,
"type": 1,
"value": "A13123123123"
}, {
"col": 1,
"colName": "B",
"refName": "B4",
"row": 3,
"type": 1,
"value": "河南大学"
}, {
"col": 2,
"colName": "C",
"refName": "C4",
"row": 3,
"type": 1,
"value": "沈立鹏"
}, {
"col": 3,
"colName": "D",
"refName": "D4",
"row": 3,
"type": 1,
"value": "身份证"
}, {
"col": 4,
"colName": "E",
"refName": "E4",
"row": 3,
"type": 1,
"value": "413025198203016524"
}, {
"col": 5,
"colName": "F",
"refName": "F4",
"row": 3,
"type": 1,
"value": "A0001"
}, {
"col": 6,
"colName": "G",
"refName": "G4",
"row": 3,
"type": 1,
"value": "硕士"
}, {
"col": 7,
"colName": "H",
"refName": "H4",
"row": 3,
"type": 1,
"value": "中级职称"
}, {
"col": 8,
"colName": "I",
"refName": "I4",
"row": 3,
"type": 1,
"value": "2021-12-10"
}, {
"col": 9,
"colName": "J",
"refName": "J4",
"row": 3,
"type": 1,
"value": "20000"
}, {
"col": 10,
"colName": "K",
"refName": "K4",
"row": 3,
"type": 1,
"value": "其它"
}, {
"col": 11,
"colName": "L",
"refName": "L4",
"row": 3,
"type": 1,
"value": "15210359945"
}, {
"col": 12,
"colName": "M",
"refName": "M4",
"row": 3,
"type": 1,
"value": "否"
}, {
"col": 15,
"colName": "P",
"refName": "P4",
"row": 3,
"type": 1,
"value": "A00031111"
}],
"lastCol": 15,
"row": 3
}],
"sheetName": "Sheet1",
"validations": [{
"dropList": ["名誉博士", "博士", "硕士", "学士", "其他"],
"formular": "\"名誉博士,博士,硕士,学士,其他\"",
"region": {
"firstColumn": 6,
"firstRow": 3,
"lastColumn": 6,
"lastRow": 1048575
}
}, {
"dropList": ["身份证"],
"formular": "\"身份证\"",
"region": {
"firstColumn": 3,
"firstRow": 3,
"lastColumn": 3,
"lastRow": 1048575
}
}, {
"dropList": ["正高职称", "副高职称", "中级职称", "初级职称", "无"],
"formular": "\"正高职称,副高职称,中级职称,初级职称,无\"",
"region": {
"firstColumn": 7,
"firstRow": 3,
"lastColumn": 7,
"lastRow": 1048575
}
}, {
"dropList": ["是", "否"],
"formular": "\"是,否\"",
"region": {
"firstColumn": 12,
"firstRow": 3,
"lastColumn": 12,
"lastRow": 1048575
}
}, {
"dropList": ["非深户城镇", "非深户农村", "其它", "深户"],
"formular": "\"非深户城镇,非深户农村,其它,深户\"",
"region": {
"firstColumn": 10,
"firstRow": 3,
"lastColumn": 10,
"lastRow": 1048575
}
}]
}