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

前言：
在想考虑合并单元格的时候，如果整页内容不固定，就不要使用分页，因为在分页的时候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,
    };
  },