<el-table
:data="tableData"
:span-method="objectSpanMethod"
>
<el-table-column prop="pname" label="巡查主体" align="center"></el-table-column>
<el-table-column prop="name" label="巡查部位" align="center"></el-table-column>
<el-table-column prop="remark" label="巡查内容描述" align="center"></el-table-column>
</el-table>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
>
<el-table-column prop="pname" label="巡查主体" align="center"></el-table-column>
<el-table-column prop="name" label="巡查部位" align="center"></el-table-column>
<el-table-column prop="remark" label="巡查内容描述" align="center"></el-table-column>
</el-table>
mergeCol(id, rowIndex) { // 合并单元格
// 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
}
}
},
// 这个方法是 element-ui提供的单元格合并方法
// objectSpanMethod 传入了 { row, column, rowIndex, columnIndex }
// row: 当前行
// column: 当前列
// rowIndex：当前行号
// columnIndex ：当前列号
// 1代表：独占一行
// 更大的自然数：代表合并了若干行
// 0：代表“消失”的哪那一个单元格，后面的单元格向前推一格
objectSpanMethod({ row, column, rowIndex, columnIndex }) { // 合并单元格
switch (columnIndex) { // 将列索引作为判断值
// 通过传递不同的列索引和需要合并的属性名，可以实现不同列的合并
case 0:
return this.mergeCol('pname', rowIndex)
case 1:
return this.mergeCol('pname', rowIndex)
case 2:
return this.mergeCol('pname', rowIndex)
}
},
