效果如图:

代码如下

<!-- 查看选课 -->
<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. [bzoj3123][Sdoi2013]森林_主席树_启发式合并

    森林 bzoj-3123 Sdoi-2013 题目大意:给定一片共n个点的森林,T个操作,支持:连接两个不在一棵树上的两个点:查询一棵树上路径k小值. 注释:$1\le n,T \le 8\cdot ...

  2. Hive教程(1)

    1. 介绍 Apache Hive可以使用SQL来读,写,管理分布式存储的大数据集,结构可以投射到已经存储的数据上,命令行工具和JDBC驱动可以让用户连接到Hive. 2. 安装和配置 你可以下载Hi ...

  3. Maven错误:[ERROR] No compiler is provided in this environment. Perhaps you are running on a JRE rather than a JDK?的解决方法

    错误: [ERROR] No compiler is provided in this environment. Perhaps you are running on a JRE rather tha ...

  4. iOS 8 中 UIAlertView 和 UIActionSheet 河里去了?

    iOS 8 中 UIAlertView 和 UIActionSheet 河里去了? 太阳火神的漂亮人生 (http://blog.csdn.net/opengl_es) 本文遵循"署名-非商 ...

  5. LeetCode(1) Symmetric Tree

    从简单的道题目開始刷题目: Symmetric Tree 题目:Given a binary tree, check whether it is a mirror of itself (ie, sym ...

  6. 去哪网实习总结:JavaWeb配置404页面(JavaWeb)

    本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发. .. 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果... 实习立即就要结束了,总结一下几点之前没有注意过的变成习惯和问题.分享 ...

  7. 【五】注入框架RoboGuice使用:(Your First POJO Injection)

    上一篇我们简单的介绍了一下RoboGuice的使用([四]注入框架RoboGuice使用:(Your First System Service Injection)),今天我们来看下普通Java对象的 ...

  8. hdoj--5620--KK's Steel(斐波那契数)

    KK's Steel Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Total ...

  9. javaBean为什么要implements Serializable

    转自:https://www.cnblogs.com/jqlbj/p/6261592.html 一个对象序列化的接口,一个类只有实现了Serializable接口,它的对象才是可序列化的.因此如果要序 ...

  10. [Javascript] 5个最佳的Javascript日期处理类库

    在大家日常网站开发和web应用开发中,我们往往需要有效的调用Javascript处理日期和时间格式相关的函数,在Javascript中已经包含了部分最基本的内建处理方法. 在大家日常网站开发和web应 ...