?原型：

?

代碼片段：

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}}]}

總結

以上是生活随笔為你收集整理的前端根据后端数据生成表格 行列合并 指定表头的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。