这个elementul表格单元格合并功能是很多地方会用到的，但是官方文档那个有点看的不明白。这里详细讲一下。
这里包含有一个行的合并方法，一个列的合并方法，都是详细注释了的，讲解了他的规则，看完后就知道怎么用这个了
这里是合并的样子，有竖着合并的，也有横着合并的。放在一起
这里是原本的表格样子，没有合并的
这里可以直接复制到你的vue内打开试试效果，就是上面图片的样子
<template>
<div>
<el-table
:data="tableData"
:span-method="arraySpanMethod"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column prop="id" label="ID" width="180"> </el-table-column>
<el-table-column prop="name" label="姓名"> </el-table-column>
<el-table-column prop="number" sortable label="number"> </el-table-column>
<el-table-column prop="age" sortable label="age"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
//表格数据
tableData: [
{
id: "000",
name: "肖战",
number: "234",
age: 7,
},
{
id: "001",
name: "王一博",
number: "234",
age: 8,
},
{
id: "002",
name: "魏无羡",
number: "324",
age: 9,
},
{
id: "003",
name: "蓝忘机",
number: "621",
age: 10,
},
{
id: "004",
name: "李希侃",
number: "539",
age: 11,
},
{
id: "005",
name: "小栗旬",
number: "539",
age: 12,
},
],
spanArr: [], //每行合并数
pos: 0, //角标索引
};
},
mounted() {
//清空合并坐标
this.spanArr = []; //每行合并数
this.pos = 0; //角标索引
this.getSpanArr(this.tableData); //先处理数据，把表格数据放进去
},
methods: {
// 竖着合并处理数据
getSpanArr(data) {
// 循环
for (var i = 0; i < data.length; i++) {
// 循环的第一行默认角标给个0，合并数给个1，因为rowspan和colspan需要默认是1，如果是0的话就不显示这个单元格了
if (i === 0) {
this.spanArr.push(1);
this.pos = 0;
} else {
//这里已经循环到第二行了才会走这里
// 判断当前行的某一个字段和上一行的某一个字段是否相同？
if (data[i].number === data[i - 1].number) {
//如果相同代表要合并，就给上一个元素合并数+1。
this.spanArr[this.pos] += 1; //这里pos是0。所以是给spanArr内第一条数据的合并数加了1，变成了2，代表从第一行开始合并1格，记住，1是默认有一格，没加1代表合并一格
this.spanArr.push(0); //然后再往spanArr内添加一个0。为什么要这么做呢，因为这里push进去0是加在第二个数据上的。合并的方法内写法是，1代表有数据，每加1代表合并一格，如果是0代表隐藏这一格，上面我们已经变成2了，所以合并一格，合并的就是第二格的数据，如果我们不给第二格的数据改为0.那么第二格的数据会显示，但是被挤在边上，所以这里给0让第二格数据隐藏
} else {
this.spanArr.push(1); //反之，如果不等于那就正常给个1显示数据但是不合并。
this.pos = i; //pos的角标也改为当前的循环。方便下一次循环的时候如果两个字段相同，合并数直接从下一个角标算起
}
}
}
console.log(this.spanArr, "span"); //[2, 0, 1, 1, 2, 0]
},
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
//横向合并
//角标为2的行，按顺序012也就是第三行数据
if (rowIndex === 2) {
//从第一列开始
if (columnIndex === 0) {
//两个参数：竖着合并几位，横向合并几位
return [1, 3];
} else if (columnIndex === 1) {
//这里的意思是第二列不显示，0代表不显示，如果不写这个，那么上面合并的时候就会把这列的数据给挤到旁边去。
return [0, 0];
} else if (columnIndex === 2) {
//这里同理。你需要合并到多少列就把多少列的数据00隐藏掉。
return [0, 0];
}
}
// 竖向合并
if (columnIndex === 0) {
//第一列 //this.spanArr目前的值是[2, 0, 1, 1, 2, 0]
const _row = this.spanArr[rowIndex]; //这里拿到spanArr内的第一个数据，我们上面处理时第一个数据是2，所以是合并一格的意思
const _col = _row > 0 ? 1 : 0; //这里判断2大于0所以col的值是1，代表正常显示
return {
rowspan: _row, //这里是2，代表竖着合并数一格
colspan: _col, //这里是1，代表显示这一格，但是被上面的合并了，所以看不到这个值。如果为0，这一列就不显示了
};
//这个位置，else if在来一次，1是角标，代表数组中的角标1，也就是第二列。如果你还想第三列参与合并，那就再else if (columnIndex === 2)，以此类推就行。
} else if (columnIndex === 1) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col,
};
}
},
},
};
</script>
<style>
</style>
到这里就把所有规则讲清了，合并的规则。那么可以根据这个规则大家自由发挥
在正式和后端对接时，this.getSpanArr(this.tableData)的调用不是放在mounted内的，而是直接放在你的请求数据的方法then中的。那么就会造成一个情况，你点击后第一次是正常的，但是你再发送一次请求的时候就会发现你的合并表格变大了，然后有一部分被挤走到旁边之类的。这是因为你的合并坐标并没有清空。还是保存的上一次的，你再点一次就在这基础上再加，所以数据就混乱了。
所以需要在then调用this.getSpanArr(this.tableData)之前把spanArr和pos都清空。
//清空合并坐标
this.spanArr = []
this.pos = 0
2023-9-21更新
讲解：
objectSpanMethod这个是合并方法，写在表格标签上的那个。不用动
setdates 这个是你请求后台拿到数据后调用一下这个方法，需要改动的地方有两个，一个是tableData这个是你获取的表格数据数组，名字如果不一样就修改一下。还有就是item.zxbm_name === this.tableDatas[index - 1].zxbm_name这句话，改动后面的zxbm_name，这个就是你要合并的列字段名。
然后你再data中定义一个变量spanArr是数组。
然后就完事了！
objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
setdates() {
let contactDot = 0;
this.spanArr = []
this.tableData.forEach((item, index) => {
item.index = index;
if (index === 0) {
this.spanArr.push(1);
} else {
if (item.zxbm_name === this.tableDatas[index - 1].zxbm_name) {
this.spanArr[contactDot] += 1;
this.spanArr.push(0);
} else {
contactDot = index;
this.spanArr.push(1);
}
}
});
},