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 ...
随机推荐
- Fast Matrix Calculation HDU - 4965
One day, Alice and Bob felt bored again, Bob knows Alice is a girl who loves math and is just learni ...
- Java笔记 #05# Java Native Interface
参考资料:http://www.ntu.edu.sg/home/ehchua/programming/java/javanativeinterface.html(很详细) 看jdk源代码时,经常会看到 ...
- php在cli模式下取得命令行中的参数的方法-getopt命令行可传递数组-简单自定义方法取命令行参数
在cli模式下执行PHP时,自动给脚本文件传递了一个变量$argv,其值即是一个命令中所有值组成的数组(以空格区分),在PHP程序中接收参数有3种方法1.直接使用argv变量数组. 2.使用$_SER ...
- 【题解】Luogu P2763 试题库问题
原题传送门 这题很简单啊 从源点向k类题目分别连流量为所需数量的边 从每道题向汇点连一条流量为1的边(每题只能用1次) 从类型向对应的题目连一条流量为1的边 跑一遍最大流 如果最大流小于所需题目数量, ...
- A Summary of Multi-task Learning
A Summary of Multi-task Learning author by Yubo Feng. Intro In this paper[0], the introduction of mu ...
- Hadoop之简单文件读写
文件简单写操作: import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.FSDataOutputStream ...
- 页面Vue
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- MongoDB基本操作(包括插入、修改、子节点排序等)
一.基本操作 1.新增文章 db.article.insert({title:"今天天气很好",content:"我们一起去春游",_id:1}) 2.新增一条 ...
- [Java] int 转换为BigDecimal
new BigDecimal(int i); BigDecimal.parseBigDecimal(String.valueOf(int i));
- Python自学:第二章 注释
#向大家问好 print("Hello Python People") 输出为 Hello Python People