不多逼逼,上代码!
<template>
<div class="app-container">
<el-table :data="tableData" border :span-method="objectSpanMethod">
<el-table-column prop="phone" align="center" label="号码"> </el-table-column>
<el-table-column prop="reportName" align="center" label="报告名称"> </el-table-column>
<el-table-column prop="reason" align="center" label="原因"> </el-table-column>
<el-table-column prop="result" align="center" label="发送结果"> </el-table-column>
<el-table-column prop="sendTime" align="center" label="发送时间"> </el-table-column>
<el-table-column prop="returnTime" align="center" label="收到回执的时间"> </el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {
// 表格数据
tableData: [
{
phone: "12987122",
reportName: "报告1",
reason: "文件缺失",
result: "发送成功",
sendTime: "2022-9-16 10:36:55",
returnTime: "2022-9-16 10:36:55",
},
{
phone: "12987122",
reportName: "报告2",
reason: "文件缺失",
result: "发送成功",
sendTime: "2022-9-16 10:36:55",
returnTime: "2022-9-16 10:36:55",
},
{
phone: "",
reportName: "报告3",
reason: "号码缺失",
result: "发送成功",
sendTime: "2022-9-16 10:36:55",
returnTime: "2022-9-16 10:36:55",
},
{
phone: "",
reportName: "报告4",
reason: "号码缺失",
result: "发送成功",
sendTime: "2022-9-16 10:36:55",
returnTime: "2022-9-16 10:36:55",
},
{
phone: "12987126",
reportName: "报告5",
reason: "文件缺失",
result: "发送成功",
sendTime: "2022-9-16 10:36:55",
returnTime: "2022-9-16 10:36:55",
},
],
// 合并源对象
mergeObj: {},
// 合并字段
mergeArr: ["phone", "reason", "result", "sendTime", "returnTime"],
};
},
mounted() {
this.rowspan();
},
methods: {
rowspan() {
for (let key of this.mergeArr) {
let count = 0;
this.mergeObj[key] = [];
this.tableData.forEach((item, index) => {
if (index === 0) {
this.mergeObj[key].push(1);
} else {
// 若想要根据某个字段划分界限,则在下方条件后加上条件即可,例如:”item[key] === this.tableData[index - 1][key] && item.phone === this.tableData[index - 1].phone“
if (item[key] === this.tableData[index - 1][key]) {
this.mergeObj[key][count] += 1;
this.mergeObj[key].push(0);
} else {
count = index;
this.mergeObj[key].push(1);
}
}
});
}
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (this.mergeArr.indexOf(column.property) !== -1) {
if (this.mergeObj[column.property][rowIndex]) {
return {
rowspan: this.mergeObj[column.property][rowIndex],
colspan: 1,
};
} else {
return {
rowspan: 0,
colspan: 0,
};
}
} else {
return {
rowspan: 1,
colspan: 1,
};
}
},
},
};
</script>
复制运行即可查看demo,请根据自己的需求进行修改,授人以鱼不如授人以渔。