el-table列表相同内容合并
背景
项目中列表第一列是名称，需要实现的效果是相同名称的行合并，如图所示：
实现步骤
1.绘制el-table
按照常规的写法绘制一个表格，根据官方文档 element-ui 介绍编写表格合并规则方法。
代码示例中的 span-method
<el-table v-loading="listLoading" :data="list" :span-method="objectSpanMethod" >
<el-table-column prop="name" label="name" width="120"></el-table-column>
<el-table-column prop="Title" label="Title" width="120"></el-table-column>
<el-table-column prop="Pageviews" label="Pageviews" width="120" align="center"> </el-table-column>
<el-table-column prop="Status" label="Status" width="110"> </el-table-column>
<el-table-column prop="created_at" label="Display_time" width="200"></el-table-column>
</el-table>
2.编写合并方法
2.1 计算合并的行号
- 在data中定义全局变量indexArray 存储所有合并的行号；
- 通过传入行号及该行名称，遍及计算该行下方数据相同的行数
methods: {
getRows(rowIndex, name) {
let count = 0
for (let i = rowIndex; i < this.list.length; i++) {
if (this.list[i].name === name) {
count++
} else {
break
}
}
return count
}
}
2.2 计算合并行号数组indexArray。
在组件mounted构建时计算合并行号数组indexArray
let count = 0
for (let rowIndex = 0; rowIndex < this.list.length; ) {
this.indexArray.push(rowIndex)
count = this.getRows(rowIndex, this.list[rowIndex].name)
rowIndex += count
}
其中，list是整个table的数据来源
2.3 编写行号合并方法
当该行的rowIndex在合并行号数组中时返回合并行数据，否则返回空。
methods: {
objectSpanMethod({
row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
let rowCount = 0
if (this.indexArray.includes(rowIndex)) {
rowCount = this.getRows(rowIndex, row.name)
return {
rowspan: rowCount,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
（作者碎碎念）官网也是通过行号来控制合并，我一开始总是想用列表的属性值判断，但是每每都会陷入无限循环的困境，这种实现方式不算好，如果大佬有更好的实现方式欢迎评论，小弟不胜感激！！！
3.全部代码
项目代码不方便公开，这是我简化后的一个完整的实现代码：
<template>
<div class="app-container">
<el-table :data="list" :span-method="objectSpanMethod">
<el-table-column prop="name" label="name" width="120" />
<el-table-column prop="title" label="Title" width="120" />
<el-table-column prop="pageviews" label="Pageviews" width="120" />
<el-table-column prop="status" label="Status" width="110" />
<el-table-column prop="display_time" label="Display_time" width="200" />
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
list: [
{
name: '张三',
title: '文本一',
status: 'published',
display_time: '2023-07-14',
pageviews: 200
},
{
name: '李四',
title: '文本二',
status: 'published',
display_time: '2023-07-14',
pageviews: 200
},
{
name: '李四',
title: '文本三',
status: 'published',
display_time: '2023-07-14',
pageviews: 200
},
{
name: '王五',
title: '文本四',
status: 'published',
display_time: '2023-07-14',
pageviews: 200
},
{
name: '王五',
title: '文本五',
status: 'published',
display_time: '2023-07-14',
pageviews: 200
},
{
name: '王五',
title: '文本六',
status: 'published',
display_time: '2023-07-14',
pageviews: 200
}
],
indexArray: []
}
},
mounted() {
let count = 0
for (let rowIndex = 0; rowIndex < this.list.length; ) {
this.indexArray.push(rowIndex)
count = this.getRows(rowIndex, this.list[rowIndex].name)
rowIndex += count
}
},
methods: {
objectSpanMethod({
row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
let rowCount = 0
if (this.indexArray.includes(rowIndex)) {
rowCount = this.getRows(rowIndex, row.name)
return {
rowspan: rowCount,
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0
}
}
}
},
getRows(rowIndex, name) {
let count = 0
for (let i = rowIndex; i < this.list.length; i++) {
if (this.list[i].name === name) {
count++
} else {
break
}
}
return count
}
}
}
</script>