react-antd表格合并及动态数表头处理

已于 2023-04-19 22:59:22 修改
阅读量1k 收藏 3
点赞数
分类专栏： JavaScript 笔记 文章标签： react.js javascript 前端 前端框架
于 2023-04-18 23:18:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DT_XUE321/article/details/130233037
版权

后端数据

说明：monthList: 为动态月份表头标题，data中的valueList 为动态月份对应的动态数据

 const res = {
      monthList: [
        '2023-04',
        '2023-04',
        '2023-05',
        '2023-06',
        '2023-07',
        '2023-08',
        '2023-09',
        '2023-10',
        '2023-11',
        '2023-12',
        '2024-01',
        '2024-02',
        '2024-03',
      ],
      data: [
        {
          partDept: '部门一',
          type: '类型一',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
            { period: '2023-08', value: 100 },
            { period: '2023-09', value: 100 },
            { period: '2023-10', value: 100 },
            { period: '2023-11', value: 100 },
            { period: '2023-12', value: 100 },
            { period: '2024-01', value: 100 },
            { period: '2024-02', value: 100 },
            { period: '2024-03', value: 100 },
          ],
        },
        {
          partDept: '部门一',
          type: '类型二',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
            { period: '2023-08', value: 100 },
            { period: '2023-09', value: 100 },
            { period: '2023-10', value: 100 },
            { period: '2023-11', value: 100 },
            { period: '2023-12', value: 100 },
            { period: '2024-01', value: 100 },
            { period: '2024-02', value: 100 },
            { period: '2024-03', value: 100 },
          ],
        },
        {
          partDept: '部门一',
          type: '类型三',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
            { period: '2023-08', value: 100 },
            { period: '2023-09', value: 100 },
            { period: '2023-10', value: 100 },
            { period: '2023-11', value: 100 },
            { period: '2023-12', value: 100 },
            { period: '2024-01', value: 100 },
            { period: '2024-02', value: 100 },
            { period: '2024-03', value: 100 },
          ],
        },
        {
          partDept: '部门二',
          type: '类型一',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
            { period: '2023-08', value: 100 },
            { period: '2023-09', value: 100 },
            { period: '2023-10', value: 100 },
            { period: '2023-11', value: 100 },
            { period: '2023-12', value: 100 },
            { period: '2024-01', value: 100 },
            { period: '2024-02', value: 100 },
            { period: '2024-03', value: 100 },
          ],
        },
        {
          partDept: '部门二',
          type: '类型二',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
            { period: '2023-08', value: 100 },
            { period: '2023-09', value: 100 },
            { period: '2023-10', value: 100 },
            { period: '2023-11', value: 100 },
            { period: '2023-12', value: 100 },
            { period: '2024-01', value: 100 },
            { period: '2024-02', value: 100 },
            { period: '2024-03', value: 100 },
          ],
        },
        {
          partDept: '部门二',
          type: '类型三',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
            { period: '2023-08', value: 100 },
            { period: '2023-09', value: 100 },
            { period: '2023-10', value: 100 },
            { period: '2023-11', value: 100 },
            { period: '2023-12', value: 100 },
            { period: '2024-01', value: 100 },
            { period: '2024-02', value: 100 },
            { period: '2024-03', value: 100 },
          ],
        },
        {
          partDept: '部门三',
          type: '类型一',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
            { period: '2023-08', value: 100 },
            { period: '2023-09', value: 100 },
            { period: '2023-10', value: 100 },
            { period: '2023-11', value: 100 },
            { period: '2023-12', value: 100 },
            { period: '2024-01', value: 100 },
            { period: '2024-02', value: 100 },
            { period: '2024-03', value: 100 },
          ],
        },
        {
          partDept: '部门三',
          type: '类型二',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
            { period: '2023-08', value: 100 },
            { period: '2023-09', value: 100 },
            { period: '2023-10', value: 100 },
            { period: '2023-11', value: 100 },
            { period: '2023-12', value: 100 },
            { period: '2024-01', value: 100 },
            { period: '2024-02', value: 100 },
            { period: '2024-03', value: 100 },
          ],
        },
        {
          partDept: '部门三',
          type: '类型三',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
            { period: '2023-08', value: 100 },
            { period: '2023-09', value: 100 },
            { period: '2023-10', value: 100 },
            { period: '2023-11', value: 100 },
            { period: '2023-12', value: 100 },
            { period: '2024-01', value: 100 },
            { period: '2024-02', value: 100 },
            { period: '2024-03', value: 100 },
          ],
        },
      ],
    };

react代码

import React, { useState, useEffect } from 'react';
import { Col, Row, Table } from 'antd';
import _ from 'lodash';

const Home = () => {
  const [dataList, setDataList] = useState([]);
  const [periodColumns, setPeriodColumns] = useState([]);

  useEffect(() => {
    const res = {
      monthList: ['2023-04', '2023-05', '2023-06', '2023-07'],
      data: [
        {
          partDept: '部门一',
          type: '类型一',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
          ],
        },
        {
          partDept: '部门一',
          type: '类型二',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
          ],
        },
        {
          partDept: '部门一',
          type: '类型三',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
          ],
        },
        {
          partDept: '部门二',
          type: '类型一',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
          ],
        },
        {
          partDept: '部门二',
          type: '类型二',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
          ],
        },
        {
          partDept: '部门二',
          type: '类型三',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
          ],
        },
        {
          partDept: '部门三',
          type: '类型一',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
          ],
        },
        {
          partDept: '部门三',
          type: '类型二',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
          ],
        },
        {
          partDept: '部门三',
          type: '类型三',
          total: 100,
          valueList: [
            { period: '2023-04', value: 100 },
            { period: '2023-05', value: 100 },
            { period: '2023-06', value: 100 },
            { period: '2023-07', value: 100 },
          ],
        },
      ],
    };

    // 将数据中的动态的valueList打平
    const dataCopy = _.cloneDeep(res.data);
    const newDataList = dataCopy.map((item) => {
      const { valueList } = item;
      const newValueList = valueList.map((it) => {
        return { [it.period]: it.value };
      });
      const list = newValueList.reduce((acc, value) => {
        return { ...acc, ...value };
      });
      return {
        ...item,
        ...list,
      };
    });
    setPeriodColumns(res.monthList);
    setDataList(newDataList);
  }, []);

  // 表头
  const getColumns = () => {
    const columns = [
      {
        title: '部门名称',
        dataIndex: 'partDept',
        width: 150,
        fixed: 'left',
        align: 'center',
        render: (val, record) => ({
          children: <div style={{ fontWeight: 'bold' }}>{val}</div>,
          props: {
            rowSpan: record.rowSpan,
            colSpan: record.colSpan,
          },
        }),
      },
      {
        title: '类型',
        dataIndex: 'type',
        fixed: 'left',
        align: 'center',
        width: 120,
        render: (v) => v,
      },
      {
        title: '汇总',
        dataIndex: 'total',
        align: 'right',
        width: 120,
        render: (v) => v,
      },
    ];
    // 拼接动态表头
    const newPeriodColumns = periodColumns.map((item) => {
      return {
        title: item,
        dataIndex: item,
        align: 'right',
        width: 120,
        render: (v) => v,
      };
    });
    return [...columns, ...newPeriodColumns];
  };

  // 合并单元格处理
  const mergeRows = (rows, key) => {
    rows[0].rowSpan = 1;
    let idx = 0;
    return rows.slice(1).reduce(
      (mergedRows, item, index) => {
        if (item[key] === mergedRows[idx][key]) {
          mergedRows[idx].rowSpan++;
          item.colSpan = 0;
        } else {
          item.rowSpan = 1;
          idx = index + 1;
        }
        return [...mergedRows, item];
      },
      [rows[0]],
    );
  };

  return (
    <div>
      <Row>
        <Col span={24}>
          <Table bordered dataSource={dataList.length > 0 && mergeRows(dataList, 'partDept')}>
            {getColumns().map((item) => {
              return (
                <Table.Column
                  title={item.title}
                  dataIndex={item.dataIndex}
                  fixed={item.fixed}
                  render={item.render}
                  width={item.width}
                  onCell={item.onCell}
                  align={item.align}
                />
              );
            })}
          </Table>
        </Col>
      </Row>
    </div>
  );
};

export default Home;

最终效果

说明： 部门、类型、汇总为固定表头，月份为动态数据，由后端提供
在这里插入图片描述

长表格首次进来可以确定滚动条位置

接上面代码

    // 首次进来时可以确定滚动条的位置 index+1 是因为 汇总， 前提是每列单元格宽度是固定的 本例width为120
    const index = res.monthList.length > 0 && res.monthList.map((item) => item).indexOf('2023-07');
    const element = document.getElementsByClassName('scrollTable')[0];
    const scrollElement = element.getElementsByClassName('ant-table-content')[0];
    scrollElement.scrollLeft = index > 0 ? (index + 1) * 120 : 0;

页面效果

在这里插入图片描述

这是一台机器
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-sticky-table:响应式表和动态大小固定的表头和列
04-28
React粘性表 响应式表和动态大小固定的表头，页脚和列。 搜索示例链接-请使用react-sticky-table在对您的应用程序进行评论 特征 0个依赖项，不需要CSS导入，不需要js，高性能。 0、1或任意多个粘性页眉，左列，右列，页脚。 自适应表格尺寸（将其包装在任何大小的容器中，它将填充该容器） 动态行高和列宽（无需指定固定的宽度/高度（以像素为单位）） 表格行/列的大小随着内容的大小而改变 自定义单元格（只需确保您的自定义单元格具有display: table-cell和css选择器.sticky-table-cell ） 每页多个表格 滚动条始终平滑且可见 本机滚动 顶级待办事项 使用VirtualDom实施 支持IE <= 11 入门 npm install react-sticky-table --save 例子 import React , { Compon
antd 表格设置动态列（动态表头）
热门推荐
agua001的博客
01-19 1万+
1、需求：勾选中某个项，表格就展示对应的数据，反之则不显示 2、表格的 columns 动态赋值（刚开始默认全部不展示） html: <div class="checkBox"> <a-checkbox @change="changeData" :checked="dataRate"> 数据传输完整率 </a-checkbox> <a-checkbox @change="changeTimely" :checked="timelyRate"
Ant-Design-Vue动态表头并填充数据
最新发布
Weirdo的博客
06-04 647
在 Ant Design Vue 的a-table组件中，除了基本的动态表头和数据填充之外，还有很多高级功能可以提升用户体验和交互性。接下来，我们将探讨如何在动态表头中应用自定义渲染和排序功能。有时，我们可能需要对表格中的某些列进行自定义渲染，比如添加链接、按钮、图标等。这可以通过在columns数组中的对应列对象中添加属性来实现。// ... 其他代码 ...// ... 其他代码 ...methods: {
ant-design-vue table表格多级表头动态渲染
Mr白的博客
08-04 2057
a-table多级嵌套且动态展示
基于a-table的横向表头合并和纵向表头合并
YONJIUJIU的博客
10-09 1223
使用antd的a-table组件，分别对data和column进行操作，使用api文档里的合并属性。（2）纵向标题合并：在column中设置对应列下rowSpan的值。（一）需求：需要实现纵向和横向的标题合并。（1）横向表头合并/包含：使用。
vue+antd——table组件实现动态列+表头下拉选择功能——技能提升
yehaocheng520的博客
09-06 4700
vue+antd——table组件实现动态列+表头下拉选择功能——技能提升
react-antd-admin-template：一个基于React + Antd的后台管理模版，在线预览https：nlrx-wjc.github.ioreact-antd-admin-template
02-05
它内置了用户登录/登出，动态路由，权限重置，用户管理等典型的业务模型，可以帮助您快速构建企业级中后台产品原型，是你接私活的不二之选。 本系统的开发灵感来自 ，这是一个基于Vue和ElementUI的优秀的后台管理...
react-antd-admin:react + ts + antd实现的管理系统模版
03-11
react-antd-admin 基于react + ts + antd建立的管理后台脚手架模版 线上地址 git地址 单独使用 详情请查看 1.配置抽屉 1-1。可缓存系统配置 记录用户使用的系统配置，缓存浏览器中，记录用户习惯。 1-2.antd换肤...
react-antd-admin
03-22
React Antd管理员 简介 是一个中后台前端解决方案，它基于和实现。 在线预览： : Gitee在线预览： ://libin_w.gitee.io/react-antd-admin（国内用户可访问该地址）
react-antd-super-form:演示
05-31
react-antd-super-formInstallnpm install --save react-antd-super-form1.x 的版本 适用于 antd 3.x2.x 的版本 适用于 antd 4.xUsageimport React, { Component } from 'react';import SuperForm, { Table, List, ...
react-antd-ts-admin:react + antd + typescript的后台管理系统
03-11
项目简介基于React+AntD+TypeScript的后台管理系统技术依赖React-（UI框架） 蚂蚁设计-（组件库） TypeScript-（静态类型） Webpack 轴距较少的功能登录/退出全屏浏览一键换肤个人中心侧边菜单标签快捷导航图标表单...
react ant table 根据接口动态渲染表头
weixin_39818813的博客
07-13 1307
使request获取list，renderFormItem回调里面第二个参数中就有request的返回值，根据这个去渲染就可以了。
vue3+antd封装动态表格 与 表格内弹窗动态字段
Dzb1993的博客
08-09 1289
需求 ：该页面有十个选项卡 ， 每个选项卡中的表格字段都是不同的，表格拥有操作 查看 编辑 弹窗 所展示的字段也是不同的例如： 1选项卡表格字段 2 选项卡表格字段表格操作列拥有 查看 编辑 功能 查看 编辑弹窗 也会根据选项卡的不同来动态展示 showTableValueTitle的值如下 ： 在父组件中定义，传递给子组件 查看 编辑 弹窗 查看 编辑弹窗要展示的字段 定义在父组件中(seeItem的值) 注意这里 input标签如何使用 v-model 绑定的对象属性
antd扩展动态表单formake，支持事件配置和复杂嵌套
前端361
05-28 796
formake 是一款动态表单生成器，基于 react(16.10 以上), antd(5.x)开发，继承了 antd 组件接口，并在此基础上添加了扩展。支持事件配置和多层嵌套，可快速生成复杂表单。
react项目，动态形成table的表头
qq_45222993的博客
05-25 1649
前提： filterData是一个数组，这个数组的值根据一个下拉框的值筛选出来的 整个的需求是生成图片这样的表格，表头是动态生成的，tbody的地方生成的是input框（两个图片是连接起来的，两个部分的表头来源不一样而已） 最后save的时候传递给后端的payload格式是 "table_header": "", "template_id": "", "upstream_base_config_id": "", "upstream_temporary_config_id": "", "ups
基于 React + AntDesign4.x 实现的可编辑表格，可满足大部分使用场景
欢迎光临
01-25 3713
可编辑任意单元格，单元格类型可选：输入框、单选框、下拉列表、分组下拉列表 属性列表 参数 说明 类型 默认值 style 覆盖样式 Object {} columns 表格列 Array [] onChange 单元格内容修改回调 function(Object) - isAddRow 是否允许新增行 boolean true isDeleteRow 是否允许删除行 boolean true isSelectRows 是否显示勾选框 boolean true isSe
react结合antd的Table组件实现动态单元格合并
qq_52845451的博客
02-19 3276
react结合antd的Table组件实现动态单元格合并
Ant Design Table表格动态合并
weixin_45945214的博客
09-14 492
Ant Design Table表格动态合并
Ant Design 表格动态添加行实现
wyf1048713166的博客
11-05 2185
通过ant design vue 实现表格行动态新增和删除
react-antd-treetable
08-30
react-antd-treetable是一个基于React和Ant Design框架开发的树形表格组件。该组件提供了一个功能强大且易用的界面，用于展示具有树形结构的数据。 react-antd-treetable组件主要特点如下： 1. 树形结构：组件支持...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值