效果如图:

代码如下

<!-- 查看选课 -->
<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() 一定要放到接口调用成功,表格数据赋值完毕之后在执行。

element合并单元格方法及遇到问题的解决办法的更多相关文章

  1. CSS 垂直外边距合并:规范、延伸、原理、解决办法

    <CSS 权威指南>第七章基本视觉格式化.p192,提到了 垂直外边距合并 的情况,解释总体算清晰,但是感觉不全且没有归纳成一条一条的,参考 CSS框模型中外边距(margin)折叠图文详 ...

  2. 表格单元格td设置宽度无效的解决办法 .

    http://zzstudy.offcn.com/archives/11366 在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置w ...

  3. vue引入fastclick设置输入框type="number"报错Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.的解决办法

    将输入框type设为text,通过正则验证输入的值

  4. vue项目中使用element的dialog中引入ztree却不能初始化解决办法

    一开始我在 里边写的,发现获取不到,那么采用dialog自带的回调函数,窗口打开后opend进行处理, 结果:

  5. 个人永久性免费-Excel催化剂功能第52波-相同内容批量合并单元格,取消合并单元格并填充内容

    在高级Excel用户群体中无比痛恨的合并单元格,在现实的表格中却阴魂不散的纠缠不断.今天Excel催化剂也来成为“帮凶”,制造更多的合并单元格.虽然开发出此功能,请使用过程中务必要保持节制,在可以称为 ...

  6. RDLC报表纵向合并单元格。

    在做RDLC报表时发现居然没有纵向合并单元格,震惊! 网上查了一些资料,有些方法很可爱,采用去除边框法,但是用这种方法如果要求文本属性居中的话那则达不到美观效果,还有些复杂一点的方法,我都没耐心看,然 ...

  7. 用NPOI创建Excel、合并单元格、设置单元格样式、边框的方法

    本篇文章小编为大家介绍,用NPOI创建Excel.合并单元格.设置单元格样式.边框的方法.需要的朋友参考下 今天在做项目中,遇到使用代码生成具有一定样式的Excel,找了很多资料,最后终于解决了,Ex ...

  8. layui table+复杂表头+合并单元格

    效果图: 问题:行hover效果感觉错乱  所以改为透明色 代码: <!DOCTYPE html> <html lang="en"> <head> ...

  9. C# 获取Excel中的合并单元格

    C# 获取Excel中的合并单元格 我们在制作表格时,有时经常需要合并及取消合并一些单元格.在取消合并单元格时需要逐个查找及取消,比较麻烦.这里分享一个简单的方法来识别Excel中的合并单元格,识别这 ...

随机推荐

  1. States of Integrity Constraints

    States of Integrity Constraints As part of constraint definition, you can specify how and when Oracl ...

  2. [下载]Oracle LOB字段编辑工具

    OraLobEditor 是Oracle LOB (CLOB, BLOB) 字段编辑工具. 查看.编辑LOB (CLOB, BLOB)字段(plain text, RTF, image, hex, h ...

  3. 介绍C++ STL常用模板使用方法的相关资料

    1.vector的几种初始化及赋值方式

  4. 对VC++的OO思考

    1. MFC借助C++的优势为Windows开发开辟了一片新天地,同时也借助 ApplicationWizzard使开发者摆脱离了那些每次都必写基本代码2. 借助ClassWizard和消息映射使开发 ...

  5. Makefile中用宏定义进行条件编译(gcc -D)/在Makefile中进行宏定义-D【转】

    本文转载自:http://blog.csdn.net/maopig/article/details/7230311 在源代码里面如果这样是定义的:#ifdef   MACRONAME//可选代码#en ...

  6. Floyed理解

    Floyed理解 Floyd算法的本质是动态规划,其转移方程为:f(k,i,j) = min( f(k-1,i,j), f(k-1,i,k)+f(k-1,k,j) ). f(k-1,i,j)表示经过前 ...

  7. [转载]linux上安装oracle

    原文地址:linux上安装oracle作者:天涯恨客 1.创建oinstall组 [root@xieqing ~]# groupadd oinstall 创建dba组 [root@xieqing ~] ...

  8. jQuery右键菜单contextMenu实例

    URL: http://www.cnblogs.com/whitewolf/archive/2011/09/28/2194795.html http://www.blogjava.net/superc ...

  9. 关于hexo博客自定义域名后gitment评论系统登陆出现redirect error返回主页的解决办法

    title: 关于hexo博客自定义域名后gitment评论系统登陆出现redirect error返回主页的解决办法 toc: false date: 2018-04-16 22:57:50 cat ...

  10. (转载)自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果

    自定义CoordinatorLayout的Behavior(2):实现淘宝和QQ ToolBar透明渐变效果 作者 小武站台 关注 2016.02.19 11:34 字数 1244 阅读 3885评论 ...