elementUI 表格之合并同类项(包括行和列)
mergeSpan(tableData, arr) { //["areName","indexCode"]
let spanArr = new Array(tableData.length);
for (let m = 0; m < spanArr.length; m++) {
spanArr[m] = new Array(arr.length);
}
arr.forEach((ele, ind) = > {
let pos = null;
tableData.forEach((item, index, self) = > {
if (index == 0) {
spanArr[index][ind] = {
rowspan: 1,
colspan: 1
}
pos = 0;
} else {
if (item[ele] === self[index - 1][ele]) {
spanArr[pos][ind].rowspan += 1;
spanArr[index][ind] = {
rowspan: 0,
colspan: 0
}
} else {
pos = index;
spanArr[index][ind] = {
rowspan: 1,
colspan: 1
}
}
}
})
})
tableData.forEach((item, index) = > {
let pos = null;
arr.forEach((ele, ind, self) = > {
if (ind == 0 && spanArr[index][ind].rowspan == 1) {
spanArr[index][ind].colspan = 1;
pos = 0;
} else {
if (item[ele] == item[self[ind - 1]] && spanArr[index][pos].rowspan == 1) {
spanArr[index][pos].colspan += 1;
spanArr[index][ind] = {
rowspan: 0,
colspan: 0
}
} else {
pos = ind;
}
}
})
})
return spanArr
}
elementUI 表格之合并同类项(包括行和列)的更多相关文章
- javascript动态创建表格:新增、删除行和列
转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...
- 使用element-ui 组件动态合并table的行/列(第二次修改)
这是第二次修改,在通过调用后台接口返回来的时候,发现了代码中的问题:现在将博客中错误的地方改过来,添加备注 文章需求:动态实现table表格中行/列的自动合并 使用框架及UI类库:Vue+Elemen ...
- elementui表格表头合并
第一步:用多级表头,该删删 该减减 第二步:使用header-cell-style属性
- element-ui表格合并span-method
先看一下合并后的样式,表格第二行,二三四列合并 官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和c ...
- jQuery实现表格冻结行和列
前几天,遇到一个需求是要将表格的前几行和前几列冻结即固定,就是在有滚动条的情况下,保持那几行和那几列固定,这个需求其实是一个非常常见的需求,因为在涉及好多行和列时,在拖动滚动条时,我们需要知道每行每列 ...
- 【C#】Excel导出合并行和列并动态加载行与列
简单的Excel导出比较好做,只要设置表头,循环在表格中赋值添加数据即可,但是如果表头是不固定的,并且个数是不确定的,这就需要根据查询出数据的特点来添加导出了. 导出效果图: 如上图所示,商品的个数是 ...
- jQuery 选择表格(table)里的行和列及改变简单样式
本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...
- jQuery遍历Table表格的行和列
遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...
- element-ui的table表格控件表头与内容列不对齐问题
原文链接:点我 element-ui的table表格控件表头与内容列不对齐问题 解决方法:将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!)body .el- ...
- vue+element创建动态的form表单.以及动态生成表格的行和列
动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...
随机推荐
- Istio实现sidecar自动注入
Istio实现sidecar自动注入 Sidecar模式 在Sidecar部署方式中,你会为每个应用的容器部署一个伴生容器.对于Service Mesh,Sidecar接管进出应用程序容器的所有网络流 ...
- ansible rpm包下载
Ansible2.9.18版本下载链接:https://pan.baidu.com/s/1dKlwtLWSOKoMkanW900n9Q 提取码:ansi 将软件上传至系统并解压安装: # tar -z ...
- git 批量删除本地分支及远程分支
git 批量删除本地分支及远程分支 一.批量删除本地分支 git branch |grep 'name' |xargs git branch -D 备注: name 为需要匹配的分支名称 二.批量删除 ...
- 在 Web 中判断页面是不是刷新
在 Web 开发中,我们经常需要区分用户是否通过刷新操作重新加载了页面.这一操作可能是由用户手动刷新(如按下 F5 键或点击浏览器刷新按钮)或通过浏览器自动重新加载.判断页面是否刷新有助于开发者优化用 ...
- 《Vue.js 设计与实现》读书笔记 - 第11章、快速 Diff 算法
第11章.快速 Diff 算法 11.1 相同的前置元素和后置元素 快速 Diff 算法包含预处理步骤,这借鉴了纯文本 Diff 算法的思路. 先把相同的前缀后缀进行处理,然后再比较中间部分. fun ...
- Android Qcom USB Driver学习(六)
眼图基础知识与详解 10分钟教会你看眼图 USB2.0 HUB眼图调试经验总结 一篇文章教你如何全面了解眼图测试! 预加重与去加重对眼图的影响 关于 USB 通信阻抗匹配的问题 硬件调试--眼图几个经 ...
- YashanDB个人版正式开放下载!参与首批体验官活动赢好礼!
好消息!国产数据库YashanDB个人版已正式向所有用户和开发者全面开放下载,该版本已在官网同步上线,欢迎大家前往官网下载体验! 与此同时,YashanDB联合墨天轮技术社区启动首批「产品体验官」尝鲜 ...
- electon的入口文件 main 指定
任何 Electron 应用程序的入口都是 main 文件. 这个文件控制了主进程,它运行在一个完整的Node.js环境中,负责控制您应用的生命周期,显示原生界面,执行特殊操作并管理渲染器进程(稍后详 ...
- package.json文件干什么的 ?
package.json 是项目描述文件,记录了当前项目的信息,比如项目的名字,版本,作者,还有所依赖的第三方模块 : dependencies 是项目依赖,是项目上线时要依赖的第三方包 : devd ...
- KubeSphere 社区双周报|2024.04.26-05.09
KubeSphere 社区双周报主要整理展示新增的贡献者名单和证书.新增的讲师证书以及两周内提交过 commit 的贡献者,并对近期重要的 PR 进行解析,同时还包含了线上/线下活动和布道推广等一系列 ...