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

长期写后台，遇到过很多次合并单元格的需求，每次都是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 # 前端 # javascript
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign