elementUI table 第一列值相等合并
效果如下:

首先:在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 第一列值相等合并的更多相关文章
- Mysql 如何实现列值的合并
Mysql 如何实现列值的合并 SELECT GROUP_CONCAT(name SEPARATOR ' ') AS name FROM A
- data.frame类型数据如何将第一列值替换为行号
data.frame类型数据如何将第一列值替换为行号 row.names(data) <- data[, 1]data <- data[, -1]
- 使用css固定table第一列
.table{width:100%;overflow-x: scroll;background-color:#7c95b5;} .fixedTable{width:160%;text-align: c ...
- jQuery取得循环列表的第一列值
有例如以下的表格: <table class="list_tab" id="personalDetail"> <tr class=" ...
- css table第一列 宽度
table{table-layout:fixed;}table tr td:first-child,table tr td:first-child{width:120px;} 首行第一个td定宽同列的 ...
- js合并table指定列
function MergeTableCell(tableId, startRow, endRow, col) { var tb = document.getElementById(tableId); ...
- excel转化为table(去掉所有列值都为空的值一行,即返回有效值的DataTable)
/// <summary> /// 去掉所有列值都为空的值一行,即返回有效值的DataTable /// </summary> /// <param name=" ...
- jQuery获取Table某列的值
在写此篇博文时,发现在以前曾写过<获取DataTable选择第一行某一列值>http://www.cnblogs.com/insus/p/5434062.html . 但是与此篇所说的完全 ...
- 获取DataTable选择第一行某一列值
数据源是一个DataTable,现在我们需要获取这个DataTable的第一行第一列的值.先准备一个数据集,创建一个DataTable,并填充数据: source code: using System ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
随机推荐
- HIVE 调优思路和实践
1,数据存储调优 1.1 设置压缩: 设置中间数据/输出结果压缩传输,使用snappy格式. hive-site.xml: set hive.exec.compress.output = true # ...
- 用JMeter对MySQL数据库进行压测
转载链接:https://www.cnblogs.com/Jadie/p/8056541.html 参考链接:https://blog.csdn.net/qq_35389417/article/det ...
- 并发多线程学习(六)Java线程间的通信
合理的使用Java多线程可以更好地利用服务器资源.一般来讲,线程内部有自己私有的线程上下文,互不干扰.但是当我们需要多个线程之间相互协作的时候,就需要我们掌握Java线程的通信方式.本文将介绍Java ...
- xfce-debian10 英文环境安装配置记录
Centos还没有用利索(因为我听说debian是更纯正的社区开源项目???可是这对于我这样毫无技术菜鸟来说有什么关系呢???可是耐不住心中的悸动???悸动又从哪里了呢???哎,不管了),突然心血来潮 ...
- 使用git下载文件时提示身份验证失败
鼠标右键打开Git Bash Here窗口 输入git clone + 网址 后出现身份报错提示信息 需要重新修改一下用户名和邮箱就可以了 git config --global --replace- ...
- IDEA使用fastjson1时maven引入依赖没报错,但是用不了JSONObject工具类
删除项目下的.idea文件夹重新打开项目就行, 不知道为什么
- Android拍照程序适配
public void takePic(){ String forderPath = getExternalFilesDir("") + "/pic"; Fil ...
- div垂直居中的4种方式方式
一.使用单元格居中 <!DOCTYPE html> <html> <head> <title>测试</title> </head> ...
- TP5 事务处理加锁
首先,数据库类型要是InnoDB,其次,加锁必须跟事务同时使用,还有,查询的时候都必须带锁,比如: db('sms')->lock(true)->where(['id'=>1])-& ...
- Dynamics 365 incident原生实体特点
有以下特点: customerid字段必填,而且该字段类型是"客户".可以关联多种数据类型. 更新服务用户的姓名,会更新所有关联SR的customeridName. 关闭SR会产生 ...