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 相关文章推荐
六款帮助你实现惊艳视差滚动效果的jQuery插件
Sep 14 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
Apr 20 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
不使用 JS 匿名函数理由
Nov 17 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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
PHP中的integer类型使用分析
2010/07/27 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP json格式和js json格式 js跨域调用实现代码
2012/09/08 PHP
探讨方法的重写(覆载)详解
2013/06/08 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
Windows 系统下安装和部署Egret的开发环境
2014/07/31 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
2017/07/27 Javascript
vue路由导航守卫和请求拦截以及基于node的token认证的方法
2019/04/07 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
Python在groupby分组后提取指定位置记录方法
2018/04/20 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
python 计算一个字符串中所有数字的和实例
2019/06/11 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
Python如何定义有可选参数的元类
2020/07/31 Python
解决PyCharm不在run输出运行结果而不是再Console里输出的问题
2020/09/21 Python
简述Linux文件系统通过i节点把文件的逻辑结构和物理结构转换的工作过程
2016/01/06 面试题
教师评优的个人自我评价分享
2013/09/19 职场文书
建材业务员岗位职责
2013/12/08 职场文书
学校联谊协议书
2014/09/16 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
走群众路线学习笔记
2014/11/06 职场文书
2015年大学宣传部工作总结
2015/05/26 职场文书
活动主持人开场白
2015/05/28 职场文书
公司欠款证明
2015/06/24 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python