vue中elementUI table组件合并单元格教程

vue中elementUI table组件合并单元格教程

一、先看看我这边合并后的效果图

二、合并思路或原理大致讲解
1.首先要去遍历表格数组，计算出每行需要合并的数量（遍历数组去记录合并规则）
2.通过给table传入span-method方法可以实现合并行或列
（方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。文档地址：https://element.eleme.cn/#/zh-CN/component/table）
三、案列代码
1.表格新增span-method=“objectSpanMethod”

  <el-table :data="tableData"  :span-method="objectSpanMethod"   border  >
  </el-table>  

2.JS部分

    //遍历数组去记录合并规则
        getSpanArr(data)