Vue Elenent实现表格相同数据列合并
编程学习 2021-07-04 14:07www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了Vue Elenent实现表格相同数据列合并,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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) /
编程语言
- ThinkPad 笔记本如何调节LCD屏幕亮度
- Dreamweaver制作网页打开特效教程
- Win10 Mobile 10586升级后无限重启怎么办 硬重启帮您
- Win8系统提示音频设备有问题有一个或多个音频服
- Xbox One版Win10首个预览版9月份发布
- 如何在textarea文本输入区内实现换行
- Win10 Build 9901系统更新 预览版新版本下载
- McAfee Framework存在远程格式串处理漏洞
- Win10家庭版今日(7月30)正式在中国官方商城开卖
- Win10 Mobile预览版更新完10536.1000后才收到10536.100
- Win10 RS2更新了什么-Win10 RS2最终版本号1704首曝
- Windows7如何查看回收站对应的文件夹有哪些方法
- Win10让Charms栏回归桌面的方法教程
- 取消Windows XP系统开机启动画面的小技巧
- win8系统怎么下载安装USB百兆网卡?
- XP系统下磁盘空间变少了怎么办?XP系统磁盘空间