一、element控件实现
在平常的应用中，需要用到合并单元格的操作，在Excel中，这种操作很好实现，但在实际项目中，常常需要借助element控件来实现。
下面是element中的一个实例：
实现的代码如下：
二、原生方法实现
但是，这种局限性很大，要是需要合并的单元格和实例中的不匹配，那就不行了。比如说实际需求是下面的这种形式的表格：
开始用element控件发现实现不了，然后最后用原生方法实现的，关键代码如下：
| 数据类型 | 名称 | ||
|---|---|---|---|
| {{item.rowSpanName}} | {{item.rowSpanData[0].value01}} | {{item.rowSpanData[0].value02}} | {{item.rowSpanData[0].value03}} |
| {{item.rowSpanData[ele].value01}} | {{item.rowSpanData[ele].value02}} | {{item.rowSpanData[ele].value03}} |
tableData: [
{
rowSpanName: "基础数据",
rowSpanData: [
{
value01: "钻井层位（）",
value02: "",
value03: ""
},
{
value01: "上层套管尺寸（in）",
value02: "",
value03: ""
},
{
value01: "上层套管下深（m）",
value02: "",
value03: ""
},
{
value01: "本层钻头尺寸（in）",
value02: "7.5",
value03: ""
},
{
value01: "本层井深（m）",
value02: "5950",
value03: ""
},
{
value01: "本层井底部垂深（m）",
value02: "",
value03: ""
},
{
value01: "本层套管尺寸（in）",
value02: "4",
value03: ""
},
{
value01: "本层套管下深（m）",
value02: "5948.6",
value03: ""
},
{
value01: "浮箍下深（m）",
value02: "5928.6",
value03: ""
},
{
value01: "球座/阻流环下深（m）",
value02: "5928.6",
value03: ""
},
{
value01: "分级箍顶深（m）",
value02: "",
value03: ""
},
{
value01: "尾管挂顶深（m）",
value02: "3050",
value03: ""
},
]
},
{
rowSpanName: "地质分层",
rowSpanData: [
{
value01: "层位（）",
value02: "",
value03: ""
},
{
value01: "底深（m）",
value02: "",
value03: ""
},
{
value01: "主要岩性描述（）",
value02: "",
value03: ""
}
]
},
{
rowSpanName: "其他",
rowSpanData: [
{
value01: "目的层1顶深（m）",
value02: "",
value03: ""
},
{
value01: "目的层1顶深TVD（m）",
value02: "",
value03: ""
}
]
}
],
实现的效果如下：
以上就是实际需求中的一个例子，element控件应该也能实现第二种多行合并的表格，后面可以深入研究一下。