怎么使用Ant Design Vue Table组件合并单元格

Ant Design Vue Table组件合并单元格

项目开发中，有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现。

合并前：

合并第一列：

合并第二列：

Ant-vue table的单元格合并已经使用自己的slot插槽

之前在做一个ant-design的项目的时候，遇到一个单元格合并的问题，简直头疼，其实在ant中进行简单的内容合并单元格，其实很容易也很方便，最简单的凡是就是在a-table-column标签中进行绑定一个function，代码如下(由于之前比较喜欢template的方式，所以下面都是template的方式进行代码展示，js的数据方式逻辑是一样的)：

//核心是customRender这个对象

//js
//children是返回的内容，attrs里面是合并的单元格公式，后面的数字是代表几行/列 ，如果被合并了的未知就用0进行占位
mergeTable(text, record, index) {
    return {
        children: text，
        attrs: {
            rowSpan:1
        },
    }
},

到这里一些简单的合并什么的基本上都能进行处理了。

接下来难点来了，我们经常会在column中进行设置一个自己的插槽，但是貌似这这里设置一个插槽并不会进行渲染，亲测过很多次，返回的都是children中的内容。

针对这个，特意去了解了下源码中的要求，这里只能插入 jsx 语法的代码片段。如果是react开发的人，应该对这个不默认，但是vue中用的 jsx 还是相对较少的，比如返回一个链接：

return {
        children: text，
        // 一个div   
text

        //一个js处理了的内容   
{text.length}
        //一个html的代码字符串 
        //剩下的html代码等类似
        attrs: {
            rowSpan:1
        },
    }

通过上面的，简单的类似于slot的使用方式也能进行渲染了，使用真是的slot研究了一段时间，貌似没有研究成功，如果有人有了结果，可以私信@我一下，互相学习一下。

上面这些都是一个简单的渲染方式，以及渲染的内容替换等，真正让我头疼的是，如果合并的是一个按钮组或者带有事件的东东，这个怎么弄？

踩了一路坑，得到了一种方法，废话不说了，代码如下

    children : (
        

             this.yourFunction(a,b,c,d)}>
            一个带有点击事件的template