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 ...
随机推荐
- Spring笔记 #02# 利用切面和注解校验方法参数
例子还是之前的例子.仍然是对mage进行法术攻击时的咒语进行校验,不过略微提高了扩展性. 应用示例 1.在.properties文件中定义参数格式(正则): sp1=^\\D*hello\\D*$ s ...
- ESP8266使用笔记之常用固件
开发板使用的是NodeMCU开发板: 目录 1.学习使用ESP8266官方的SDK 1.1使用SDK提供的AT固件 1.2使用SDK Build固件 2.学习使用Nod ...
- maven 执行testng.xml文件失败解决问题
在pom.xml中配置了testng的依赖后,在surefire-plugin中又配置了suitexmlfiles指向testng.xml文件,但是使用mvn test运行时,没有运行testng.x ...
- python 基础知识点一
基础数据类型初始. 数字:int 12,3,45 + - * / ** int: bit_lenth()转化为2进制的最小位数. % 取余数 ps:type() 字符串转化成数字:int(str ...
- 【笔记】Cocos2dx学习笔记
自建场景类 自建场景类BaseScene继承与Scene类,在init函数中添加了默认的,键盘与鼠标事件的响应,添加了一个用于读取XML文件的字典,添加了一个结束场景的方法. 类的声明代码如下: #i ...
- Bioconductor软件安装与升级
1 安装工具Bioc的软件包不能使用直接install.packages函数,它有自己的安装工具,使用下面的代码: source("https://bioconductor.org/bioc ...
- vue--数据显示模版上
首先需要知道 挂载点:是index.html文件下的一个dom节点 模板:挂载点里的内容,也就是模板内容. 组件: 页面上的某一部分内容.当我们的项目比较大时,可以将页面拆分成几个部分,每个部分就是一 ...
- 调研IOS的开发环境的发展演变
一. 关于IOS的开发发展历史: 百度一下,关于这方面的详细资料有很多,在这里就不复制粘贴占用篇幅了. 二. 关于个人搭建IOS开发环境的体验: 本人用的是华硕电脑,window7的操作系统,本来为了 ...
- ubuntun 18.04 安装google浏览器
---恢复内容开始--- 一:下载谷歌浏览器镜像源 sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/ap ...
- postman设置token关联参数,其他接口直接读取token变量
问题描述:有一个登录接口获取token,其他接口再次访问时都要带上token 解决方案: 步骤一:在登录接口访问后设置postman的环境变量,例如设置环境变量名:token,值为登录接口访问成功后, ...