页面实现行合并的情况还是比较常见的,但实现起来却有一点点难。官网的例子有,不过人家的合并逻辑是从第一行开始两行两行合并,不能根据数据动态合并,感觉参考意义不太大。实际需求一般都是根据表数据动态来进行合并的,也会有更复杂的情况,比如循环表格的。
以下的例子中,表格数据是放在页面的假数据,hbxh 值相同时,表示需要合并
示例一:单个表格
单个表格的比较简单,知道合并方法的使用基本就好弄了
<template>
<div>
<el-form
ref="testForm"
:model="testForm"
style="height: 600px;"
>
<el-row
style="padding: 10px"
>
<el-table
:data="testForm.tableData"
:span-method="colSpanMethod"
border
style="width: 100%;"
>
<el-table-column prop="hbxh" label="合并序号" width="100" />
<el-table-column prop="name" label="姓名" width="180" />
<el-table-column prop="address" label="地址" />
</el-table>
</el-row>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
spanArr: [], // 用于存放每一行记录的合并数
testForm: {
tableData: [
{
hbxh: '1',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
hbxh: '2',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
hbxh: '3',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}, {
hbxh: '4',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
] // 测试数据
},
}
},
created() {
this.getSpanArr(this.testForm.tableData)
},
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].hbxh === data[i - 1].hbxh)