【React】[antd] Table组件【如何实现多重表头】和【表头或表尾保持固定一行作为合计项】

Z时代
2024-01-10
分类：技术分享

问题描述

1、多重(行)表头需求（列太多，需保留scroll属性的功能下实现）：
　　场景：在服装系统上需要横排展示多个尺码（非分组），如：

2、固顶合计行需求（列太多，需保留scroll属性的功能下实现）：
很多的表格都需要一个合计项放到表头或表尾固定不动（最好头尾都能支持）

【React】[antd] Table组件【如何实现多重表头】和【表头或表尾保持固定一行作为合计项】

问题出现的环境背景及自己尝试过哪些方法

多生表头：通过传DOM对象，通过样式控制来解决；
合计行：通过react-virtualized实现，但是单元格里无法使用antd.Form，每次滚动出来后组件及校验填好的信息都被初始化了。

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
多重表头：

const columns =[
{
key: "code",
dataIndex: "code",
title: "编号",
width: 100,
},
{
key: "name",
dataIndex: "name",
title: ["姓名1", "姓名2", "姓名3", "姓名4"],
width: 100,
}];

合计行：

const columns = [
{
key: "code",
dataIndex: "code",
title: {
head: "编号",
body: '合计',
foot: '本页合计',
},
width: 100,
},
{
key: "name",
dataIndex: "name",
title: "姓名",
width: 100,
},
{
key: "orderNum",
dataIndex: "orderNum",
title: {
head: "订单数",
body: '600',
foot: '400',
},
width: 100,
}];