效果如下:

首先:在table上加:span-method="spanMethod"

其次:

methods中加两个方法

dataPretreatment() {
//表格数据列合并预处理,生成一个与行数相同的数组记录每一行设置的合并数
// 如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;
// 如果不是第一条记录,则判断它与前一条记录是否相等,如果相等,
// 则向mergingRows中添入元素0,并将前一位元素+1,表示合并行数+1,
// 以此往复,得到所有行的合并数,0即表示该行不显示。
for (let i = 0; i < this.tableData.length; i++) { // tabledata 表格数据源
if (i === 0) {
this.mergingRows.push(1)
this.mergingPos = 0
} else {
if (this.tableData[i].level === this.tableData[i - 1].level) { //哪些数据是要合并的 合并的条件是什么
this.mergingRows[this.mergingPos] += 1
this.mergingRows.push(0)
} else {
this.mergingRows.push(1)
this.mergingPos = i
}
}
}
},
spanMethod({row,column,rowIndex,columnIndex}) {
if (columnIndex === 0) { //第一列
const _row = this.mergingRows[rowIndex];
const _col = _row > 0 ? 1 : 0;
return {
rowspan: _row,
colspan: _col
}
}
},

最后在created中调用 dataPretreatment() 方法。

结。

												

最新文章

  1. golang os.OpenFile
  2. handlebars.js的运用与整理
  3. (七)HTTP协议
  4. IE10访问apache 2.4会奇慢的解决办法
  5. WordPress折腾日记
  6. 工作流引擎Activiti使用总结
  7. js使用for in遍历时的细节问题
  8. 201521123009 《Java程序设计》第8周学习总结
  9. Python-老男孩-02_装饰器_面向对象_封装_继承_异常_接口_数据库
  10. 防止ajax重复提交
  11. DOM解析原理示意
  12. SQL转化为MapReduce的过程
  13. CS20SI-tensorflow for research笔记: Lecture3
  14. 使用FileZilla从Linux系统下载文件
  15. MySQL使用AUTO_INCREMENT列的表注意事项之update自增列篇
  16. Application Server not specified
  17. 2018-2019-2 网络对抗week1 Kali安装 20165333陈国超
  18. Python打包方法——Pyinstaller
  19. 「Vue」登陆-路由拦截器
  20. [Winform]只允许运行一个exe,如果已运行则将窗口置前

热门文章

  1. hive元起动报错:Exception in thread &quot;main&quot; java.lang.NoSuchMethodError: com.google.common.base.Preconditions.checkArgument(ZLjava/lang/String;Ljava/lang/Object;)V
  2. 调度器45—wake_affine
  3. JAVA常用类(一)Syatem类
  4. springcloud(四) - 服务治理Hystrix
  5. php 常用工具函数
  6. Redis实战(三)Redis冷备如何做
  7. 打开IE浏览器被强制跳转至edge
  8. 4-发票校验-不可能为条目1000 DIF确立帐户-消息号 M8147
  9. firefox用于web安全测试的插件[转]
  10. 如何让一个 div 左右各空一定距离然后 div 占满剩下的宽度?