1. 添加 :span-method="objectSpanMethod"
2. 写objectSpanMethod 方法
//#region 合并单元格
// 这个方法是 element-ui提供的单元格合并方法
// objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
// row: 当前行
// column: 当前列
// rowIndex：当前行号
// columnIndex ：当前列号
// 1代表：独占一行
// 更大的自然数：代表合并了若干行
// 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格
mergeCol(id, rowIndex) {
debugger;
// 合并单元格
// id：属性名
// rowIndex：行索引值
var idName = this.TableData[rowIndex][id]; // 获取当前单元格的值
if (rowIndex > 0) {
// 判断是不是第一行
// eslint-disable-next-line eqeqeq
if (this.TableData[rowIndex][id] != this.TableData[rowIndex - 1][id]) {
// 先判断当前单元格的值是不是和上一行的值相等
var i = rowIndex;
var num = 0; // 定义一个变量i，用于记录行索引值并进行循环，num用于计数
while (i < this.TableData.length) {
// 当索引值小于table的数组长度时，循环执行
if (this.TableData[i][id] === idName) {
// 判断循环的单元格的值是不是和当前行的值相等
i++; // 如果相等，则索引值加1
num++; // 合并的num计数加1
} else {
i = this.TableData.length; // 如果不相等，将索引值设置为table的数组长度，跳出循环
}
}
return {
rowspan: num, // 最终将合并的行数返回
colspan: 1,
};
} else {
return {
rowspan: 0, // 如果相等，则将rowspan设置为0
colspan: 1,
};
}
} else {
// 如果是第一行，则直接返回
let i = rowIndex;
let num = 0;
while (i < this.TableData.length) {
// 当索引值小于table的数组长度时，循环执行
if (this.TableData[i][id] === idName) {
i++;
num++;
} else {
i = this.TableData.length;
}
}
return {
rowspan: num,
colspan: 1,
};
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 合并单元格
switch (
columnIndex // 将列索引作为判断值
) {
// 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并（索引0,1 指的是页面上的0,1）
// gzTroubles，gzID 这两个字段是我要合并的字段名，
case 1:
return this.mergeCol("gzTroubles", rowIndex);
case 0:
return this.mergeCol("gzID", rowIndex);
}
},
//#endregion其中，switch中 0和1 是根据下面这张图中的顺序来的，
文章来源：https://www.toymoban.com/news/detail-509104.html
完整代码如下：文章来源地址https://www.toymoban.com/news/detail-509104.html
<template>
<div class="pCindex">
<el-table
ref="tableRef"
:data="TableData"
class="tableStyle"
:span-method="objectSpanMethod"
border
>
<el-table-column
align="center"
prop="gzID"
:label="lable.gzID"
width="80"
>
</el-table-column>
<el-table-column
align="center"
prop="gzTroubles"
:label="lable.gzTroubles"
>
</el-table-column>
<el-table-column
header-align="center"
prop="gzReason"
:label="lable.gzReason"
></el-table-column>
<el-table-column
header-align="center"
prop="gzWay"
:label="lable.gzWay"
></el-table-column>
</el-table>
</div>
</template>
<script>
export default {
components: {},
data() {
return {
lable: {
gzID: "序号",
gzTroubles: "故障现象",
gzReason: "故障原因",
gzWay: "排除方法",
},
TableData: [
{
gzID: "1",
gzTroubles: "发动机胜多负少的温度过高",
gzReason: "1.是的",
gzWay: "1.打开上翻门",
},
{
gzID: "1",
gzTroubles: "发动机胜多负少的温度过高",
gzReason: "2.散热风机有噪音",
gzWay: "2.转轴上加润滑油",
},
{
gzID: "2",
gzTroubles: "发动机不能起动",
gzReason: "1.电瓶电压不足，接线柱松动或氧化",
gzWay: "1.充电、打磨接头并接牢",
},
{
gzID: "3",
gzTroubles: "发动机不等等能起动",
gzReason: "2.燃油不足是否",
gzWay: "2.加油或排气",
},
],
};
},
watch: {},
mounted() {},
methods: {
//#region 合并单元格
// 这个方法是 element-ui提供的单元格合并方法
// objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
// row: 当前行
// column: 当前列
// rowIndex：当前行号
// columnIndex ：当前列号
// 1代表：独占一行
// 更大的自然数：代表合并了若干行
// 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格
mergeCol(id, rowIndex) {
debugger;
// 合并单元格
// id：属性名
// rowIndex：行索引值
var idName = this.TableData[rowIndex][id]; // 获取当前单元格的值
if (rowIndex > 0) {
// 判断是不是第一行
// eslint-disable-next-line eqeqeq
if (this.TableData[rowIndex][id] != this.TableData[rowIndex - 1][id]) {
// 先判断当前单元格的值是不是和上一行的值相等
var i = rowIndex;
var num = 0; // 定义一个变量i，用于记录行索引值并进行循环，num用于计数
while (i < this.TableData.length) {
// 当索引值小于table的数组长度时，循环执行
if (this.TableData[i][id] === idName) {
// 判断循环的单元格的值是不是和当前行的值相等
i++; // 如果相等，则索引值加1
num++; // 合并的num计数加1
} else {
i = this.TableData.length; // 如果不相等，将索引值设置为table的数组长度，跳出循环
}
}
return {
rowspan: num, // 最终将合并的行数返回
colspan: 1,
};
} else {
return {
rowspan: 0, // 如果相等，则将rowspan设置为0
colspan: 1,
};
}
} else {
// 如果是第一行，则直接返回
let i = rowIndex;
let num = 0;
while (i < this.TableData.length) {
// 当索引值小于table的数组长度时，循环执行
if (this.TableData[i][id] === idName) {
i++;
num++;
} else {
i = this.TableData.length;
}
}
return {
rowspan: num,
colspan: 1,
};
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
// 合并单元格
switch (
columnIndex // 将列索引作为判断值
) {
// 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并（索引0,1 指的是页面上的0,1）
case 1:
return this.mergeCol("gzTroubles", rowIndex);
case 0:
return this.mergeCol("gzID", rowIndex);
}
},
//#endregion
},
};
</script>
到了这里，关于el-table 合并单元格（合并行）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
