![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7aa3785825be1849effa7cf1a64eb0d0.png#pic_center)
<template>
<div>
<el-table
:data="tableData"
:span-method="cellMerge"
border
style="width: 100%; margin-top: 20px">
<el-table-column
prop="id"
label="序号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="记录时间">
</el-table-column>
<el-table-column
prop="amount1"
label="摄入能量">
</el-table-column>
<el-table-column
prop="amount2"
label="食物类型">
</el-table-column>
<el-table-column
prop="amount3"
label="食品名称">
</el-table-column>
</el-table>
</div>
</template>
<script>
import { log } from 'util';
export default {
data() {
return {
tableData: [{
id: '1',
name: '8点',
amount1: '1200千卡',
amount2: '早餐',
amount3: "鸡蛋"
}, {
id: '2',
name: '8点',
amount1: '1200千卡',
amount2: '早餐',
amount3: "西瓜"
}, {
id: '3',
name: '8点',
amount1: '1200千卡',
amount2: '早餐',
amount3: "葡萄"
}, {
id: '4',
name: '9点',
amount1: '40千卡',
amount2: '上午加餐',
amount3: "牛奶"
}, {
id: '5',
name: '10点',
amount1: '60千卡',
amount2: '午餐',
amount3: "米饭"
}, {
id: '6',
name: '11点',
amount1: '70千卡',
amount2: '下午加餐',
amount3: "牛奶"
}, {
id: '7',
name: '12点',
amount1: '40千卡',
amount2: '晚餐',
amount3: "蔬菜"
},{
id: '8',
name: '13点',
amount1: '80千卡',
amount2: '晚上加餐',
amount3: "汤"
}],
spanArr: [],
pos: '',
};
},
created(){
this.getSpanArr(this.tableData)
},
methods: {
getSpanArr(data) {
this.spanArr=[];
this.pos = 0;
for (var i = 0; i < data.length; i++) {
if (i === 0) {
this.spanArr.push(1);
this.pos = 0
} else {
if (data[i].amount2 === data[i - 1].amount2) {
this.spanArr[this.pos] += 1;
this.spanArr.push(0);
} else {
this.spanArr.push(1);
this.pos = i;
}
}
}
},
cellMerge({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 1 || columnIndex === 2 || columnIndex === 3) {
const _row = this.spanArr[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
}
},
};
</script>