效果图
<template>
<el-table :data="scheduleList" :span-method="objectSpanMethod" border>
<el-table-column prop="date" label="时间" width="200" />
<el-table-column prop="journey" label="行程" width="600" />
<el-table-column prop="lecturer" label="讲师" />
</el-table>
</template>
<script>
export default {
data() {
return {
scheduleList: [
{
date: "第一天",
journey: "报道",
lecturer: "",
},
{
date: "第二天",
journey: "企业生产安全应急预案数字化推演及复盘",
lecturer: "国家危化品应急救援基地--林俊",
},
{
date: "第三天",
journey: "火灾应急处置",
lecturer: "国家危化品应急救援基地—张学军",
},
{
date: "第三天",
journey: "中毒窒息事故应急处置",
lecturer: "中化岙山事故应急处置师资",
},
{
date: "第四天",
journey: "人员触电事故应急处置",
lecturer: "中化岙山事故应急处置师资",
},
{
date: "第四天",
journey: "泄漏事故应急处置",
lecturer: "中化岙山事故应急处置师资",
},
{
date: "第四天",
journey: "问题交流",
lecturer: "中化岙山事故应急处置师资",
},
{
date: "第五天",
journey: "受限空间作业管理",
lecturer: "中化岙山危险作业内训师",
},
{
date: "第五天",
journey: "高处作业管理",
lecturer: "中化岙山危险作业内训师",
},
{
date: "第五天",
journey: "动火作业管理",
lecturer: "中化岙山危险作业内训师",
},
{
date: "第五天",
journey: "临时用电作业管理",
lecturer: "中化岙山危险作业内训师",
},
{
date: "第五天",
journey: "问题交流与讨论",
lecturer: "中化岙山危险作业内训师",
},
{
date: "第六天",
journey: "回城",
lecturer: "",
},
],
rowIndex: "-1",
orderIndexArr: [],
};
},
methods: {
// 获取相同编号的数组
getOrderNumber() {
const orderObj = {}
this.scheduleList.forEach((item, index) => {
item.rowIndex = index
if (orderObj[item.date]) {
orderObj[item.date].push(index)
} else {
orderObj[item.date] = [];
orderObj[item.date].push(index)
}
})
// 将数组长度大于1的值 存储到this.orderIndexArr(也就是需要合并的项)
Object.keys(orderObj).forEach((key) => {
if (orderObj[key].length > 1) {
this.orderIndexArr.push(orderObj[key])
}
});
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
for (let i = 0; i < this.orderIndexArr.length; i += 1) {
let element = this.orderIndexArr[i];
for (let j = 0; j < element.length; j += 1) {
let item = element[j];
if (rowIndex === item) {
if (j === 0) {
return {
rowspan: element.length,
colspan: 1
}
}
if (j !== 0) {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
}
},
},
mounted() {
this.getOrderNumber()
}
}
</script>