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 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
vue中配置scss全局变量的步骤
Dec 28 Vue.js
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
vue实现验证用户名是否可用
Jan 20 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
关于vue-router-link选择样式设置
Apr 30 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桌面中心(四) 数据显示
2007/03/11 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
图像替换新技术 状态域方法
2010/01/28 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
2015/06/19 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
一个可复用的vue分页组件
2017/05/15 Javascript
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
详解关于表格合并span-method方法的补充(表格数据由后台动态返回)
2019/05/21 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
js正则匹配多个全部数据问题
2019/12/20 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
python学习之matplotlib绘制散点图实例
2017/12/09 Python
详解Django的CSRF认证实现
2018/10/09 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
解决jupyter notebook import error但是命令提示符import正常的问题
2020/04/15 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python基于gevent实现文件字符串查找器
2020/08/11 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
Dr. Martens马汀博士法国官网:马丁靴鼻祖
2020/01/15 全球购物
什么是静态路由?什么是动态路由?各自的特点是什么?
2015/09/16 面试题
物业管理个人自我评价
2013/11/08 职场文书
祝福语集锦:给满月宝宝的祝福语
2019/11/20 职场文书
HAM-2000摩机图
2021/04/22 无线电