效果如图：
代码如下
<!-- 查看选课 -->
<template>
<div>
<el-table
:data="listData"
:span-method="objectSpanMethod"
border
>
<el-table-column
prop="team"
label="团队">
</el-table-column>
<el-table-column
prop="realName"
label="姓名">
</el-table-column>
<el-table-column
prop="courseId"
label="课程编号">
</el-table-column>
<el-table-column
prop="courseName"
label="课程名称">
</el-table-column>
<el-table-column
prop="description"
label="课程简介">
</el-table-column>
<el-table-column
prop="trainingType"
label="形式">
</el-table-column>
<el-table-column
prop="trainingTime"
label="开课时间">
</el-table-column>
<el-table-column
prop="trainingDays"
label="时长">
</el-table-column>
<el-table-column
prop="courseType"
label="类型">
<template slot-scope="scope">
<span v-if="scope.row.courseType === 0">待审批</span>
<span v-else-if="scope.row.courseType === 1">已审批</span>
<span v-else-if="scope.row.courseType === 2">退回重选</span>
<span v-else>取消重选</span>
</template>
</el-table-column>
<el-table-column
prop="approvalStatus"
label="审批状态">
<template slot-scope="scope">
<span v-if="scope.row.approvalStatus === 0">待审批</span>
<span v-else-if="scope.row.approvalStatus === 1">已审批</span>
<span v-else-if="scope.row.approvalStatus === 2">退回重选</span>
<span v-else>取消重选</span>
</template>
</el-table-column>
</el-table>
<el-pagination
@size-change="sizeChangeHandle"
@current-change="currentChangeHandle"
:current-page="pageIndex"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</template>
<script>
export default {
name: "",
data() { return {
pageIndex: 1,
pageSize: 10,
totalPage: 0,
dataListLoading: false,
dataForm: {},
listData: [],
rowList: [],
spanArr: [],
formLabelWidth: '90px',
roleType: 'bumen' // 角色，是团队负责人还是部门负责人 }
},
methods: { // 每页数
sizeChangeHandle (val) {
this.pageSize = val
this.pageIndex = 1
this.getDataList()
}, // 当前页
currentChangeHandle (val) {
this.pageIndex = val
this.getDataList()
}, // 获取数据列表
getDataList(){//查询操作
this.dataListLoading = true
this.$http({
url: this.$http.adornUrl('/courseselect/emptraining/getLeaderSelectCourses'),
method: 'get',
params: this.$http.adornParams({
'page': this.pageIndex,
'limit': this.pageSize,
})
}).then(({data}) => {
if (data && data.code === 0) {
this.listData = data.data.list
this.totalPage = data.data.totalCount
this.roleType = data.leaderType === 1 ? 'bumen' : 'tuandui'
this.rowspan()
} else {
this.listData = []
this.totalPage = 0
}
this.dataListLoading = false
})
},
rowspan() {
this.listData.forEach((item,index) => {
if( index === 0){
this.spanArr.push(1);
this.position = 0;
}else{
if(this.listData[index].type === this.listData[index-1].type ){
t
his.spanArr[this.position] += 1;
this.spanArr.push(0);
}else{
this.spanArr.push(1);
this.position = index;
}
}
})
},
objectSpanMethod({ row, column, rowIndex, columnIndex }) { //表格合并行
console.log(this.roleType)
if (this.roleType === 'bumen'){
if (columnIndex === 0) {
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
if(columnIndex === 1){ //合并第三列 内容相同的
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
}else {
if( columnIndex === 0){ //合并第三列 内容相同的
const _row = this.spanArr[rowIndex];
const _col = _row>0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
}
},
},
mounted() {
this.getDataList();
}
}</script>
<style scoped>
</style>曾遇到的问题：element表格单元格合并时，合并列数据不显示，数据错位。
原因是，表格的数据还没渲染完，合并的方法就执行了。解决办法：this.rowspan() 一定要放到接口调用成功，表格数据赋值完毕之后在执行。
作者：DFrain
原文链接：https://www.cnblogs.com/wenrain/p/10456940.html