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

最新推荐文章于 2023-03-06 19:35:42 发布
最新推荐文章于 2023-03-06 19:35:42 发布
阅读量1.3k 收藏 2
点赞数 2
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_Duan_/article/details/123742319
版权

 原型：

 

代码片段：

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

i am rui'
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
element table根据后端数据合并行
得之我幸
08-26 665
效果 数据格式
JS实现动态生成表格并提交表格数据向后端
11-24
本文实例介绍了JS实现动态生成表格并向后端提交表格数据的相关代码，分享给大家供大家参考，具体内容如下 先来看一下需求：在web页面上动态的生成表格，并可以对表格中的数据进行编辑，然后把表格中的数据提交至后端服务器保存。 那么我们首先需要解决的是动态生成表格的问题 1.首先我们需要导入JS库文件。 [removed][removed] 2.然后在页面div中事先创建一个空白表格，可以根据需求而定，我这里是一个带表头的表格 <table border="0" s
vue+element实现动态表格：根据后台返回的属性名和字段动态生成可变表格
热门推荐
weixin_43714266的博客
05-29 4万+
vue+element实现动态：根据后台返回的属性名和字段动态生成可变表格element表格使用插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式 由于项目需求，现在要实现表格的动态生成，也就是，表格的头部属性要可以动态改变，从后台获取数据来控制表格有几列属性，并...
Vue使用ElementUI对table的指定列进行合算
见证自己学习,成长的记录
03-06 8383
最近有一个想法，就是记录自己花销的时候，table中有一项内容是花销的金额。然后想在table的底部有一项内容是该金额的总计。然后我就顺着elementui的table组件寻找相关的demo，还真发现了一个这样的demo。对于这个demo，官方是这么描述的：将show-summary设置为true就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。
element表格指定列,最后一列数据求和
疑问 搜索 动手 解决 记录
05-21 909
官网中的示例是所有数字列都进行计算总和的。所以需要自己处理。 前端能处理的就尽量不走接口 , 尽可能缓解服务器压力 效果图 HTML <el-table :data = "tableData" border show-summary :summary-method="getSummaries" > </el-table> JS // 合计 getSummaries(param){ const { columns, data } =
java 后端生成pdf模板合并单元格表格的案例.docx
01-13
java 后端生成pdf模板合并单元格表格的案例.docx
Vue+Element ui 根据后台返回数据设置动态表头操作
10-14
主要介绍了Vue+Element ui 根据后台返回数据设置动态表头操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
表头行列合并
09-27
我上传的文件实现了表头的动态行列合并，先列合并再行合并，最后输出测试结果。原理是按照字符串压缩的原理算出列中相邻字符的个数，再算行个数，最后再合并。测试输出结果为字符串名称、rowspan和colsapn个数，和...
隐藏layui数据表格表头的checkbox复选框
12-02
一行代码搞定layui数据表格的表头checkbox复选框隐藏问题。
前端实现动态生成表格，是蒸的C
阿牛的博客
03-13 3791
动态生成表格是前端开发中非常重要的内容，常常是后端返回数据（大多是json类型），我们前端通过js循环来动态添加，所以这部分内容是十分重要的，今天我就来写写这部分内容，其实也很简单的，仔细看哦！！！...
前端根据后端返回数据导出指定样式的表格(xlsx-js-style)
like_a_diamond的博客
12-28 1224
根据后台返回的数据生成指定样式的excel，使用xlsx-style一直报错，有关xlsx-js-style的文章也比较少，设置样式的时候踩过不少坑，因此整合了一下使用xlsx-js-style修改表格样式的方法，包括修改表头、列表、行高、列宽、字体、边框等等，应该是比较全面的
js基于后台数据实现table行列合并
小柒心得
05-25 555
基于复杂的后台数据，js实现接口显示有行列合并table。
前端系列笔记之HTML：004、表格标签（table tags）
hanbing1307的博客
05-28 437
内容：表格基本标签、基本属性、表格标题、表头单元格标签、结构标签、合并单元格 一、表格的基本标签 1、应用场景:在网页中以行+列的单元格的方式整齐展示和数据，如：学生成绩表 2、基本标签: 标签名 说明 table 表格整体，可用于包裹多个tr tr 表格每行，可用于包裹td td 表格单元格，可用于包裹内容 3、注意...
element table表格根据某一字段合并列
weixin_46189958的博客
11-03 769
element table表格根据某一字段合并列
前端——》ant-design-vue组件的使用之三（a-table表格的行列合并）
叙传
07-01 3009
效果 代码 表头列合并 columns = { title: node.date, dataIndex: node.date, key: node.date, width: 260, children: [ { title: '上午', dataIndex: node.d
前端表格列合并
看博客不点赞打shi你
09-10 2008
表格列合并。相邻行，同一列相同的数据进行合并 原始表格展示： 列合并之后： （1）主要思路是：给每一行数据的每一列（即每个单元格） 设置其rowspan和display属性； （2）当有同列数据合并时，保留第一个单元格，设置其rowspan 属性为相同的个数，“舍弃”其他相同的单元格，设置其display属性为true； （3）通过 mergeData 函数给每一列自定义两个属性来分别记录rowspan 属性和display； 主要的javaScript函数： /** * 表格合并处理 .
根据读取后台配置（前端动态化展示table.）
chianr
11-08 5528
点击某行记录。执行函数 row数据结构 result数据结构 function detailTask(){         var row = $('#dg').datagrid('getSelected');         if (row){             $.post('/taskManager/sureDetail.html',{tas
html动态从数据库取表头,web前端：elementUI中el-table表格自定义表头
weixin_42393127的博客
06-09 652
Table是一个数据库控件，主要用于在web页面上创建表格，其功能与HtmlTable类似。不同的是，Table控件可以用动态的内容以编程的方式来生成表格。需求：最近项目开发中使用elementUI的表格组件，表格头部设置label的时候只能是字符串，想在表格头部添加自定义的html标签。解决方法：使用render-header在column上绑定render-header属性在methods添加...
element ui表头根据后端返回数据动态渲染多级表头
最新发布
05-17
可以通过动态生成表头的方式来实现根据后端返回数据动态渲染多级表头，具体的实现步骤如下： 1. 获取后端返回的表头数据，可以通过 API 接口获取。 2. 遍历表头数据，生成对应的列对象。可以使用 Element UI 表格组件中的 column 属性来实现。 3. 如果当前列对象有子列，那么递归生成子列对象。 4. 将生成的列对象数组作为表格组件的 columns 属性进行渲染。 以下是一个示例代码： ```vue <template> <el-table :data="tableData" :columns="tableColumns" border ></el-table> </template> <script> export default { data() { return { tableData: [], tableColumns: [], }; }, methods: { // 获取后端返回的表头数据 async fetchTableHeader() { const res = await fetch('/api/table/header'); const headerData = await res.json(); this.tableColumns = this.generateColumns(headerData); }, // 递归生成列对象 generateColumns(headerData) { return headerData.map((item) => { const column = { label: item.label, prop: item.prop, }; if (item.children && item.children.length) { column.children = this.generateColumns(item.children); } return column; }); }, // 获取后端返回的表格数据 async fetchTableData() { const res = await fetch('/api/table/data'); this.tableData = await res.json(); }, }, mounted() { this.fetchTableHeader(); this.fetchTableData(); }, }; </script> ``` 在这个示例代码中，通过 fetchTableHeader 方法获取后端返回的表头数据，并使用 generateColumns 方法生成对应的列对象，如果当前列对象有子列，那么会递归生成子列对象。最后将生成的列对象数组作为表格组件的 columns 属性进行渲染。 需要注意的是，由于表格数据是异步获取的，因此需要在获取表头数据和表格数据之后再进行渲染。在这个示例代码中，通过 mounted 钩子函数来依次调用 fetchTableHeader 和 fetchTableData 方法获取数据，并在获取数据完成后渲染表格组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值