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

Bertha 。 2022-11-30 12:34 1343阅读 0赞

## 列合并 ##

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70][]

实现代码如下：

表格数据：

<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;
              }
            }
          ],
        }
      },
    }

解析：

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

这个为[官网][Link 1]的表格Api内的customRender，

![20200824130524537.png][]

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

![2020082412530840.png][]

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

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

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

![2020082413143433.png][]

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

这个就是表格列的合并。

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

## 行合并 ##

如图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1][]

这个是刚试的行合并：

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

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70]: /images/20221123/971b5fe1b8a74dc2ad3e8e06b09159ea.png
[Link 1]: https://www.antdv.com/components/table-cn/
[20200824130524537.png]: /images/20221123/d4197f9e9a584622aba76a56e85b6140.png
[2020082412530840.png]: /images/20221123/77c7d601e3d246e5b04de4703681980c.png
[2020082413143433.png]: /images/20221123/4bc98cd3527a4d659ba18c1aab0e6011.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ExODc5MjYyNzE2OA_size_16_color_FFFFFF_t_70 1]: /images/20221123/90564820c273428e815a5c88b3880493.png