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 ...
随机推荐
- Python的入门学习Day 25~27——form”夜曲编程“
Day 27 time: 2021.8.24. 时流轻快,转眼间就载着我到达了学习Python的第27个日子.一开始,我还以为本次学习的全程对我而言小菜一碟--但,当我亲自走过以后,发现这些进步, ...
- ubuntu 20.04 ibus添加五笔输入法
ubuntu 20.04 ibus添加五笔输入法:虽然现在五笔输入法已经没有什么新人使用,如果还有一两个人,找不到系统自带的极点五笔输入,可以按如下方式操作:以前是用ibus-setup,点添加,现在 ...
- 模拟ATM系统 —— 用户注册、登录和用户操作页设计 、查询账号、退出账号功能
开发工具:idea 一.项目步骤: 1.系统准备.首页设计 2.用户开户功能 3.用户登录功能 4.用户操作页设计 .查询账号.退出账号功能 5.用户存款功能 6.用户取款功能 7.用户转账功能 8. ...
- @Configuration 配置类打断点后,一启动项目读取到该配置类的话就会进断点
@Configuration 配置类的话,打断点的时候,一启动项目就会读取配置信息,然后你在@Configuration 配置的类中打断点的话,一启动项目就会读取配置类,然后就会进断点,跟你平常的co ...
- django 安装cerlery error in anyjson setup command: use_2to3 is invalid.
直接报错 error in anyjson setup command: use_2to3 is invalid. setuptools pip install "setuptools< ...
- QueryDet: Cascaded Sparse Query for Accelerating High-Resolution Small Object Detection(QueryDet:用于加速高分辨率小目标检测的级联稀疏查询)
QueryDet: Cascaded Sparse Query for Accelerating High-Resolution Small Object Detection(QueryDet:用于加 ...
- 搭建Kubord管理k8s/EKS以及Harbor私有仓库教程
eks首先要去aws后台进行创建,这里不再讲解详细的过程,下面讲解如果通过命令行以及kuboard调度esk服务. 安装docker以及docker-compose yum install docke ...
- SQLSERVER判断是否为数字ISNUMERIC
从SQLSERVER 2005新增isnumeric函数,返回1则字符串是数值,返回0则认为不是数值 但里面有些其他的字符也返回1,不知道是怎么个思路,是不是花旗国的规则? SELECT ISNUME ...
- k8s volumes
NFS: apiVersion: v1 kind: Pod metadata: name: test-pd spec: containers: - image: registry.k8s.io/tes ...
- 页面布局 Stack 层叠组件 Stack 与 Align Stack 与 Positioned 实现定位布局
一.Flutter Stack 组件 Stack 表示堆的意思,我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局 属性 说明 ...