Vue Elenent实现表格相同数据列合并


Posted in Vue.js onNovember 30, 2020

本文实例为大家分享了Vue Elenent实现表格相同数据列合并的具体代码,供大家参考,具体内容如下

作者:秋名

思路:后台查询表格数据,查询出来后直接传到前端,前端通过foreach循环,然后对相同的表格进行合并。(同一个表格,但是每一行,固定一列的数据都相同,即可使用合并单元格,做到了既美观,也清晰。)

template:

<el-table
 :span-method="objectSpanMethod4" //在el-table里面添加合并单元格属性
 >

Js:

data(){
return{
 orderdata:null,// 后端将数据查询出来后,绑定到orderdata里面
}
},
 methods: {
flitterData4(){
  let spanOneArr = []
  let concatOne = 0
  //let spanOneArr1 = []
  //let concatOne1 = 0
  this.orderdata.forEach((item,index)=>{//循环后端查询出来的数据(orderdata)
  if(index === 0){
   spanOneArr.push(1)
  }else{
   //name 修改
   if(item.ENTERNAME === this.orderdata[index - 1].ENTERNAME){ //第一列需合并相同内容的字段
   spanOneArr[concatOne] += 1
   spanOneArr.push(0)
   }else{
   spanOneArr.push(1)
   concatOne = index
   }
   //if(item.coachName === this.coachdata[index - 1].coachName){ //第二列需合并相同内容的判断条件
   //spanOneArr1[concatOne1] += 1
   //spanOneArr1.push(0)
   //}else{
   //spanOneArr1.push(1)
   //concatOne1 = index
   // }
  }
  })
  return {
  one: spanOneArr,
  //two:spanOneArr1
  }
 },
 objectSpanMethod4({row, column, rowIndex, columnIndex}){
  if(columnIndex === 0 ) {
  // this.tableData 修改
  const _row = (this.flitterData4(this.tableData).one)[rowIndex]
  const _col = _row > 0 ? 1 : 0
  return {
   rowspan: _row,
   colspan: _col
  }
  }
  //判断是否是第二列,如果是就将第二列相同字段进行合并
  //if(columnIndex === 1) {
  // const _row = (this.flitterData(this.tableData).two)[rowIndex]
  // const _col = _row > 0 ? 1 : 0
  // return {
   // rowspan: _row,
  // colspan: _col
  // }
  }
 },
 }

效果图:

Vue Elenent实现表格相同数据列合并

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

Vue.js 相关文章推荐
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue中的可拖拽宽度div的实现示例
Apr 08 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 #Vue.js
详解Vue 的异常处理机制
Nov 30 #Vue.js
ESLint 是如何检查 .vue 文件的
Nov 30 #Vue.js
Vue用mixin合并重复代码的实现
Nov 27 #Vue.js
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 #Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 #Vue.js
vuex的数据渲染与修改浅析
Nov 26 #Vue.js
You might like
php时间不正确的解决方法
2008/04/09 PHP
php数组去除空值函数分享
2015/02/02 PHP
详解YII关联查询
2016/01/10 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
2017/02/15 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
vue中动态设置meta标签和title标签的方法
2018/07/11 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python中eval带来的潜在风险代码分析
2017/12/11 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
python爬取cnvd漏洞库信息的实例
2019/02/14 Python
TensorFlow2.X使用图片制作简单的数据集训练模型
2020/04/08 Python
Python基于当前时间批量创建文件
2020/05/07 Python
python Scrapy框架原理解析
2021/01/04 Python
Html5移动端适配IphoneX等机型的方法
2019/06/25 HTML / CSS
SmartBuyGlasses意大利:购买太阳镜、眼镜和隐形眼镜
2018/11/20 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
第二层交换机和路由器的区别?第三层交换机和路由器的区别?
2013/05/23 面试题
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
舞蹈专业求职信
2014/06/13 职场文书
基层领导干部“四风”问题批评与自我批评
2014/09/23 职场文书
环卫工作汇报材料
2014/10/28 职场文书
军训阅兵新闻稿
2015/07/17 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
Golang中异常处理机制详解
2021/06/08 Golang
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL
Mysql多层子查询示例代码(收藏夹案例)
2022/03/31 MySQL
Python加密与解密模块hashlib与hmac
2022/06/05 Python