合并单元格,如果id列值一致,则合并
<template>
<div style="padding:20px">
<el-table :data="tableData6" :span-method="objectSpanMethod" border>
<el-table-column prop="name" label="模块" width="180" />
<el-table-column prop="amount1" label="功能" />
<el-table-column prop="amount3" label="权限">
<template slot-scope="{ row }">
<el-checkbox v-for="(item, index) in row.amount3" :key="index" :label="item" />
</template>
</el-table-column>>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
spanArr: [], // 用于存放每一行记录的合并数
tableData6: [{
id: '1',
name: '概况',
amount1: '概况',
amount3: ['查看']
}, {
id: '2',
name: '运营管理',
amount1: '用户管理',
amount3: ['查看', '审核', '启用']
}, {
id: '2',
name: '运营管理',
amount1: '车型资料',
amount3: ['查看', '审核', '启用']
}, {
id: '2',
name: '运营管理',
amount1: '计费标准',
amount3: ['查看', '审核', '启用']
}, {
id: '3',
name: '订单管理',
amount1: '订单管理',
amount3: ['查看', '审核', '启用']
}]
}
},
mounted: function() {
this.getSpanArr(this.tableData6)
},
methods: {
getSpanArr(data) {
// data就是我们从后台拿到的数据
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1)
this.pos = 0
} else {
// 判断当前元素与上一个元素是否相同
if (data[i].id === data[i - 1].id) {
this.spanArr[this.pos] += 1
this.spanArr.push(0)
} else {
this.spanArr.push(1)
this.pos = i
}
}
console.log(`第${i}次${this.spanArr}`)
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex]
const _col = _row > 0 ? 1 : 0
console.log(`rowspan:${_row} colspan:${_col}`)
return {
// [0,0] 表示这一行不显示, [2,1]表示行的合并数
rowspan: _row,
colspan: _col
}
}
}
}
}
</script>
效果图