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

 更新时间:2019-05-16 00:00:29   作者:佚名   我要评论(0)

1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下

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

2.效果图如下:


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

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)
}

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

您可能感兴趣的文章:

  • vue elementUI table表格数据 滚动懒加载的实现方法
  • 优雅的elementUI table单元格可编辑实现方法详解
  • elementUI中Table表格问题的解决方法
  • VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
  • VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
  • VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法

相关文章

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

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

    1.最近在做的erp项目,有一个需求是同一个客户下的同种订单,需要合并展示。使用elementUI table组件的方法 :span-method="objectSpanMethod"。官网上看了一下
    2019-05-16
  • 详解js常用分割取字符串的方法

    详解js常用分割取字符串的方法

    1.substr substr(start,length)表示从start位置开始,截取length长度的字符串。 var src="images/off_1.png"; alert(src.substr(7,3)); 弹出值为:off 2
    2019-05-16
  • Spring Boot 项目创建的详细步骤(图文)

    Spring Boot 项目创建的详细步骤(图文)

    一. 简单介绍一下Spring Boot 世界惯例,在学习一个框架之前,我们需要了解一下这个框架的来历。 下面我们引用一下百度百科的解释。 Spring Boot是由Pivotal团
    2019-05-16
  • Python常用模块之requests模块用法分析

    Python常用模块之requests模块用法分析

    本文实例讲述了Python常用模块之requests模块用法。分享给大家供大家参考,具体如下: 一. GET请求 1.访问一个页面 import requests r=requests.get('http:
    2019-05-16
  • 关于Mysql自增id的这些你可能还不知道

    关于Mysql自增id的这些你可能还不知道

    导读: 在使用MySQL建表时,我们通常会创建一个自增字段(AUTO_INCREMENT),并以此字段作为主键。本篇文章将以问答的形式讲述关于自增id的一切。 注: 本文所讲
    2019-05-16
  • JS中使用react-tooltip插件实现鼠标悬浮显示框

    JS中使用react-tooltip插件实现鼠标悬浮显示框

    前段时间遇到的一个需求,要求鼠标悬停显示使用描述, 用到了react-tooltip插件,今天写一个总结 先看效果(为了方便参考,用的是原始样式): 文档参考地址: https
    2019-05-16
  • 详解Python下载图片并保存本地的两种方式

    详解Python下载图片并保存本地的两种方式

    一:使用Python中的urllib类中的urlretrieve()函数,直接从网上下载资源到本地,具体代码: import os,stat import urllib.request img_url="https://tim
    2019-05-16
  • SpringBoot整合MybatisPlus的简单教程实现(简单整合)

    SpringBoot整合MybatisPlus的简单教程实现(简单整合)

    最近在研究springboot,顺便就会看看数据库连接这一块的知识 ,所以当我发现有通用Mapper和MybatisPlus这两款网络上比较火的简化mybatis开发的优秀软件之后。
    2019-05-16
  • MongoDB分片集群部署详解

    MongoDB分片集群部署详解

    一、环境说明 1、我们prod环境MongoDB的集群架构是做的分片集群的部署,但是目前我们没有分片,即所有数据都在一个分片上,后期如果数量大,需要分配,集群随
    2019-05-16
  • python3 property装饰器实现原理与用法示例

    python3 property装饰器实现原理与用法示例

    本文实例讲述了python3 property装饰器实现原理与用法。分享给大家供大家参考,具体如下: 学习python的同学,慢慢的都会接触到装饰器,装饰器在python里是功
    2019-05-16

最新评论