当前位置:主页 > vue.js教程 > elementUI table表格动态合并的示例代码

elementUI table表格动态合并实例

发布:2019-11-29 09:34:20 92


为网友们分享了elementUI相关的编程文章,网友牧天泽根据主题投稿了本篇教程内容,涉及到elementUI、table、动态合并、elementUI table表格动态合并的示例代码相关内容,已被276网友关注,涉猎到的知识点内容可以在下方电子书获得。

elementUI table表格动态合并的示例代码

1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下demo,做的很直白,不过不太符合业务。在网上找了篇文章参考了一下

2.效果图如下:

elementUI table表格动态合并的示例代码

在动态处理从后端拿回来的数据的时候,是需要从数据中找到一个唯一的“标识”去判断是否是相同种类的数据。然后根据这个“标识”去做逻辑判断。

3.代码:

//合并单元格 二维数组-> 根据“标识”去遍历数据
data() {

return {
  spanArr: [], //遍历数据时,根据相同的标识去存储记录
  pos: 0 // 二维数组的索引
}
}
// methods中定义方法
getSpanArr(data) {

let that = this
//页面展示的数据,不一定是全部的数据,所以每次都清空之前存储的 保证遍历的数据是最新的数据。以免造成数据渲染混乱
that.spanArr = []
that.pos = 0
//遍历数据
data.forEach((item, index) => {
  //判断是否是第一项
  if (index === 0) {
    this.spanArr.push(1)
    this.pos = 0
  } else {
    //不是第一项时,就根据标识去存储
    if (data[index].moldName === data[index - 1].moldName) {
      // 查找到符合条件的数据时每次要把之前存储的数据+1
      this.spanArr[this.pos] += 1
      this.spanArr.push(0)
    } else {
      // 没有符合的数据时,要记住当前的index
      this.spanArr.push(1)
      this.pos = index
    }
  }
 })
console.log(this.spanArr, this.pos)
},
// 列表方法
objectSpanMethod({rowIndex, columnIndex}) {

// 页面列表上 表格合并行 -> 第几列(从0开始)
// 需要合并多个单元格时 依次增加判断条件即可
if (columnIndex === 3) {
  // 二维数组存储的数据 取出
  const _row = this.spanArr[rowIndex]
  const _col = _row > 0 ? 1 : 0
  return {
    rowspan: _row,
    colspan: _col
  }
  //不可以return {rowspan:0, colspan: 0} 会造成数据不渲染, 也可以不写else,eslint过不了的话就返回false
} else {
  return false
}
}
created() {

let data = xxxxxxxxx
this.getSpanArr(data)
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


参考资料

相关文章

  • Java Swing中JTable渲染器与编辑器的用法详解

    发布:2019-12-17

    这篇文章主要介绍了Java Swing中JTable渲染器与编辑器用法,结合实例形式较为详细的分析了Swing中JTable渲染器与编辑器的功能、使用方法及相关注意事项,需要的朋友可以参考下


  • jQuery中table数据的值拷贝和拆分知识点总结

    发布:2020-02-13

    在开发的过程中,经常会遇到弹出框显示前一页table列表的情况,这时候会有好多方法来来解决。下面小编给大家介绍怎么用jquery将值拷贝到第二页并拆分拷贝的值,需要的朋友参考下


  • Mybatis-Plus @TableField自动填充时间为null的问题解决

    发布:2023-03-06

    本文主要介绍了Mybatis-Plus @TableField自动填充时间为null的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧


  • 介绍Laravel中使用DataTables插件的方法步骤

    发布:2020-02-09

    DataTables 是一个 jQuery 的表格插件,记录一下在 Laravel 中使用的常用功能和用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • spring boot executable jar/war 原理解析

    发布:2023-04-13

    spring boot里其实不仅可以直接以 java -jar demo.jar的方式启动,还可以把jar/war变为一个可以执行的脚本来启动,比如./demo.jar,这篇文章主要介绍了spring boot executable jar/war 原理,需要的朋友可以参考下


  • Bootstrap Table列宽拖动实例代码

    发布:2020-06-15

    Bootstrap Table可拖动,需要用到它的Resizable扩展插件,下面脚本之家小编给大家带来了Bootstrap Table列宽拖动的方法,感兴趣的朋友一起看看吧


  • PyCharm添加Anaconda中的虚拟环境Python解释器出现Conda executable is not found错误解决

    发布:2023-04-03

    这篇文章主要给大家介绍了关于PyCharm添加Anaconda中的虚拟环境Python解释器出现Conda executable is not found错误的解决办法,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下


  • jQuery学习笔记(4)--怎样从Jquery获取table中列值

    发布:2020-01-13

    由于要获取某列中的一个ID值,如果用JS传值的方式此问题就不存在,由于此次用到的都是jquery插件,包括各种弹出框,用JS传值就得用JS那丑陋的弹出框,所以,你懂得


网友讨论