我要评论效果如图：
代码如下
<!-- 查看选课 -->
<template>
<div>
<el-table
:data="listdata"
:span-method="objectspanmethod"
border
style="width: 100%; margin-top: 20px"
>
<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 ){
this.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() 一定要放到接口调用成功，表格数据赋值完毕之后在执行。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论