antDesignVue框架table组件合并单元格超另类解决方法，强力推荐！_antdesign vue表格单元格合并前边列边框缺失-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43136027/article/details/106592011

本文介绍了一种解决antDesignVue框架中table组件合并单元格问题的另类方法，通过后端接口配合特定数据结构以及CSS样式调整，实现更满意的展示效果。无需使用官方提供的合并单元格功能，简化了编辑时的操作。文章强调思路的重要性，并提供了关键的CSS样式修改和模板代码示例。

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

最近项目大都是基于ant框架开发的，而且table组件使用率相当高，这其中就涉及到了很多合并单元格问题，官方提供了合并单元格的方法，但是很难受啊有木有，因为鼠标放上去之后显示出来的效果非常让人不满意，下面是官方的效果。
在这里插入图片描述

看到了吧，很难受的！所以就我就该！不对，是改！
先上图，看官们先欣赏下，喜欢哪个呢！

怎么样，是不是还满意！下面直接上思路！不着急上代码，思路远比代码值钱!

这种形式需要后端接口提供支持，把合并的单元格作为一条数据去理解，然后那些不需要合并的其实是放在一个数组里的，然后合并了的字段，在这数组里也要有，这样保证可编辑的时候不用在费事去赋字段了，直接方法了赋值就够了！后端接口需要支持成这个样子，我是在json里写了一段，不一定是按照我这个表格字段来的，就是个意思

{
    data1:'test1',
    data2:'test2',
    list1:[
        {
            data3:'test3',
            data1:'test1',
            data2:'test2',
        },
        {
            data4:'test4',
            data1:'test1',
            data2:'test2',
        }
    ]
}

大概就是这个意思，看官们自己尝试下就懂了，也没有不好理解的地方，然后关键点就是去改样式，因为list里的数据会放在一条里，需要设置样式，显示成多条即可，这里有个知识点，就是改样式的时候用/deep/方法

 /*  合并单元格样式调整  */
  /