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 表格之合并同类项(包括行和列)的更多相关文章

  1. javascript动态创建表格:新增、删除行和列

    转载:http://www.cnblogs.com/pato/archive/2009/09/02/1559068.html 利用js来动态创建表格有两种格式,appendChild()和insert ...

  2. 使用element-ui 组件动态合并table的行/列(第二次修改)

    这是第二次修改,在通过调用后台接口返回来的时候,发现了代码中的问题:现在将博客中错误的地方改过来,添加备注 文章需求:动态实现table表格中行/列的自动合并 使用框架及UI类库:Vue+Elemen ...

  3. elementui表格表头合并

    第一步:用多级表头,该删删 该减减 第二步:使用header-cell-style属性

  4. element-ui表格合并span-method

    先看一下合并后的样式,表格第二行,二三四列合并 官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和c ...

  5. jQuery实现表格冻结行和列

    前几天,遇到一个需求是要将表格的前几行和前几列冻结即固定,就是在有滚动条的情况下,保持那几行和那几列固定,这个需求其实是一个非常常见的需求,因为在涉及好多行和列时,在拖动滚动条时,我们需要知道每行每列 ...

  6. 【C#】Excel导出合并行和列并动态加载行与列

    简单的Excel导出比较好做,只要设置表头,循环在表格中赋值添加数据即可,但是如果表头是不固定的,并且个数是不确定的,这就需要根据查询出数据的特点来添加导出了. 导出效果图: 如上图所示,商品的个数是 ...

  7. jQuery 选择表格(table)里的行和列及改变简单样式

    本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...

  8. jQuery遍历Table表格的行和列

    遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...

  9. element-ui的table表格控件表头与内容列不对齐问题

    原文链接:点我 element-ui的table表格控件表头与内容列不对齐问题 解决方法:将以下样式代码添加到index.html.或app.vue中(必须是入口文件,起全局作用!)body .el- ...

  10. vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...

随机推荐

  1. CIIS 2023 丨聚焦文档图像处理前沿领域,合合信息 AI 助力图像处理与内容安全保障

    近日,2023第十二届中国智能产业高峰论坛(CIIS 2023)在江西南昌顺利举行.大会由中国人工智能学会.江西省科学技术厅.南昌市人民政府主办,南昌市科学技术局.中国工程科技发展战略江西研究院承办. ...

  2. Facebook – Facebook Page Embed

    前言 在网站嵌套 Facebook 专页是很好的推广方式哦. 虽然网站还是需要做 Blog, 但是通常被订阅的都是 Facebook 专页而不是网站 Blog. 开通账号 它的 setup 很简单, ...

  3. Java获取Object中Value的方法

    在Java中,获取对象(Object)中的值通常依赖于对象的类型以及我们希望访问的属性.由于Java是一种静态类型语言,直接从一个Object类型中访问属性是不可能的,因为Object是所有类的超类, ...

  4. 解锁Java线程池:实战技巧与陷阱规避

    专业在线打字练习网站-巧手打字通,只输出有价值的知识. 一 前言 线程池作为初学者常感困惑的一个领域,本次"巧手打字通课堂"将深入剖析其中几个最为普遍的误区.为了更清晰地阐述这些知 ...

  5. [摘录] WebView2 与 JS 交互

    https://docs.microsoft.com/zh-cn/microsoft-edge/webview2/gettingstarted/win32 步骤 5-脚本 托管应用还可以将 JavaS ...

  6. ARM SMMU中 SteamTable的作用

    在 ARM SMMU(System Memory Management Unit)中,Stream Table 是一个非常关键的数据结构,它用于管理和映射设备的内存访问请求.它的作用主要体现在以下几个 ...

  7. Java日期时间API系列17-----Jdk8中java.time包中的新的日期时间API类,java日期计算4,2个日期对比,获取相差年月日部分属性和相差总的天时分秒毫秒纳秒等

    通过Java日期时间API系列9-----Jdk8中java.time包中的新的日期时间API类的Period和Duration的区别 ,可以看出java8设计非常好,新增了Period和Durati ...

  8. iOS中异常处理机制使用小结

    在iOS开发中经常会由于数组越界,添加数据为空,通信或者文件错误,内存溢出导致程序终端运行而引入异常处理机制.常用的处理方式是try catch机制.不过有几个专业术语需要解释,异常句柄.异常处理域断 ...

  9. docker常用命令与应用

    docker入门与docker file介绍 原文地址 docker常用命令 https://blog.csdn.net/leilei1366615/article/details/106267225 ...

  10. 电脑配置不够玩不了原神、剑三和魔兽世界?ToDesk云电脑来帮你!

    原神.剑网三.魔兽世界这种吃配置的游戏,对电脑硬件和软件的要求可都不低,所以当游戏玩家遇到配置一般的电脑,就只能望游戏而兴叹吗? 当然不用!云电脑成为你的游戏电脑平替之选. 用云电脑来玩游戏,不仅对你 ...