前端根据后端数据生成表格行列合并指定表头

原型：

代码片段：

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

前端根据后端数据生成表格行列合并指定表头相关推荐

2020-2-15技术积累-时间插件-前端获取后端数据生成表格
1.一种时间插件的用法 WdatePicker使用方法 https://blog.csdn.net/wuyan1001/article/details/78561363 https://blog.cs ...
java导出word表格行列合并
生成word表格新建模板如下(使用offic,不要用wps) 另存为xm格式将文件放入resource/template目录下,复制一份,将后缀名改为ftl,也可以不复制直接改后缀名(这里忽视我其 ...
VUE+ElementUI生成Excel模板导入数据生成表格(自适应)
VUE+ElementUI生成Excel模板导入数据生成表格(自适应) 最近项目需求,需要根据条件查询对应数据的参数(每条数据的参数名称和个数都不一样) ,生成Excel表格模板,再通过Excel模 ...
Hbuilder X 前端获取后端数据
Hbuilder X 前端获取后端数据 1.创建appUser.js文件 // 如果没有通过拦截器配置域名的话,可以在这里写上完整的URL(加上域名部分) let getAppUserUrl = '/ ...
【学习笔记】Web前端到后端数据的交互
[学习笔记]Web前端到后端数据的交互
python的前端和后端_python前端和后端数据交互，tornado框架入门，初学小试牛刀！...
Python前端和后端是如何交互的,怎么用tornado框架快速搭建前端和后端数据交互? 前端与后端的数据交互,最常用的就是GET.POST,比较常用的用法是:提交表单数据到后端,后端返回json 前 ...
poi根据模板导出word（包含图片、动态生成表格、合并单元格）(亲测有效)
准备工作: 1.需要的jar(jar包在资源处已上传,可下载) 2.创建docx模板(doc不可以) 第一步:准备好jar(这里面的 ooxml-schemas-1.1.jar 大家可以尝试用poi- ...
MVC框架中的前端与后端数据传递及实例
一.MVC框架 MVC代表Model.View.Controller,即模型.视图.控制器.其中: View(视图):就是人机交互界面,可以给用户显示业务逻辑数据,同时也可以接收用户输入的数据. M ...
latex 根据 excel, csv 的数据生成表格
latex 导入数据的宏包为:csvsimple \usepackage{csvsimple} 可以把 csv 格式的数据生成一个数据表格,该安装包的说明文档在网址: http://tug.ctan. ...
java后端与前端的交互_前端和后端数据交互的基本知识和常见方式
一.首先了解前端,后端,数据三者的关系. 1.前端常常是是html,css,js三者的构成的页面的总称.运行在客户端.以浏览器为例. 2.后端常常是后端语言.比如php,java等写的一些脚本.来操作 ...

前端根据后端数据生成表格行列合并指定表头

前端根据后端数据生成表格行列合并指定表头相关推荐

最新文章

热门文章

前端根据后端数据生成表格 行列合并 指定表头

前端根据后端数据生成表格 行列合并 指定表头相关推荐

最新文章

热门文章

前端根据后端数据生成表格行列合并指定表头

前端根据后端数据生成表格行列合并指定表头相关推荐