element ui表格相同内容自动合并
一开始觉得合并单元格很困难,什么鬼,后来仔细查看api,发现是可以实现的,特此记录下,直接看代码,
项目需求是第一列和第二列还有第16列需要相同内容进行合并,所以判断条件是不同的;
实现后效果如下:

<el-table
:data="tableDataOne"
style="width: 100%"
:span-method="objectOneMethod">
</el-table>
methods:{
let spanOneArr = [],
spanTwoArr = [],
concatOne = 0,
concatTwo = 0;
tableData.forEach((item,index)=>{
if(index === 0){
spanOneArr.push(1);
spanTwoArr.push(1);
}else{
if(item.topic === tableData[index - 1].topic){ //第一列需合并相同内容的判断条件
spanOneArr[concatOne] += 1;
spanOneArr.push(0);
}else{
spanOneArr.push(1);
concatOne = index;
};
if(item.name === tableData[index - 1].name){//第二列和第16列需合并相同内容的判断条件
spanTwoArr[concatTwo] += 1;
spanTwoArr.push(0);
}else{
spanTwoArr.push(1);
concatTwo = index;
};
}
});
return {
one: spanOneArr,
two: spanTwoArr
}
},
objectOneMethod({ row, column, rowIndex, columnIndex }) {
if(columnIndex === 0 ) {
const _row = (this.setTable(this.tableDataOne).one)[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
if(columnIndex === 1 || columnIndex === 15) {
const _row = (this.setTable(this.tableDataOne).two)[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
};
}
},
};
希望能帮到有需要的童鞋们;
element ui表格相同内容自动合并的更多相关文章
- element ui 表格提交时获取所有选中的checkbox的数据
<el-table ref="multipleTable" :data="appList" @selection-change="changeF ...
- vue2.0+Element UI 表格前端分页和后端分页
之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...
- vue + element ui 表格自定义表头,提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- element UI表格行高、padding等设置报错问题
element UI里面表格的行高需要自己调整高度和设置padding,直接写style是不行的,里面有 : 1.row-style (行的 style) 2.header-row-styl (表 ...
- element ui表格常用功能如:导出 新增 删除 多选 跨页多选 固定表头 多级表头 合并行列 等常见需求
<template> <div class="table-cooperte"> <el-table :data="tableData&quo ...
- 如何使excel表格的内容自动添加前缀
一.假设是要在一列的单元格内容前加上固定的内容,则 方法一在原单元格实现,分两种情况 如果原单元格的内容是数字内容,要在原数字前添加"ABC"这样的前缀则选中这些单元格----右键 ...
- element ui表格表头顺序错乱的问题
因为在项目中两个表格共用了同一个组件, 但由于表头不完全相同, 就通过v-if来控制表头的显示隐藏,没想到造成了表头顺序的错乱, 经过多方查找资料,最后找到了解决方法: 即为每一列el-table-c ...
随机推荐
- 禁止chrome浏览器的缓冲图片以及css等资源文件
今天做了一个动画的效果,在ff下正常 但是到了谷歌下就不正常了,非常郁闷,看了下是缓存的问题 ,于是度娘了一下发现清理缓存的技巧还是满多的,这里借鉴一下别人的总结,人的大脑有限,下次忘记的时候还可以在 ...
- APScheduler(Python化的Cron)使用总结 定时任务
APScheduler(Python化的Cron)使用总结 简介 APScheduler全程为Advanced Python Scheduler,是一款轻量级的Python任务调度框架.它允许你像Cr ...
- 浅析Tomcat、JBOSS、WebSphere、WebLogic、Apache
做任何web项目,都离不开服务器,有钱的公司用WebSphere.WebLogic,没钱公司用nginx+tomcat,不要小瞧nginx+tomcat麻雀虽小,五脏俱全. 服务器的知识,在笔试.面试 ...
- Windows Server 2008 R2 下载地址
以下资源均来自微软 MSDN,是原汁原味的原版系统资源,值得系统爱好者收藏.以下多数链接是 ed2k 链接,推荐使用国外开源的 eMule 下载,亦可使用迅雷,但使用 eMule 更有利于共享资源. ...
- C++ 将 std::string 转换为 char*
参考: std::string to char* C++ 将 std::string 转换为 char* 目前没有直接进行转换的方法.必须通过string对象的c_str()方法,获取C-style的 ...
- Listview自定义了子View导致listview的onitemclick事件无效
原因是子View的点击事件抢占了listview的点击事件 解决办法: 1. 子View根布局 设置 android:descendantFocusability="blocksDescen ...
- IOS 下载app
---------------------------------------------------------------------------------------------------- ...
- EL函数库及用法
导入标签库: <%@ tablib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%&g ...
- activiti 快速入门--组任务(candidate users)分配(6)
http://blog.csdn.net/u011320740/article/details/53018040
- xlwt 写sheet xls 文件
import xlwtworkbook = xlwt.Workbook()#创建bookworksheet = workbook.add_sheet('My Sheet') #添加sheet#背景色的 ...