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


Posted in Javascript onMay 15, 2019

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

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

Javascript 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
浅析ajax请求json数据并用js解析(示例分析)
Jul 13 Javascript
javascript表格的渲染组件
Jul 03 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
js实现日历与定时器
Feb 22 Javascript
Webpack打包css后z-index被重新计算的解决方法
Jun 18 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
Jul 19 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
js实现转动骰子模型
Oct 24 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
vue3使用vue-count-to组件的实现
Dec 25 Vue.js
详解VUE调用本地json的使用方法
May 15 #Javascript
微信小程序的mpvue框架快速上手指南
May 15 #Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 #Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 #Javascript
JavaScript面向对象编程小游戏---贪吃蛇代码实例
May 15 #Javascript
小程序绑定用户方案优化小结
May 15 #Javascript
pm2发布node配置文件ecosystem.json详解
May 15 #Javascript
You might like
php xml实例 留言本
2009/03/20 PHP
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
jquery如何改变html标签的样式(两种实现方法)
2013/01/16 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
2014/12/16 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
Vue.js第四天学习笔记(组件)
2016/12/02 Javascript
性能优化之代码优化页面加载速度
2017/03/01 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
2019/01/27 jQuery
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
JavaScript canvas仿代码流瀑布
2020/02/10 Javascript
JavaScript实时更新当前的时间的示例代码
2020/07/15 Javascript
Python找出9个连续的空闲端口
2016/02/01 Python
Python利用flask sqlalchemy实现分页效果
2020/08/02 Python
pygame游戏之旅 如何制作游戏障碍
2018/11/20 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
python适合做数据挖掘吗
2020/06/16 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
HelloFresh奥地利:立即订购烹饪盒
2019/02/22 全球购物
文明宿舍获奖感言
2014/02/07 职场文书
《最后的姿势》教学反思
2014/02/27 职场文书
群众路线四风对照检查材料
2014/11/04 职场文书
初中信息技术教学计划
2015/01/22 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
springboot临时文件存储目录配置方式
2021/07/01 Java/Android
php修改word的实例方法
2021/11/17 PHP
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL
Win10加载疑难解答时出错发生意外错误的解决方法
2022/07/07 数码科技