Ant Design Table表格合并行详细教程

先上图

1、准备一个删除单元格的方法。因为第一行本来是三个单元格，合并后变成两个单元格（第一、二行单元格变成两个，只是长度被拉长）所以我们要删除一个单元格。后面会调用。

const renderContent = (value, row, index) => { // 删除索引为4的单元格
  const obj = {
    children: value,
    attrs: {},
  };
  if (index === 0) { // 第一行删除索引为4的单元格
    obj.attrs.colSpan = 0;
  }
  if (index === 1) {// 第二行删除索引为4的单元格
    obj.attrs.colSpan = 0;
  }
  return obj; // 别忘了返回对象
};

2、从第二列统计值开始合并，所以customRender写在统计值下，调整单元格占比，

   columns1_0: [
        {
          align: 'center',
          title: 'name',
          dataIndex: 'name0',
        },
        {
          align: 'center',
          title: '统计值',
          dataIndex: 'name2',
          customRender: (text, row, index) => {
            const obj = {
              children: text,
              attrs: {},
            };
            if (index === 0) {// 第一行，单元格占两个单元格的长度，所以colSpan = 2
              obj.attrs.colSpan = 2;
            }
            if (index === 1) {// 第二行，单元格占两个单元格的长度，所以colSpan = 2
              obj.attrs.colSpan = 2;
            }
            return obj
          },
        },
        {
          align: 'center',
          title: '目标值',
          dataIndex: 'name3',
          customRender: renderContent, // 调用renderContent方法，删除

        },
      ],

完整代码：.

const renderContent = (value, row, index) => { 
  const obj = {
    children: value,
    attrs: {},
  };
  if (index === 0) {
    obj.attrs.colSpan = 0;
  }
  if (index === 1) {
    obj.attrs.colSpan = 0;
  }
  return obj;
};
export default {
  name: 'table',
  data () {
    return {
      columns1_0: [
        {
          align: 'center',
          title: 'name',
          dataIndex: 'name0',
        },
        {
          align: 'center',
          title: '统计值',
          dataIndex: 'name2',
          customRender: (text, row, index) => {
            const obj = {
              children: text,
              attrs: {},
            };
            if (index === 0) {
              obj.attrs.colSpan = 2;
            }
            if (index === 1) {
              obj.attrs.colSpan = 2;
            }
            return obj
          },
        },
        {
          align: 'center',
          title: '目标值',
          dataIndex: 'name3',
          customRender: renderContent, 

        },
      ],
      data1_0: [
        {
          name0: '11',
          name2: '112',
          name3: '113',
        },
        {
          name0: '22',
          name2: '222',
          name3: '223',
        },
        {
          name0: '33',
          name2: '332',
          name3: '333',
        },
        {
          name0: '44',
          name2: '442',
          name3: '443',
        },
        {
          name0: '55',
          name2: '552',
          name3: '553',
        },
        {
          name0: '55',
          name2: '552',
          name3: '553',
        },
        {
          name0: '55',
          name2: '552',
          name3: '553',
        },
      ],
    };
  },