效果如圖： 代碼如下 曾遇到的問題：element表格單元格合併時，合併列數據不顯示，數據錯位。 原因是，表格的數據還沒渲染完，合併的方法就執行了。解決辦法：this.rowspan() 一定要放到介面調用成功，表格數據賦值完畢之後在執行。 ...
效果如圖：
代碼如下
<!-- 查看選課 -->
<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() 一定要放到介面調用成功，表格數據賦值完畢之後在執行。
