element 动态合并表格的步骤


Posted in Javascript onDecember 31, 2020

前言

element 官方的例子太简单了,不满足实际的需求

数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢

需求

动态合并表格,数据来源于数据库

正文

一开始,我的数据源是单独的数组,表格数据合并了几个数据,

我根据各个数组的长度,来决定每一行的合并数

结果:有些数据是正常的,但有些又合并出错了。计算的方式不对

element 动态合并表格的步骤

尝试二 

dataPretreatment() 用这个方法 计算出每一行的行数

dataPretreatment(){  //表格数据列合并预处理,生成一个与行数相同的数组记录每一行设置的合并数
    // 如果是第一条记录(索引为0),向数组中加入1,并设置索引位置;
    // 如果不是第一条记录,则判断它与前一条记录是否相等,如果相等,
    // 则向mergingRows中添入元素0,并将前一位元素+1,表示合并行数+1,
    // 以此往复,得到所有行的合并数,0即表示该行不显示。
     for(let i = 0; i < this.tableData.length; i ++){ // tabledata 表格数据源
       if(i === 0){
         this.mergingRows.push(1)
         this.mergingPos = 0
       }else {
        if(this.tableData[i].name === this.tableData[i - 1].name) { //哪些数据是要合并的 合并的条件是什么
         
          this.mergingRows[this.mergingPos] +=1
          this.mergingRows.push(0)
        }else {
          this.mergingRows.push(1)
          this.mergingPos = i
        }
       }
     }
   },

用这个方法 mergeColumn()绑定到官方提供的span-method 方法上面

element 动态合并表格的步骤

mergeColumn({row, column, rowIndex, columnIndex}){
     if (columnIndex === 0) { //第一列
       const _row = this.mergingRows[rowIndex];
       const _col = _row>0 ? 1 : 0;
       return {
        rowspan: _row,
        colspan: _col
       }
     }
    // if(columnIndex === 1){ //第二列 每一行的条件可以不一样 这样就是动态多样合并表格啦
    //   const _row = this.mergingRows[rowIndex];
    //   const _col = _row>0 ? 1 : 0;
    //   return {
    //     rowspan: _row,
    //     colspan: _col
    //   }
    // }   
   },

展示结果

element 动态合并表格的步骤

注意注意

      1. 第一列 计算出要合并的行数

element 动态合并表格的步骤

2.发现鼠标在表格移动  mergeColumn()这个方法一直在调用

Fannie式总结

一定要高清每一行的合并行数,按列来区分的

切记切记哦!不然表格合并出来的 跟你想象的不一样

以上就是element 动态合并表格的步骤的详细内容,更多关于element 动态合并表格的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript document.referrer 用法
Apr 30 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
JS简单生成随机数(随机密码)的方法
May 11 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
前端跨域的几种解决方式总结(推荐)
Aug 16 Javascript
基于Vue.js 2.0实现百度搜索框效果
Dec 28 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
Vue2.0点击切换类名改变样式的方法
Aug 22 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
jquery检测上传文件大小示例
Apr 26 jQuery
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
Nov 10 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 #Vue.js
Selenium执行JavaScript脚本的方法示例
Dec 31 #Javascript
javascript实现随机抽奖功能
Dec 30 #Javascript
JS+JQuery实现无缝连接轮播图
Dec 30 #jQuery
微信小程序弹窗禁止页面滚动的实现代码
Dec 30 #Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 #Vue.js
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 #Vue.js
You might like
第十五节--Zend引擎的发展
2006/11/16 PHP
php操作JSON格式数据的实现代码
2011/12/24 PHP
php+mysql开发的最简单在线题库(在线做题系统)完整案例
2019/03/30 PHP
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
js实现两点之间画线的方法
2015/05/12 Javascript
vue-loader教程介绍
2017/06/14 Javascript
基于Vue2.0+ElementUI实现表格翻页功能
2017/10/23 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
Angular项目如何升级至Angular6步骤全纪录
2018/09/03 Javascript
浅析Proxy可以优化vue的数据监听机制问题及实现思路
2018/11/29 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
2019/09/03 Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
2020/05/20 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
谈谈python中GUI的选择
2018/03/01 Python
python 获取当天凌晨零点的时间戳方法
2018/05/22 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
解决python3.5 正常安装 却不能直接使用Tkinter包的问题
2019/02/22 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
Tensorflow限制CPU个数实例
2020/02/06 Python
Python Django中的STATIC_URL 设置和使用方式
2020/03/27 Python
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
英国最大的海报商店:GB Posters
2018/03/20 全球购物
深入开展党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014年减负工作总结
2014/12/10 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
业务员管理制度范本
2015/08/06 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
python办公自动化之excel的操作
2021/05/23 Python
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS