效果如下:

首先:在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. Spring 的XML配置文件中提示的配置

    1.看图:2.关于web.xml配置文件提示(1)下载(保存)http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd文件.(2)在eclipse中 Window ...

  2. ChatGPT检测器开发者在知乎的文章,记录一下

    我们开发了第一款中英双语ChatGPT检测器,还有... - 蝈蝈的文章 - 知乎 https://zhuanlan.zhihu.com/p/598395917

  3. AcWing 839. 模拟堆 2022/5/30

    关键代码: void head_swap(int a, int b){ swap(ph[hp[a]], ph[hp[b]]); swap(hp[a], hp[b]); swap(h[a], h[b]) ...

  4. KingbaseES V8R3集群运维案例之---kingbase_monitor.sh启动”two master“案例

    案例说明: KingbaseES V8R3集群,执行kingbase_monitor.sh启动集群,出现"two master"节点的故障,启动集群失败:通过手工sys_ctl启动 ...

  5. kafka删除topic清空数据

    一般情况下,是不会删除数据的.到达一定时间后,kafka会自动删除.如果一定要删除可以删除topic在重建topic了 No. 1: 如果需要被删除topic 此时正在被程序 produce和cons ...

  6. python性能测试工具locust

    1.概述: 1.我们对目前比较流行的几款压测工具进行了调研.Jmeter与LoadRunner基于多线程实现并发,多线程由操作系统决定,由于上下文切换频繁.内核调度频繁,单台机器很难产生大量线程并发. ...

  7. 设置NTP校时

    设置NTP校时-作为客户端 @echo off rem 以管理员身份执行文件 rem 适用于域控PDC主机,对于未加域的计算机可直接使用Internet时间同步 rem 获取管理员权限 %1 msht ...

  8. 关于Salesforce存在至于项目的选择List的取值问题

    概要: 我们在做项目的时候,经常会遇到一个问题: 一个选择List字段的可选项被另一个选择List制约,这种情况如何在后台取得这两者的对应关系. 原文在这里(侵删): Apexで連動項目の選択肢を取得 ...

  9. maven静态资源过滤

    <resources> <resource> <directory>src/main/java</directory> <includes> ...

  10. 【git】3.1git分支-分支简介

    资料来源 (1) https://git-scm.com/book/zh/v2/Git-%E5%88%86%E6%94%AF-%E5%88%86%E6%94%AF%E7%AE%80%E4%BB%8B ...