效果如下:

首先:在table上加:span-method="spanMethod"

其次:

methods中加两个方法

dataPretreatment() {
//表格数据列合并预处理,生成一个与行数相同的数组记录每一行设置的合并数
// 如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;
// 如果不是第一条记录,则判断它与前一条记录是否相等,如果相等,
// 则向mergingRows中添入元素0,并将前一位元素+1,表示合并行数+1,
// 以此往复,得到所有行的合并数,0即表示该行不显示。
for (let i = 0; i < this.tableData.length; i++) { // tabledata 表格数据源
if (i === 0) {
this.mergingRows.push(1)
this.mergingPos = 0
} else {
if (this.tableData[i].level === this.tableData[i - 1].level) { //哪些数据是要合并的 合并的条件是什么
this.mergingRows[this.mergingPos] += 1
this.mergingRows.push(0)
} else {
this.mergingRows.push(1)
this.mergingPos = i
}
}
}
},
spanMethod({row,column,rowIndex,columnIndex}) {
if (columnIndex === 0) { //第一列
const _row = this.mergingRows[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},

最后在created中调用 dataPretreatment() 方法。

结。

												

elementUI table 第一列值相等合并的更多相关文章

  1. Mysql 如何实现列值的合并

    Mysql 如何实现列值的合并 SELECT  GROUP_CONCAT(name SEPARATOR ' ') AS name FROM A

  2. data.frame类型数据如何将第一列值替换为行号

    data.frame类型数据如何将第一列值替换为行号 row.names(data) <- data[, 1]data <- data[, -1]

  3. 使用css固定table第一列

    .table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: c ...

  4. jQuery取得循环列表的第一列值

    有例如以下的表格: <table class="list_tab" id="personalDetail"> <tr class=" ...

  5. css table第一列 宽度

    table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的 ...

  6. js合并table指定列

    function MergeTableCell(tableId, startRow, endRow, col) { var tb = document.getElementById(tableId); ...

  7. excel转化为table(去掉所有列值都为空的值一行,即返回有效值的DataTable)

    /// <summary> /// 去掉所有列值都为空的值一行,即返回有效值的DataTable /// </summary> /// <param name=" ...

  8. jQuery获取Table某列的值

    在写此篇博文时,发现在以前曾写过<获取DataTable选择第一行某一列值>http://www.cnblogs.com/insus/p/5434062.html . 但是与此篇所说的完全 ...

  9. 获取DataTable选择第一行某一列值

    数据源是一个DataTable,现在我们需要获取这个DataTable的第一行第一列的值.先准备一个数据集,创建一个DataTable,并填充数据: source code: using System ...

  10. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

随机推荐

  1. jemter 分布式压测

    1.测试机搭建 首选 压力机A,压力机B,压力机C, 压力机A作为控制台 压力机B,压力机C作为分布式的测试机 压力机Aip:172.16.23.69, 压力机Bip:192.168.184.128 ...

  2. solve--ifconifg命令提示没有该命令解决方法

    一.如果你/bin目录下有ifconfig,则是命令路径没有在环境变量中添加,很多新装的linux系统都会存在这种问题   打开/etc/profile文件            命令: vi /et ...

  3. 基于Nginx上的docker负载均衡

    1.首先需要拖拽镜像文件   docker  pull nginx 2.生成多个docker容器 docker run --name demo1 -d -p 8081:80 -v /data/demo ...

  4. 【转载】Adobe Acrobat XI Pro闪退原因及解决办法

    https://www.cnblogs.com/zohoo/p/12704689.html https://www.cnblogs.com/zohoo/p/12704689.html

  5. 【java】MVC模式和三层架构

    MVC是一种分层开发的模式 M:Model,业务模型,处理业务,存储数据,获取数据.JavaBean对象 V:  View , 视图,界面展示,展示数据.JSP或HTML C: Controller, ...

  6. Array方法学习总结

    Array 对象支持在 单个变量名下存储多个元素. Array方法: 在遍历多个元素的方法中,下面的方法在访问索引之前执行in检查,并且不将空槽与undefined合并:concat() 返回一个新数 ...

  7. mysql去重保留1条记录

    delete from `wuye` where wuye_id in ( select * from ( select wuye_id from `wuye` where wuye_name in ...

  8. OV5640数据的解码

    为了配合开发板的使用,笔者搞了一个OV5640的摄像头模组,OV5640具体的相关手册及资料网上已经很多,感兴趣的都可以自行去查找,基本大同小异.这里也不把OV5640初始化的代码贴出来,因为就是简单 ...

  9. (转) IIS隐藏响应头信息

    先安装url-rewrite组件 http://www.iis.net/downloads/microsoft/url-rewrite 修改应用根目录下的Web.config配置文件 <conf ...

  10. (转载)Overlay网络

    1. Overlay 网络1.1 Overlay 技术概述    Overlay 在网络技术领域,指的是一种网络架构上叠加的虚拟化技术模式,其大体框架是对基础网络不进行大规模修改的条件下,实现应用在网 ...