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

已于 2022-03-28 08:59:56 修改
阅读量1.5k 收藏 2
点赞数 2
分类专栏： js react 文章标签： 微信小程序 javascript 前端
于 2022-03-25 15:44:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44147791/article/details/123737576
版权
js 同时被 2 个专栏收录
17 篇文章 1 订阅
订阅专栏
react
3 篇文章 0 订阅
订阅专栏

封装组件

示例图
在这里插入图片描述

import { nanoid } from "nanoid";
import { cloneElement } from "react";
/*
data 接口返回的数据
headIndex 指定表头的索引
salaryIndex 指定薪资的表头索引
userIndex 指定第一行数据
*/
const SelfTable = ({ data, headIndex, salaryIndex, userIndex }) => {
  const tdLen = data?.lastColNo + 1,
    rows = data?.rows,
    trLen = rows?.length;

  let trData = [];
  for (let i = 0; i < trLen; i++) {
    let tdData = [];
    for (let j = 0; j < tdLen; j++) {
      tdData.push(
        <td width={120} align="center" valign="middle" key={nanoid()}></td>
      );
    }
    trData.push(tdData);
  }
  rows.forEach((itemR, indexR) => {
    const cells = itemR?.cells ?? [],
      cellsLen = cells?.length ?? 0;
    cells.forEach((itemC, indexC) => {
      // 不合并
      if (itemC?.type === 1) {
        trData[indexR][itemC?.col] = (
          <td width={120} align="center" valign="middle" key={nanoid()}>
            {itemC?.value}
          </td>
        );
      } else {
        // 合并
        // 先处理列合并
        if (itemC?.col === itemC?.endCol) {
          trData[indexR][itemC?.col] = (
            <td width={120} align="center" valign="middle" key={nanoid()}>
              {itemC?.value}
            </td>
          );
        } else {
          trData[indexR][itemC?.col] = (
            <td
              width={120}
              align="center"
              valign="middle"
              key={nanoid()}
              colSpan={itemC?.endCol - itemC?.col + 1}
            >
              {itemC?.value}
            </td>
          );
          for (let i = itemC?.col + 1; i <= itemC?.endCol; i++) {
            trData[indexR][i] = "delect";
          }
        }
        // 处理行合并
        if (itemC?.row !== itemC?.endRow && itemC?.endRow) {
          const colItemTd = trData[indexR][itemC?.col];

          trData[indexR][itemC?.col] = cloneElement(colItemTd, {
            rowSpan: itemC?.endRow - itemC?.row + 1,
          });
          if (itemC?.col === itemC?.endCol) {
            for (let i = itemC?.row + 1; i <= itemC?.endRow; i++) {
              trData[i][itemC?.col] = "delect";
            }
          } else {
            for (let i = itemC?.row + 1; i <= itemC?.endRow; i++) {
              for (let j = itemC?.col; j <= itemC?.endCol; j++) {
                trData[i][j] = "delect";
              }
            }
          }
        }
      }
      
      if (indexC === cellsLen - 1) {
        trData[indexR] = trData[indexR]?.filter((item) => item !== "delect");
      }
    });
  });
  trData = trData.reduce((preData, item, index) => {
    item = [
      <td width={120} align="center" valign="middle" key={nanoid()}>
        {index + 1}
      </td>,
      ...item,
    ];
    switch (index) {
      case headIndex:
        item = [
          <td width={120} align="center" valign="middle" key={nanoid()}>
            指定表头了
          </td>,
          ...item,
        ];
        break;
      case salaryIndex:
        item = [
          <td width={120} align="center" valign="middle" key={nanoid()}>
            指定薪资表头了
          </td>,
          ...item,
        ];
        break;
      case userIndex:
        item = [
          <td width={120} align="center" valign="middle" key={nanoid()}>
            设置第一行员工数据
          </td>,
          ...item,
        ];
        break;
      default:
        item = [
          <td width={120} align="center" valign="middle" key={nanoid()}></td>,
          ...item,
        ];
        break;
    }
    return [...preData, <tr key={nanoid()}>{item}</tr>];
  }, []);
  return (
    <table border="1" width="1200" height="600" cellSpacing="0">
      {trData}
    </table>
  );
};
export default SelfTable;

示例数据

export const data = {
  index: 0,
  lastColNo: 8,
  lastRowNo: 15,
  regions: [],
  rows: [
    {
      cells: [
        {
          col: 0,
          colName: "A",
          fillColor: "0",
          refName: "A1",
          row: 0,
          type: 1,
          value: "导入时先预读取第一sheet页前十行内容",
        },
      ],
      lastCol: 0,
      row: 0,
    },
    {
      cells: [
        {
          col: 1,
          colName: "B",
          fillColor: "0",
          refName: "B2",
          row: 1,
          type: 1,
          value: "如果实际内容不到十行，以实际行数为准",
        },
      ],
      lastCol: 1,
      row: 1,
    },
    {
      cells: [
        {
          col: 2,
          colName: "C",
          fillColor: "0",
          refName: "C3",
          row: 2,
          type: 1,
          value:
            "后续优化为，存在多个sheet页时，页面显示当前sheet页名称，并允许切换",
        },
      ],
      lastCol: 2,
      row: 2,
    },
    {
      cells: [
        {
          col: 0,
          colName: "A",
          endCol: 0,
          endRow: 5,
          refName: "A4",
          row: 3,
          type: 2,
          value: "姓名",
        },
        {
          col: 1,
          colName: "B",
          endCol: 1,
          endRow: 5,
          refName: "B4",
          row: 3,
          type: 2,
          value: "手机号",
        },
        {
          col: 2,
          colName: "C",
          endCol: 6,
          endRow: 3,
          refName: "C4",
          row: 3,
          type: 2,
          value: "普通",
        },
        {
          col: 7,
          colName: "H",
          endCol: 7,
          endRow: 5,
          refName: "H4",
          row: 3,
          type: 2,
          value: "银行卡",
        },
        {
          col: 8,
          colName: "I",
          endCol: 8,
          endRow: 5,
          refName: "I4",
          row: 3,
          type: 2,
          value: "开户行",
        },
      ],
      lastCol: 8,
      row: 3,
    },
    {
      cells: [
        {
          col: 2, // 第2列开始 （相当于第三列） 因为是从0开始的
          colName: "C",
          endCol: 4, // 第4列结束 （相当于第五列）  因为是从0开始的
          endRow: 4, // 第4行结束 （相当于第五行） 因为是从0开始的
          refName: "C5",
          row: 4, // 第4行开始 （相当于第五行） 因为是从0开始的
          type: 2, //等于2就是合并，等于1的就是普通单元格不需要合并的
          value: "税前",
        },
        {
          col: 5,
          colName: "F",
          endCol: 5,
          endRow: 5,
          refName: "F5",
          row: 4,
          type: 2,
          value: "个税",
        },
        {
          col: 6,
          colName: "G",
          fillColor: "0",
          refName: "G5",
          row: 4,
          type: 1,
          value: "税后",
        },
      ],
      lastCol: 6,
      row: 4,
    },
    {
      cells: [
        {
          col: 2,
          colName: "C",
          fillColor: "0",
          refName: "C6",
          row: 5,
          type: 1,
          value: "工资",
        },
        {
          col: 3,
          colName: "D",
          fillColor: "0",
          refName: "D6",
          row: 5,
          type: 1,
          value: "奖金",
        },
        {
          col: 4,
          colName: "E",
          fillColor: "0",
          refName: "E6",
          row: 5,
          type: 1,
          value: "应发",
        },
        {
          col: 6,
          colName: "G",
          fillColor: "0",
          refName: "G6",
          row: 5,
          type: 1,
          value: "实发",
        },
      ],
      lastCol: 6,
      row: 5,
    },
    {
      cells: [
        {
          col: 0,
          colName: "A",
          fillColor: "0",
          refName: "A7",
          row: 6,
          type: 1,
          value:
            "这里有可能不是数据，下面内容只是为了便于理解，实际导模板不需要数据",
        },
      ],
      lastCol: 0,
      row: 6,
    },
    {
      cells: [
        {
          col: 0,
          colName: "A",
          fillColor: "0",
          refName: "A8",
          row: 7, //0开始 第7行（8行）的第0列
          type: 1,
          value: "张三",
        },
        {
          col: 1,
          colName: "B",
          fillColor: "0",
          refName: "B8",
          row: 7, //0开始 第7行（8行）的第1列
          type: 1,
          value: 1.3387654321e10,
        },
        {
          col: 2,
          colName: "C",
          fillColor: "0",
          refName: "C8",
          row: 7, //0开始 第7行（8行）的第2列
          type: 1,
          value: 6000.0,
        },
        {
          col: 3,
          colName: "D",
          fillColor: "0",
          refName: "D8",
          row: 7,
          type: 1,
          value: 200.0,
        },
        {
          col: 4,
          colName: "E",
          fillColor: "0",
          formular: "C8+D8",
          refName: "E8",
          row: 7,
          type: 1,
          value: 6200.0,
        },
        {
          col: 5,
          colName: "F",
          fillColor: "0",
          formular: "MAX((E8-5000)*0.3,0)",
          refName: "F8",
          row: 7,
          type: 1,
          value: 360.0,
        },
        {
          col: 6,
          colName: "G",
          fillColor: "0",
          formular: "E8-F8",
          refName: "G8",
          row: 7,
          type: 1,
          value: 5840.0,
        },
        {
          col: 7,
          colName: "H",
          fillColor: "0",
          refName: "H8",
          row: 7,
          type: 1,
          value: "621000123456456461",
        },
        {
          col: 8,
          colName: "I",
          fillColor: "0",
          refName: "I8",
          row: 7,
          type: 1,
          value: "北京银行",
        },
      ],
      lastCol: 8,
      row: 7,
    },
    {
      cells: [
        {
          col: 4,
          colName: "E",
          fillColor: "0",
          formular: "C9+D9",
          refName: "E9",
          row: 8,
          type: 1,
          value: 0.0,
        },
        {
          col: 5,
          colName: "F",
          fillColor: "0",
          formular: "MAX((E9-5000)*0.3,0)",
          refName: "F9",
          row: 8,
          type: 1,
          value: 0.0,
        },
        {
          col: 6,
          colName: "G",
          fillColor: "0",
          formular: "E9-F9",
          refName: "G9",
          row: 8,
          type: 1,
          value: 0.0,
        },
      ],
      lastCol: 6,
      row: 8,
    },
    {
      cells: [
        {
          col: 4,
          colName: "E",
          fillColor: "0",
          formular: "C10+D10",
          refName: "E10",
          row: 9,
          type: 1,
          value: 0.0,
        },
        {
          col: 5,
          colName: "F",
          fillColor: "0",
          formular: "MAX((E10-5000)*0.3,0)",
          refName: "F10",
          row: 9,
          type: 1,
          value: 0.0,
        },
        {
          col: 6,
          colName: "G",
          fillColor: "0",
          formular: "E10-F10",
          refName: "G10",
          row: 9,
          type: 1,
          value: 0.0,
        },
      ],
      lastCol: 6,
      row: 9,
    },
    {
      cells: [
        {
          col: 4,
          colName: "E",
          fillColor: "0",
          formular: "C11+D11",
          refName: "E11",
          row: 10,
          type: 1,
          value: 0.0,
        },
        {
          col: 5,
          colName: "F",
          fillColor: "0",
          formular: "MAX((E11-5000)*0.3,0)",
          refName: "F11",
          row: 10,
          type: 1,
          value: 0.0,
        },
        {
          col: 6,
          colName: "G",
          fillColor: "0",
          formular: "E11-F11",
          refName: "G11",
          row: 10,
          type: 1,
          value: 0.0,
        },
      ],
      lastCol: 6,
      row: 10,
    },
    {
      cells: [
        {
          col: 4,
          colName: "E",
          fillColor: "0",
          formular: "C12+D12",
          refName: "E12",
          row: 11,
          type: 1,
          value: 0.0,
        },
        {
          col: 5,
          colName: "F",
          fillColor: "0",
          formular: "MAX((E12-5000)*0.3,0)",
          refName: "F12",
          row: 11,
          type: 1,
          value: 0.0,
        },
        {
          col: 6,
          colName: "G",
          fillColor: "0",
          formular: "E12-F12",
          refName: "G12",
          row: 11,
          type: 1,
          value: 0.0,
        },
      ],
      lastCol: 6,
      row: 11,
    },
    {
      cells: [
        {
          col: 4,
          colName: "E",
          fillColor: "0",
          formular: "C13+D13",
          refName: "E13",
          row: 12,
          type: 1,
          value: 0.0,
        },
        {
          col: 5,
          colName: "F",
          fillColor: "0",
          formular: "MAX((E13-5000)*0.3,0)",
          refName: "F13",
          row: 12,
          type: 1,
          value: 0.0,
        },
        {
          col: 6,
          colName: "G",
          fillColor: "0",
          formular: "E13-F13",
          refName: "G13",
          row: 12,
          type: 1,
          value: 0.0,
        },
      ],
      lastCol: 6,
      row: 12,
    },
    {
      cells: [
        {
          col: 2,
          colName: "C",
          refName: "C15",
          row: 14,
          type: 1,
          value: "用户数量列数-分组涉及列数=缺少的列数",
        },
      ],
      lastCol: 2,
      row: 14,
    },
    {
      cells: [
        {
          col: 1,
          colName: "B",
          refName: "B16",
          row: 15,
          type: 1,
          value: "过滤",
        },
        {
          col: 2,
          colName: "C",
          refName: "C16",
          row: 15,
          type: 1,
          value: "用户数量列数，分组涉及列数，缺少的列数并按补起分组",
        },
      ],
      lastCol: 2,
      row: 15,
    },
  ],
  sheetName: "Sheet1",
  validations: [],
};
~~big_dragon~~
关注
专栏目录
layui 复杂表头多层表头的表格数据非后台导出excel
诗语待马
08-28 1万+
用过layui table的都了解，layui的表格自带导出功能，只要在属性toolbar里配置即可。 如果嫌toolbar里的导出按钮不够美观，layui也友好的提供了自行定义按钮后调用导出页面数据的方法，详见：[官方文档] `遗憾的`是该方法暂时并不支持对多层表头的导出。 而多层复杂表头在很多系统中都有体现，而若不想通过后台代码去做导出，只在前端页面上该如何做呢？
xlsx模块 前端_前端使用SheetJS的xlsx.js实现excel表格生成
weixin_29146313的博客
12-24 2471
在作以前一个项目的时候，须要有生成excel表格的功能，在网上查询一番后，发现不少人都推荐Sheetjs的xlsx.js这款工具，本身使用了一下，感受也不错，上手简单，功能结构清晰。所以，在这里就我本身使用到的功能部分和使用时候出现问题简单总结一下。前端1.为何由前端生成excel过去的时候，excel表格的生成一般是由后端完成的，主要缘由是以前我的PC的性能较低，完成数据量过大的excel表格生...
el-table后端接口返回数字，前端转换成文字渲染表格
weixin_56733569的博客
03-21 1640
el-table后端返回数字，前端转换成文字渲染到表格中
前端根据后端返回数据导出指定样式的表格(xlsx-js-style)
like_a_diamond的博客
12-28 1472
根据后台返回的数据生成指定样式的excel，使用xlsx-style一直报错，有关xlsx-js-style的文章也比较少，设置样式的时候踩过不少坑，因此整合了一下使用xlsx-js-style修改表格样式的方法，包括修改表头、列表、行高、列宽、字体、边框等等，应该是比较全面的
前端生成及导出表格
打工人
10-18 575
excel表格的导入导出 SheetJS
elementUi中的el-table表格的内容根据后端返回的数据用不同的颜色展示
zheshihuahua的博客
08-30 1440
首先：需要在表格行加入 标签。
分sheet,自定义表头导出表格
我的目标是CEO，最近小目标是项目架构师！
01-20 930
再一次做项目时,需要导出自定义的表格,然后就有了这次实践,然后分享给大家仅供参考! 先看数据结构 0 = {ExamExamRoomListModel@10157} &quot;ExamExamRoomListModel(super=com.tfjybj.itoo.exam.model.ExamExamRoomListModel@772bec3f, examId=1081922739738075137......
将HtmlTable 导出为Execl文件，支持合并单元格、合并行，无需Office支持
11-24
通常，这样的示例会包括前端部分（用于处理用户交互和表格数据的获取），以及后端部分（负责实际的导出操作）。 总之，将HTML表格导出为Excel并支持合并单元格和合并行是一项实用的技术，它扩展了网页应用的功能，...
java利用POI生成excel表格
菜言堂的博客
08-24 2535
java利用POI生成excel表格 起因:自己搜的网上教程有点杂,因此自己整理了一套快速生成excel表格的套路,忘了自己看自己的博客,当然也欢迎同行一起讨论学习,好了废话不多说上才艺!!! 1.导入poi3.6jar(如果不使用pom可以官网下载jar包,3.6外的其他版本不清楚,所以不乱写) 2.新建工具类 /** * 导出Excel * @param sheetName sheet名称 * @param title 标题 * @param values 内容 * @param wb HSS
vue根据后端返回的数据，在前端表格判断进行展示。
weixin_46838336的博客
09-24 1784
根据后端返回的数据，在前端表格判断进行展示。
bootstrap-table 插件表格展示后台查询到的数据
m0_43584016的博客
03-15 2046
最近工作太忙，没时间更新，趁着周末对工作的问题做一个总结 bootstrap-table展示数据 在前端页面中必须引入bootstrap相关的js和css 代码如下： 一、引入相关js和样式 //css <link rel="stylesheet" href="/static/top/common/bootstrap/bootstrap.min.css"> <lin...
element之el-table动态表格随机列（根据后端返回的数据确定要展示的列）+ 前端分页（后端返回所有数据前端自行分页）
最新发布
qq_73231057的博客
10-31 514
1.数据结构依赖后端，也可以自己组装，就是有一丢丢小麻烦，话不多说看代码....
当前端接收后端返回的数据要生成表格，但数据是一推乱码？
阿吉太懒的博客
08-30 192
这样，整个下载过程就完成了，并且下载的文件会以指定的文件名保存在用户的设备上。后端小哥给了接口，我这边也调了接口，然后发现。生成的数据是一堆乱码！responseType我之前写的是respnseType!最近收到一个需求，要将页面列表里的数据生成表格并下载到本地，就是下面情况。困扰了一天半，最后才发现是我少写了一个字母！是包含 Excel 文件内容的二进制数据。是你给定的文件名，可以根据实际需求进行修改。对象，表示这是一个 Excel 文件。释放掉之前创建的 URL 对象。实现模拟点击下载文件。
后端传值与前端接收并进行初始化在列表展示的流程
qq_45767896的博客
10-27 1100
后端传值与前端接收并进行初始化在列表展示的流程
后台请求到的数据如何在前端动态生成table的列名和相对应的值并合计
TheFlyPenguin的博客
12-14 791
如何在前台对接收到的数据进行动态生成表格的操作
原生table组件 自己封装：多个表头+表头合并
weixin_55333190的博客
12-21 1678
01.组件代码 直接复制使用就行，会根据父盒子自适应100% 01.根据父级100%大小 父级多大就是多大，高度:超出会有滚动条 宽度：自适应 均匀分 02. 表头值需要按顺序来，一行表头就传给hearder0 以此内推 表头0：hearderPri0:['Header 1', 'Header 2', 'Header 3'] 表头1：hearderPri1 表头2：hearderPri2 03.表格数据一个内数组代表一行，顺序跟表头一一对应 表格
前端实现动态生成表格，是蒸的C
阿牛的博客
03-13 3877
动态生成表格是前端开发中非常重要的内容，常常是后端返回数据（大多是json类型），我们前端通过js循环来动态添加，所以这部分内容是十分重要的，今天我就来写写这部分内容，其实也很简单的，仔细看哦！！！...
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、付费专栏及课程。

余额充值