ant customRender合并单元格（vue2）

沙子迷了蜗牛眼

已于 2023-10-18 11:47:12 修改

阅读量787

点赞数 1

CC 4.0 BY-SA版权

文章标签： java javascript 开发语言

于 2022-12-02 09:09:59 首次发布

本文链接：https://blog.csdn.net/m0_73008551/article/details/128142104

本文介绍了一种使用自定义渲染函数实现表格数据合并的方法。通过控制显示和合并的参数，可以有效地减少重复数据的显示，优化表格展示效果。具体实现中，通过对数据源进行过滤和比较，确定了合并单元格的数量。

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

废话不多说，直接上代码：

注：在合并前，需要先对数据进行处理，需要合并项放一起，否则会导致table表格格式问题

{

          title: "标题",

          dataIndex: "oneFactorName",

          width: 80,

          ellipsis: true,

          align: "center",

          customRender: (text, row, index) => {

//这里是控制显示和合并与否的参数

            let obj = {

              children: text,

              attrs: {},

            };

            //this.dataSource是我们拿到的所有数据

            let arr = this.dataSource.filter((res) => {

              //这里gpsNumber是我需要判断的字段名（相同就合并）

              return res.oneFactorName == row.oneFactorName;

            });

            if (index == 0 || this.dataSource[index - 1].oneFactorName != row.oneFactorName) {

              obj.attrs.rowSpan = arr.length;

            } else {

              obj.attrs.rowSpan = 0;

            }

            return obj;

          },

        },