Ant Design Vue实现a-table表格单元格合并（列/行合并）

列合并

这里先写一个最简单的列合并实现：

这个合并的效果图只截了表格的一部分，左边是需要展示的数据。数据是后台返回的，但是最后的合计数据需要计算并合并展示。

实现代码如下：

表格数据：

<a-table bordered :columns="columns" :data-source="data" :pagination="false" :loading="loading" rowKey="id"></a-table>

这里的data为后台返回数据，合并的话需要重点查看columns 的数据，即表格表头。

具体实现，这里的columns数据在data内定义：

export default {
  data() {
    return {
      data: [],
      countnum: 0,
      columns: [
        {
	  title: '名称',
	  dataIndex: 'name',
	  key: 'name',
	},
	{
	  title: '数量',
          dataIndex: 'num',
	  key: 'num',
	},
        {
          title: '合计',
          dataIndex: 'count',
          key: 'count',
          customRender: (value, row, index) => {
            console.log(value, row, index);
            const obj = {
              children: this.countnum,
              attrs: {},
            };
            if(index === 0){   // 第一行数据开始，跨行合并的长度为数据data的长度
              obj.attrs.rowSpan = this.data.length;
            }
            if (index >= 1) {   // 从第一行往后的所有行表格均合并
              obj.attrs.rowSpan = 0;
            }
            return obj;
          }
        }
      ],
    }
  },
}

解析：

因为我所合并的只有合计这一列，所以这边只修改合计这一列的表头：

这个为官网的表格Api内的customRender，

这里对customRender后的数据console.log(value, row, index); 返回的结果：

这里的row可以拿到这一行所有的数据，这里value没有值，所有为undefined，后面的对象为row，打印的是这一行数据的所有值，最后打印出的是每行的索引，和A内的对应。

可以看到obj内的children为 this.countnum 这个为我存放的图内的11（计算得到的），也可以放其他的标签等元素。

这里使用rowSpan是列合并，这里将除了索引为0的一列设置之外，其他的不进行渲染，最后合并为一列。

if(index === 0){
  obj.attrs.rowSpan = this.data.length;
}
if (index >= 1) {
  obj.attrs.rowSpan = 0;
}

这个就是表格列的合并。

 

之前没做，刚好看一下行合并

行合并

如图：

这个是刚试的行合并：

可以这样操作，现在还会带着行合并的代码，所以就看差异部分即可：

const renderContent = (value, row, index) => {
  const obj = {
    children: value,
    attrs: {},
  };
  if (index >= 4) {
    obj.attrs.colSpan = 0;
  }
  return obj;
};

export default {
  data() {
    return {
      data: [],
      countnum: 0,
      columns: [
        {
            title: '名称',
	    dataIndex: 'name',
	    key: 'name',
	    customRender: (text, row, index) => {
            if (index < 4) {   // 前四行数据运行这个
              return <a href="javascript:;">{text}</a>;
            }
            return {   // 其他的
              children: <a href="javascript:;">{text}</a>,
              attrs: {
                colSpan: 2,  // 跨几列合并，这里现在是跨两列
              },
            };
          }
	},
	{
	    title: '数量',
	    dataIndex: 'num',
	    key: 'num',
	    customRender: renderContent,
	},
        {
          title: '合计',
          dataIndex: 'count',
          key: 'count',
          customRender: (value, row, index) => {
            const obj = {
              children: this.countnum,
              attrs: {},
            };
            if(index === 0){
              obj.attrs.rowSpan = this.data.length;
            }
            if (index >= 1) {
              obj.attrs.rowSpan = 0;
            }
            return obj;
          }
        }
      ],
    }
  },
}

下面这个是行合并的代码啦，已经试过啦，有效的！

注意：如果合并那一列就改哪里，列合并的值是下面的children（之前踩了，查了一会才发现）。

const obj = {
  children: this.countnum,
  attrs: {},
};

 

 

现在就是表格的列合并和行合并了，肯定还有遗漏的部分，欢迎补充指教！！！