本文章所说的横跨就是包括横跨和竖跨就是字面意思

长期写后台，遇到过很多次合并单元格的需求，每次都是csdn直接抄代码，今天提需求又碰到合并单元格了，趁着有时间就想一想elementUI这个功能到底怎么使用。

首先看到elementui中的例子，就是就是：span-method='arraySpanMethod' 就是传递一个合并的方法函数，看着挺简单的，一写就发现不对劲了。至少我一写就把自己绕里了！先看文档！

arraySpanMethod根据文档描述就是为了返回一个数组或者是对象，其实对应的就是原生html元素中td标签的rowspan和colspan属性。那么这里就出现了html table标签配套使用的td标签的用法了，查看w3c教程知道是负责当前单元格横跨单元格数量的属性。记住是横跨不是覆盖，相应的横跨的区域中就不能存在td标签。是不是糊涂了？ 上代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<table width="100%" border="1"><tr><th>月份</th><th>支出</th><th>收入</th></tr><tr><td>一月</td><td>500</td><td >2000</td></tr><tr><td>二月</td><td>600</td><td >2000</td></tr><tr><td>三月</td><td>1000</td><td >3000</td></tr><tr><td>四月</td><td>500</td><td >2500</td></tr></table>
</body>
</html>

发现一月的收入和二月的收入是同样的，这样就可以合并了，我们来改造一下代码

<tr><th>月份</th><th>支出</th><th>收入</th></tr><tr><td>一月</td><td>500</td><td rowspan="2">2000</td>    <!--需要改造的地方--></tr><tr><td>二月</td><td>600</td><!--        <td >2000</td>--> <!--这里被注释掉了--></tr><tr><td>三月</td><td>1000</td><td>3000</td></tr><tr><td>四月</td><td>500</td><td>2500</td></tr>

成功了，跟着列子我们就能够直观的感受到rowspan属性的作用，就是：横跨2行。相对应的横跨的元素就没有了，所以注释上了，如果不注释，你想想会怎么样呢。

colspan作用的同样的，让我们梳理一下，如果是两行之间的东西要合并，就是rowspan 至于你想合并多少就是设定的值，一行中的两列要进行合并就是colspan，其实我并不喜欢用合并这个概念。我感觉就是用横跨要好一点，毕竟横跨的位置已经没有元素了。就不能叫合并了。重点就是横跨属性后面跟着的是数量。

根据上面的列子你如果想的更远一点，就会发现一个问题，用elementui table表格是把所有的单元格都渲染出来了，怎么控制单元格不渲染呢？嘿嘿，还记得arraySpanMethod函数吗？如果该函数返回的数据是[0,0] 就不会渲染出表格来了。这是elementui的厉害之处了。

刚才也提到了，arraySpanMethod函数对应的返回值就是tr表格的 rowspan和colspan属性。

我没有骗你吧，我看过其他的文章，有说的arraySpanMethod函数是返回对应的索引，根据上面的tr元素的rowspan和colspan属性的解释，你应该明白其实是横跨的个数了吧。

好了，其实到这里已经弄明白他的原理了。很简单是不是，但是还有一些注意的点。

横跨这个规则是以起点向外扩散的，可以把表格的左上角当做坐标轴，如果你想x轴横跨就是列合并嘛，那么只能是向右，不能向左，y轴横跨就是行合并，只能向下，不能向上，我一开始测试着写的时候就是犯了这个错误。我想在最后一行最后一列去横跨到第一行的最后一列。大家注意。

还有就是如果横跨了，相对应的被横跨的表格一定要设置[0,0],这样这个被横跨的表格就不会渲染出td元素。不然的话就会出现td元素依然存在，横跨也存在，就会出现宽度和高度的问题。这不是bug。顺便贴出一下我随便测试的合并方法。

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {console.log(row, column, rowIndex, columnIndex)if (column.label === '创建时间') {if (rowIndex === 0) {return [3, 1]} else if (rowIndex <= 2) {return [0, 0]} else if (rowIndex === 4) {return [2, 1]} else if (rowIndex > 4) {return [0, 0]}}},

如果你能看懂，那么就说明这块原理你弄明白了。当然你也可以找我要注释。嘿嘿

elementUI合并单元格相关推荐

vue使用elementui合并单元格，并合并单元格中的值
看文档: 1.先在标签内引入对应的函数:span-method="objectSpanMethod" <el-tablestyle="margin-top: 20p ...
elementui 合并单元格
//这个方法重要 mergeCol(id, rowIndex) {var idName = this.pageData.records[rowIndex][id]if (rowIndex === 0 ...
Vue + element-ui合并单元格后，checkbox多选单选取值问题
问题说明针对于el-table表格合并后checkbox选值问题,这里特别需要注意的是不要用selection-change这个事件,该事件就是当选择项发生变化时会触发该事件,这里我们会用到一个单选 ...
vue+ elementui合并单元格后 checkbox多选单选取值问题
@select="selectCheckOne" @select-all="selectAll" select_box:[] //单选selectCheckOn ...
elementUI 表格合并单元格-多层级-合并行
elementUI 表格合并单元格-多层级-合并行需求:使用vue + elementUI 实现如下表格: 省份城市区域人口贵州遵义汇川区 100 红花岗区 100 播州区 100 贵阳 ...
elementui表格自定义合并单元格根据相同值合并单元格；指定列合并；解决自定义合并后单元格样式错乱
elementui表格根据指定相同属性值合并单元格 josn数据,id相同的单元格合并,前3column和后7column合并 let arr = [ {"op":"Su ...
elementui表格组件动态合并单元格
直接按照elementui表格组件给的合并单元格的方式,是写死的,不能满足动态合并的需求.一般都是自己总结合并规律,最后通过span-method方法返回的行列进行合并. 重点::span-metho ...
elementUI——表格单元格合并——技能提升
elementUI--表格单元格合并--技能提升之前写过一个关于单元格合并的功能,要求根据某一个参数比如序号,如果同一个序号下的某些参数前后的数据一致,则需要实现单元格的合并. 效果图如下: 还有一 ...
ElementUI table合并单元格
element-ui Table如何合并单元格我这里的需求是在懒加载的数据中从管理员开始的3列合并, 跟进任务量开始的3列合并合并单元格其实是占位,所以清除单元格一定要做 row 为行数据, ...

elementUI合并单元格

本文章所说的横跨就是包括横跨和竖跨就是字面意思

elementUI合并单元格相关推荐

最新文章

热门文章

elementUI合并单元格

本文章所说的横跨就是包括横跨和竖跨 就是字面意思

elementUI合并单元格相关推荐

最新文章

热门文章

本文章所说的横跨就是包括横跨和竖跨就是字面意思