antd Table合并行 rowSpan

最新推荐文章于 2024-10-14 03:57:09 发布

前端_小栗子

最新推荐文章于 2024-10-14 03:57:09 发布

阅读量2.1k

点赞数 1

分类专栏： react js 文章标签： react ant

本文链接：https://blog.youkuaiyun.com/weixin_46554760/article/details/119749790

版权

js 同时被 2 个专栏收录

18 篇文章

订阅专栏

react

6 篇文章

订阅专栏

这篇博客介绍了一种方法，通过JavaScript处理数据源，实现将具有相同`knowleagePointTypeName`的知识点类型行进行合并，同时为第一行数据添加`rowSpan`属性，从而优化表格展示。主要涉及数组的`reduce`方法和数据过滤操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

实现这种效果，同一种知识点类型合并行。

 <Table
                        columns={columns}
                        // dataSource={dataSource}
                        dataSource={createNewArr(dataSource)}
                        pagination={false}
                    />

 function createNewArr (data) {
        return data.reduce((result, item) => {
            //首先将name字段作为新数组result取出
            if (result.indexOf(item.knowleagePointTypeName) < 0) {
                result.push(item.knowleagePointTypeName)
            }
            return result
        }, []).reduce((result, name) => {
            //将name相同的数据作为新数组取出，并在其内部添加新字段**rowSpan**
            const children = data.filter(item => item.knowleagePointTypeName === name);
            result = result.concat(
                children.map((item, index) => ({
                    ...item,
                    rowSpan: index === 0 ? children.length : 0,//将第一行数据添加rowSpan字段
                }))
            )
            return result;
        }, [])
    }