el-table 合并单元格（合并行）

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 eqeqeqif (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++; // 如果相等，则索引值加1num++; // 合并的num计数加1} else {i = this.TableData.length; // 如果不相等，将索引值设置为table的数组长度，跳出循环}}return {rowspan: num, // 最终将合并的行数返回colspan: 1,};} else {return {rowspan: 0, // 如果相等，则将rowspan设置为0colspan: 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是根据下面这张图中的顺序来的，

完整代码如下：

 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 eqeqeqif (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++; // 如果相等，则索引值加1num++; // 合并的num计数加1} else {i = this.TableData.length; // 如果不相等，将索引值设置为table的数组长度，跳出循环}}return {rowspan: num, // 最终将合并的行数返回colspan: 1,};} else {return {rowspan: 0, // 如果相等，则将rowspan设置为0colspan: 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},};