实现效果：
实现代码：
-
<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>
转载：https://blog.csdn.net/weixin_41876307/article/details/114367016
查看评论