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

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


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


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

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

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

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

 /*  合并单元格样式调整  */
  /deep/ .ant-table-tbody > tr > td > p {
    padding: 8px 16px;
    border-bottom: 1px solid #e8e8e8;
    line-height: 40px;
    margin: 0 -8PX
  }
  
  /deep/ .ant-table-tbody > tr > td > p:last-child {
    margin-bottom: -8px;
    border: 0;
  }
  
  /deep/ .ant-table-tbody > tr > td > p:first-child {
    margin-top: -8px;
  }

这是修改的css样式

<template slot="materialCode" slot-scope="text, record">
  <p v-for="(item, index) in record.orderdetailList" :key="index">
    {{ item.materialCode }}
  </p>
</template>
<template slot="materialName" slot-scope="text, record">
  <p v-for="(item, index) in record.orderdetailList" :key="index">
    {{ item.materialName }}
  </p>
</template>

以上是我的模板代码，在模板里设置插槽去循环那个list数组，通过p标签调整样式，这样表头columns就正常写就好了，不需要官方的那种合并单元格的写法了！是不是挺简单的呢，思路最重要！希望能帮到各位同学哈!