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

问题描述

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

clipboard.png

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

clipboard.png

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

多生表头:通过传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,
    }
];

你期待的结果是什么?实际看到的错误信息又是什么?

  因代码能力有限,现在我需要很多恶心的代码然后通过样式去控制他来实现,却有局限不好用,觉得这样太破坏antd的原生功能了,很是low。

  希望有实现过或能实现此需求并兼容antd.Table任意场景的哥哥帮帮忙;
  更希望官方日后能直接实现这些需求,就好了哦,时尚服装方面的系统有大量这样常态的需求,期待......感激!

阅读 8.3k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏