<template>
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%">
<el-table-column
prop="lv1"
label="一级巡查项">
</el-table-column>
<el-table-column
prop="lv2"
label="二级巡查项">
</el-table-column>
<el-table-column
prop="lv3"
label="三级巡查内容描述">
</el-table-column>
</el-table>
</template>
<script>
export default {
data () {
return {
tableData: [
{ lv1: '大坝', lv2: '堰顶', lv3: '堰顶是否平整' },
{ lv1: '大坝', lv2: '堰顶', lv3: '防浪墙是否平整' },
{ lv1: '大坝', lv2: '堰顶', lv3: '两岸坝端是否危害' },
{ lv1: '大坝', lv2: '上游坝坡', lv3: '堰顶是否平整' },
{ lv1: '大坝', lv2: '上游坝坡', lv3: '防浪墙是否平整' },
{ lv1: '大坝', lv2: '上游坝坡', lv3: '两岸坝端是否危害' }
]
}
},
methods: {
objectSpanMethod ({ row, column, rowIndex }) {
const dataProvider = this.tableData
const cellValue = row[column.property]
if (cellValue) {
// 上一条数据
const prevRow = dataProvider[rowIndex - 1]
// 下一条数据
let nextRow = dataProvider[rowIndex + 1]
// 当上一条数据等于下一条数据
if (prevRow && prevRow[column.property] === cellValue) {
return { rowspan: 0, colspan: 0 }
} else {
let rowspan = 1
while (nextRow && nextRow[column.property] === cellValue) {
rowspan++
nextRow = dataProvider[rowspan + rowIndex]
}
if (rowspan > 1) {
return { rowspan, colspan: 1 }
}
}
}
}
}
}
</script>
上述代码也是转自其它博客,是判断所有的列是否有相同项合并,如果只需要判断第一或第二列,自己可以加个if判断即可,如下图