21-08-12-antv-合并单元格采坑之路

最新推荐文章于 2025-04-07 07:49:35 发布

alo_ne

最新推荐文章于 2025-04-07 07:49:35 发布

阅读量667

点赞数

分类专栏： Vue-案例文章标签： ide

本文链接：https://blog.csdn.net/alo_ne/article/details/119647376

版权

Vue-案例专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何在Ant Design表格中实现静态和动态的行、列合并。通过customRender方法，结合rowSpan和colSpan属性，能够灵活控制表格单元格的合并。示例代码展示了根据特定条件进行合并的实现方式，适用于需要动态合并的场景。

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

前言：
在想考虑合并单元格的时候，如果整页内容不固定，就不要使用分页，因为在分页的时候index是重新计算的。
静态合并行
静态合并就是即可以确定想要合并的是行和列
使用官网提供的customRender方法详情查看 ant-表格

data() {
    var columns = [
      {
        title: "测试a",
        dataIndex: "lb",
        customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {},
          };
          if (index === 2) {
            //1、想要合并的开始行
            obj.attrs.rowSpan = 6; // 2、需要合并的行的个数 从想要合并的开始列计算  
            //比如想从第三行开始合并到第八行  就是8-2
          }
          if (index > 2 && index < 8) {
            //3、将第三行到第八行的列 设置为0
            obj.attrs.rowSpan = 0;
          }
          return obj;
        },
      },
      {
        title: "测试b",
        dataIndex: "sbj",
      },
      {
        title: "测试c",
        dataIndex: "dsj",
      },
    ];
    return {
      columns,
      len: {},
      data: data,
    };
  },

动态合并行
动态和并即没有办法确定需要合并那几列或行。同样使用customRender方法。但是如果直接写在data里面的话我们没有办法拿到需要合并的长度，所以可以把方法拿出来写

  data() {
        var columns = [
      {
        title: "测试a",
        dataIndex: "lb",
        customRender: this.renderContent,
      },
      {
        title: "测试b",
        dataIndex: "school",
      },
      {
        title: "测试c",
        dataIndex: "gjj",
      },
     
    ];
    return {
         columns,
      len: {},
    };
  },

    //methods 
     ///后台返回获取的this.len  可以通过方法自己计算赋给data
    renderContent(value, row, index) {
      if (JSON.stringify(this.len) !== "{}") {
        const obj = {
          children: value,
          attrs: {},
        };
        if (index === 0) {
          obj.attrs.rowSpan = this.len.rw;
        }
        // These two are merged into above cell
        for (let i = 1; i < this.len.rw; i++) {
          if (index === i) {
            obj.attrs.rowSpan = 0;
          }
        }
        if (index === this.len.rw) {
          obj.attrs.rowSpan = this.len.lg;
        }
        for (let i = this.len.rw + 1; i < this.len.rw + 1 + this.len.rw; i++) {
          if (index === i) {
            obj.attrs.rowSpan = 0;
          }
        }

        return obj;
      }
    },

在这里插入图片描述

合并列

 data() {
    var columns = [
      {
        title: "测试a",
        dataIndex: "lb",
        customRender: (text, row, index) => {
          if (index < 5) {
            // 1、正常运行的  除了合并之外的需要正常显示的 必须加上去
            return <a href="javascript:;">{text}</a>;
          }
          return {
            // 其他的
            children: <a href="javascript:;">{text}</a>,
            attrs: {
              colSpan: 2, // 2、跨几列合并，这里现在是跨两列
            },
          };
        },
      },
      {
        title: "测试b",
        dataIndex: "sbj",
           customRender: (value, row, index) => {
          const obj = {
            children: value,
            attrs: {},
          };
          if (index >= 5) {     // 3、上面写了合并两列，所以这一列也要处理
            obj.attrs.colSpan = 0;
          }
          return obj;
        },
      },
      {
        title: "测试c",
        dataIndex: "dsj",
      },
    ];
    return {
      columns,
      len: {},
      data: data,
    };
  },

在这里插入图片描述