一开始觉得合并单元格很困难,什么鬼,后来仔细查看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表格相同内容自动合并的更多相关文章

  1. element ui 表格提交时获取所有选中的checkbox的数据

    <el-table ref="multipleTable" :data="appList" @selection-change="changeF ...

  2. vue2.0+Element UI 表格前端分页和后端分页

    之前写过一篇博客,当时对element ui框架还不太了解,分页组件用 html + css 自己写的,比较麻烦,而且只提到了后端分页 (见 https://www.cnblogs.com/zdd20 ...

  3. vue + element ui 表格自定义表头,提供线上demo

    前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...

  4. 封装一个优雅的element ui表格组件

    现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...

  5. Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能

    业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...

  6. element UI表格行高、padding等设置报错问题

    element UI里面表格的行高需要自己调整高度和设置padding,直接写style是不行的,里面有 : 1.row-style (行的 style) 2.header-row-styl   (表 ...

  7. element ui表格常用功能如:导出 新增 删除 多选 跨页多选 固定表头 多级表头 合并行列 等常见需求

    <template> <div class="table-cooperte"> <el-table :data="tableData&quo ...

  8. 如何使excel表格的内容自动添加前缀

    一.假设是要在一列的单元格内容前加上固定的内容,则 方法一在原单元格实现,分两种情况 如果原单元格的内容是数字内容,要在原数字前添加"ABC"这样的前缀则选中这些单元格----右键 ...

  9. element ui表格表头顺序错乱的问题

    因为在项目中两个表格共用了同一个组件, 但由于表头不完全相同, 就通过v-if来控制表头的显示隐藏,没想到造成了表头顺序的错乱, 经过多方查找资料,最后找到了解决方法: 即为每一列el-table-c ...

随机推荐

  1. P2472 [SCOI2007]蜥蜴(网络流)

    P2472 [SCOI2007]蜥蜴 把每个点拆成2个点,两点之间连边的边权为石柱高度 新建虚拟源点$S$和汇点$T$ $S$向所有有蜥蜴的点连边,边权1 其他边都连$inf$ 剩下就是裸的$dini ...

  2. Docker Kubernetes 容器更新与回滚

    Docker Kubernetes 容器更新与回滚 环境: 系统:Centos 7.4 x64 Docker版本:18.09.0 Kubernetes版本:v1.8 管理节点:192.168.1.79 ...

  3. Docker Kubernetes Volume 本地数据卷

    Docker Kubernetes Volume 本地数据卷 emptyDir 当Pod分配到Node时,首先创建一个空卷,并挂载到Pod中的容器. Pod中的容器可以读取和写入卷中的文件. 当Pod ...

  4. 自制操作系统Antz(1)——Boot Sector

    0.引子 最近在看操作系统底层方面的东西,最开始的为什么是07c00h这个问题就让我对操作系统有了很大的兴趣.所以准备在看书之余顺便写一个操作系统(Anz).至于为什么这个系统会被叫做Antz,可以参 ...

  5. SQLServer 对已有数据表添加自增主键

    最近在做老表的数据整理,发现有的表没有主键标识,.NET Core 无法一键生成模型,需要带有主键的表才可以,所以需要针对已有数据添加主键,这是我找到的两种方式. 1. 主键为int 或者bigint ...

  6. Ngnix配置

    server { listen 80; server_name www.local.test; root /data/workspace;  index index.php index.html in ...

  7. Nginx教程--02.Nginx虚拟主机的配置

    1.Nginx虚拟主机的配置 1.1 在conf目录下,使用命令 : vim nginx.conf 对上图解释: //全局区 worker _processes 1; //表示当前有1个工作的子进程, ...

  8. 经典排序js实现

    https://www.cnblogs.com/onepixel/articles/7674659.html

  9. Failed to auto-configure a DataSource: 'spring.datasource.url' is not specified and no embedded datasource could be auto-configured.

    从报错信息中,我们就可以分析出错误原因是触发了数据源的自动化配置,然而当前项目其实并不需要数据源.查其根源是依赖方提供的API依赖中引用了一些多余的依赖触发了该自动化配置的加载. 如何解决 为了解决上 ...

  10. VR外包—长年承接虚拟现实项目和AR外包游戏、软件(北京动点飞扬软件)

    VR外包AR外包公司(虚拟现实外包公司)承接虚拟现实项目开发(企业.教育.游戏) 可公对公签正规合同,开发票. 我们是北京的公司.专业团队,成员为专业 VR/AR 产品公司一线开发人员,有大型产品开发 ...