如果相邻数据是一致的,则单元格的行合并,指定需要合并的列,下面我是指定合并了分类和类型这两列。
先看效果
Element UI为我们的
<el-table>
提供了一个属性span-method
:合并行或列的计算方法
下面是一个示例:
html部分 - 主要是在表上指定span-method
方法
<template>
<div>
<el-table :span-method="objectSpanMethod" :data="tableData" row-key="id" border>
<el-table-column label="序号" width="55" align="center">
<template slot-scope="scope">{{ scope.$index + 1 }}</template>
</el-table-column>
<el-table-column prop="name" label="分类" align="center"></el-table-column>
<el-table-column prop="num" label="数量" align="center"></el-table-column>
<el-table-column prop="type" label="类型" align="center"></el-table-column>
</el-table>
</div>
</template>
data部分 - 表格数据
data() {
return {
tableData: [{
name: '咖啡',
num: '2',
type: '饮料'
},
{
name: '咖啡',
num: '5',
type: '饮料',
}, {
name: '巧克力',
num: '2',
type: '高热量食品',
}, {
name: '巧克力',
num: '2',
type: '高热量食品',
}, {
name: '巧克力',
num: '2',
type: '高热量食品',
}, {
name: '牛奶',
num: '2',
type: '蛋白质',
}]
}
}
methods部分 - span-method
方法,行合并的逻辑
methods: {
// table合并列
objectSpanMethod({row, column, rowIndex, columnIndex}) {
let data = this.tableData; // 拿到当前table中的数据
let cellValue = row[column.property]; // 获取当前位置的值
let sortArr = ['name', 'type']; // 需要合并的字段(用于合并行的属性)
if (cellValue && sortArr.includes(column.property)) {
let prevRow = data[rowIndex - 1]; // 获取上一行的数据
let nextRow = data[rowIndex + 1]; // 获取下一行的数据
if (prevRow && prevRow[column.property] === cellValue) { // 当有上一行的数据,并且与当前值相等时
return {rowspan: 0, colspan: 0}; // 返回一个对象,表示不需要合并单元格
} else {
let countRowspan = 1;
while (nextRow && nextRow[column.property] === cellValue) { // 当有下一行的数据并且与当前值相等时,获取新的下一行数据
nextRow = data[++countRowspan + rowIndex];
}
if (countRowspan > 1) {
return {rowspan: countRowspan, colspan: 1}; // 返回一个对象,表示需要合并行单元格
}
}
}
},
}