注意：一定要按照合并列排序。
<body>
<div class="dashboard-container" id="order-app" v-loading="loading">
<div class="container" >
<!-- 搜索项 -->
<div class="tableBar">
<template>
<div>
<el-table :data='table' border fit :span-method="objectSpanMethod">
<el-table-column prop="checkRoom" label="检查房间"> </el-table-column>
<el-table-column prop="checkProject" label="检查项目"> </el-table-column>
<el-table-column prop="checkMoney" label="检查费用"> </el-table-column>
<el-table-column prop="attention" label="注意事项"> </el-table-column>
<el-table-column prop="appointmentTime" label="预约时间"> </el-table-column>
</el-table>
</div>
</template>
</div>
</div>
let vue1 = new Vue({
el: '#order-app',
data() {
return {
//表格数据
table: [{
id: '1',
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT',
checkMoney: '300.22',
attention: '检查前空腹',
appointmentTime: ''
}, {
id: '1',
checkRoom: 'DR',
checkProject: '颈椎MRICT22',
checkMoney: '340.22',
attention: '检查前空腹',
appointmentTime: '2019-5-29 10：30'
}, {
id: '2',
checkRoom: 'DR',
checkProject: '鼻骨',
checkMoney: '500.22',
attention: '检查前空腹',
appointmentTime: '2019-5-29 9：30'
}
,
{
id: '1',
checkRoom: 'CTROOM',
checkProject: '颈椎MRICT1',
checkMoney: '303.22',
attention: '检查前空腹',
appointmentTime: ''
},
],
}
},
created() {
// 给table赋值，重新遍历新增rowSpan属性，checkRoom，appointmentTime为table里面需要合并的属性名称，根据自己需要给表赋值
this.table = this.mergeTableRow(this.table, ['checkRoom'])
},
mounted() {
},
methods: {
objectSpanMethod({ row, column }) {
const span = column['property'] + '-span'
if (row[span]) {
return row[span]
}
},
mergeTableRow(data, merge) {
if (!merge || merge.length === 0) {
return data
}
merge.forEach((m) => {
const mList = {}
data = data.map((v, index) => {
const rowVal = v[m]
if (mList[rowVal]) {
mList[rowVal]++
data[index - (mList[rowVal] - 1)][m + '-span'].rowspan++
v[m + '-span'] = {
rowspan: 0,
colspan: 0
}
} else {
mList[rowVal] = 1
v[m + '-span'] = {
rowspan: 1,
colspan: 1
}
}
return v
})
})
return data
}
}
}
);
</script>
</body>