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 ...
随机推荐
- java开发常用软件下载
1.idea工具下载:https://www.jetbrains.com/idea/download/#section=windows 2.dbeaver下载:https://dbeaver.io ...
- 技术前沿:ISP芯片终极进化——VP芯片(AI视觉处理器)
1.计算机视觉的定义 广义与狭义 从广义上说,计算机视觉就是"赋予机器自然视觉能力"的学科.自然视觉能力,就是指生物视觉系统体现的视觉能力. 从狭义上讲,计算机视觉是以图像(视频) ...
- zookeeper在关闭服务时报could not find file /opt/module/zookeeper-3.5.10/zkData/zookeeper_server.pid
遇到了个问题,zookeeper在执行 bin/zkServer.sh stop时 会报题目中的错误,我搜了一下博客,好像是因为第一次启动的不是zkServer.sh中的服务 我先 kill -9 加 ...
- MyBatis_03(核心配置文件解析)
核心配置的文件的"详解" -->(优化,核心配置文件) "核心配置文件的前言": 核心配置文件中的标签必须按照固定的顺序 ---> ("有 ...
- gitee下载项目
PS:如果直接在gitee仓库中选择下载zip,在本地打开项目后是不会与gitee远程库绑定的.如果要与远程库同步,需要选择克隆,同样的,本地需要先搭建好git环境. 1.在本地新建文件夹 2.在文件 ...
- C# 中 SetTimeout 方案
近期项目中需在用户点击按钮后,延时执行代码逻辑,避免频繁操作.网上没找到有关 C# SetTimeout 官方API , 于是通过异步线程,动手实现一个.方案如下,如果同一个DelayedProces ...
- twenty-three
Vue(用于构建用户界面的前端框架) Vue框架的特性,主要有 ① 数据驱动试图 ②双向数据绑定 js数据的变化,会被自动渲染到页面上 页面上表单采集的数据发生变化的时候,会被vue自动获取到,并更新 ...
- JSON中put、accumulate、elemate的区别
JSONObject.put():将value映射到key下,加入在JSONObject对象之前存在一个value存在key下,当前的value会替换之前的value. JSONObject.accu ...
- Oracle JDK 和 OpenJDK 有什么区别?
OpenJDK是Sun在2006年末把Java开源而形成的项目,这里的"开源"是通常意义上的源码开放形式,即源码是可被复用的,例如IcedTea.UltraViolet都是从Ope ...
- matlab求解器的选择
可以选择的变步长求解器有:ode45,ode23,ode113,odel5s,ode23s和discret.缺省情况下,具有状态的系统用的是ode45:没有状态的系统用的是discrete. 1)od ...