antDesignVue框架table组件合并单元格超另类解决方法，强力推荐！

antDesignVue框架表格合并单元格创新解决方案

原创

已于 2023-02-06 11:28:08 修改 · 置顶 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #css3

于 2020-06-06 19:42:32 首次发布

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

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

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

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

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

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

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

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

最低0.47元/天解锁文章

antDesignVue框架table组件合并单元格超另类解决方法，强力推荐！

2 条评论