自定义合并列:el-table
objectSpanMethod({ row, column, rowIndex, columnIndex }) {//合并规则
//当前行row、当前列column、当前行号rowIndex、当前列号columnIndex
if (columnIndex === 0) {//第一列:参数column.property,内容:row.name,合并数量this.columnDatas[row.name]
console.log(this.columnDatas[rowIndex],column.property,row.name,"读取参数")
const _row = this.columnDatas[rowIndex];//每一列的数目:[1,2,0,1]
if (_row) {
return {
rowspan: _row,
colspan: 1
};
} else {
return {
rowspan: 0,
colspan: 0
};
}
}
},
注:目标是计算合并相同key的数量_row,而且是一个数组格式
//合并相同key的数据data:如:this.getSpanArr(this.dataSource,"name");//[1,2,0,1]
getSpanArr(data,key) {
let spanArr = [];
let spanIndex = null;
if (data == null) {
return [];
} else {
for (let i = 0; i < data.length; i++) {
if (i === 0) {
spanArr.push(1);
spanIndex = 0;
} else {
if (data[i][key]=== data[i - 1][key]) {
spanArr[spanIndex] += 1;
spanArr.push(0);
} else {
spanArr.push(1);
spanIndex = i;
}
}
}
return spanArr;
}
},
附:常见合并key,读取value与num
//计算相同key的数量num:{value:num},value是内容
handleSpand(data,key) {
let obj = {};
data.forEach(val => {
if (obj[val.key]) {
obj[val.key]++;
} else {
obj[val.key] = 1;
}
});
return obj;
},
自定义合并列:el-table的更多相关文章
- SQL 合并列值和拆分列值
合并列值 表结构,数据如下: id value ----- ------ aa bb aaa bbb ccc 需要得到结果: id values ------ ----------- aa,bb aa ...
- JQuery合并列(可用于导出Word)
在网上找了一些JQuery合并列的例子,但是都是用.hide()的方式,这样导致了在导出Word的时候表格严重变形 自己写了一个用.remove()方式的合并列 function arrangeTab ...
- SQL语法集锦三:合并列值与分拆列值
本文转载http://www.cnblogs.com/lxblog/archive/2012/09/29/2708724.html 在SQL中分拆列值和合并列值老生常谈了,从网上搜刮了一下并记录下来, ...
- SQL(横表和纵表)行列转换,PIVOT与UNPIVOT的区别和使用方法举例,合并列的例子
使用过SQL Server 2000的人都知道,要想实现行列转换,必须综合利用聚合函数和动态SQL,具体实现起来需要一定的技巧,而在SQL Server 2005中,使用新引进的关键字PIVOT/UN ...
- WMSYS.WM_CONCAT(distinct(字段名)) 函数,字符串拼接函数。合并列
合并列函数 WMSYS.WM_CONCAT(distinct(字段名)) 函数 可以实现字符串拼接在一起,这种情况可以在要求把一个字段的多个值拼接在一起的时候使用.其中distinct可以去掉重复的值 ...
- Excel动态合并行、合并列
背景: 在北京工作的时候,又一次同事问了我这样一个问题,说我要把从数据库获取到的数据直接通过NPOI进行导出,但是我对导出的格式要特殊的要求,如图: 冥思苦想,最终顺利帮同事解决问题,虽然有点瑕疵,但 ...
- GRIDVIEW多行多列合并单元格(合并列)
GitHub项目地址:https://github.com/mingceng/merge-gridviewcell 去年的时候,我写了两篇文章: GridView多行多列合并单元格(完整代码和例子) ...
- Oracle-单表合并列
表基本结构 合并列 select t.student,decode(t.java,'','','java') 科目, t.java from student t union select t.stud ...
- sql中合并列方法
方法一:创建合并列函数 -------创建一个方法---------- CREATE FUNCTION dbo.Role_Name(@AdminID int) ) AS BEGIN ) SET @r ...
随机推荐
- 大数据项目相关技术栈(Hadoop周边技术)
J2EE 框架Spring 开发框架 + SSH or SSM Lucene 索引和查询IKAnalyzer 分词Webmagic 爬虫 ETL工具:KettleSqoop 结构化数据库-hadoop ...
- web.xml简介
用于配置Web应用的相关信息,如:监听器(listener).过滤器(filter). Servlet.相关参数.会话超时时间.安全验证方式.错误页面等.例如: Servlet 3中的异步处理指的是什 ...
- python爬取微信信息--显示性别/地域/词云(附代码)
看到一篇有意思的博客 利用微信开放的接口itchat 可以获取登录的微信好友信息 并且利用图像工具显示分析结果 非常的有意思 记录下实现过程 并提供可执行代码 首先要 import itchat 库 ...
- 【转】浮点数与IEEE 754
http://www.cnblogs.com/kingwolfofsky/archive/2011/07/21/2112299.html 浮点数 1. 什么是浮点数 在计算机系统的发展过程中,曾经 ...
- 通过Anaconda在Ubuntu16.04上安装 TensorFlow(GPU版本)
一. 安装环境 Ubuntu16.04.3 LST GPU: GeForce GTX1070 Python: 3.5 CUDA Toolkit 8.0 GA1 (Sept 2016) cuDNN v6 ...
- Java NIO中的通道Channel(一)通道基础
什么是通道Channel 这个说实话挺难定义的,有点抽象,不过我们可以根据它的用途来理解: 通道主要用于传输数据,从缓冲区的一侧传到另一侧的实体(如文件.套接字...),反之亦然: 通道是访问IO服务 ...
- CSS 基础:HTML 标记与文档结构(1)<思维导图>
这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...
- leetcode — longest-palindromic-substring
import java.util.Arrays; /** * Source : https://oj.leetcode.com/problems/longest-palindromic-substri ...
- js节流函数和js防止重复提交的N种方法
应用情景 经典使用情景:js的一些事件,比如:onresize.scroll.mousemove.mousehover等: 还比如:手抖.手误.服务器没有响应之前的重复点击: 这些都是没有意义的,重复 ...
- mac使用brew安装mysql
1.安装mysql #brew install mysql 报错 Error: The following directories are not writable by your user: /us ...