element合并单元格方法及遇到问题的解决办法
效果如图:
代码如下
<!-- 查看选课 --> <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() 一定要放到接口调用成功,表格数据赋值完毕之后在执行。