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 ...
随机推荐
- 使用日期插件用js处理日期格式
function compareDate(checkStartDate, checkEndDate) { var arys1= new Array(); var arys2= new Ar ...
- 0.2:Game and Art
文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 通过上一节的学习,我们对游戏美术和游戏开发已经有了比较基本的了解.那么,该 ...
- flutter 常用插件
audio_recorder: any #录音.播放 flutter_sound: ^1.1.5#录音 dropdown_menu: ^1.1.0#下拉菜单 simple_permissions:#权 ...
- 【题解】Luogu P2766 最长不下降子序列问题
原题传送门 实际还是比较套路的建图 先暴力dp一下反正数据很小 第一小问的答案即珂以求出数列的最长不下降子序列的长度s 考虑第二问如何做: 将每个点拆点 从前向后连一条流量为1的边 如果以它为终点的最 ...
- [c/c++] programming之路(16)、指针
一.调戏百度云管家 #include<stdlib.h> #include<windows.h> _declspec(dllexport) void go(){ ){ Shel ...
- 用python完成带有进度条的圆周率计算
代码如下:import math import time scale= s,m,=, print("执行开始".center(scale//2, "-")) s ...
- 请求headers处理
有时在请求一个网页内容时,发现无论通过GET或者是POST以及其他请求方式,都会出现403错误.这种现象多数是由于服务器拒绝了您的访问,那是因为这些网页为了防止恶意采集信息,所使用的反爬虫设置.此时可 ...
- Bumped!【最短路】(神坑
问题 B: Bumped! 时间限制: 1 Sec 内存限制: 128 MB 提交: 351 解决: 44 [提交] [状态] [命题人:admin] 题目描述 Peter returned fr ...
- (转载)Unity学习笔记:关于Dropdown的学习
今天组长让我写一个界面,其中用到了下拉条,我的印象还停留在以前的NGUI有现成的组件,但是uGUI没有的那阶段,组长跟我说uGUI现在也有了,研究了一下,发现real方便哦,今天就来简单说一下用法吧. ...
- 转载:如何搭建turn server 在centos7上。
https://www.cnblogs.com/idignew/p/7440048.html