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 相关文章推荐
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
使用JavaScript制作一个简单的计数器的方法
Jul 07 Javascript
js表单登陆验证示例
Oct 19 Javascript
vue中appear的用法
Aug 17 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
使用 vue.js 构建大型单页应用
Feb 10 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
基于vue写一个全局Message组件的实现
Aug 15 Javascript
使用layui的router来进行传参的实现方法
Sep 06 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
TypeScript 内置高级类型编程示例
Sep 23 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
ThinkPHP利用PHPMailer实现邮件发送实现代码
2013/09/26 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
jquery中获取元素的几种方式小结
2011/07/05 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
初始Nodejs
2014/11/08 NodeJs
angularjs指令中的compile与link函数详解
2014/12/06 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
详解JavaScript中的事件流和事件处理程序
2016/05/20 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
easy ui datagrid 从编辑框中获取值的方法
2017/02/22 Javascript
Vue resource中的GET与POST请求的实例代码
2017/07/21 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
vue数据初始化initState的实例详解
2019/04/11 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
Vue computed 计算属性代码实例
2020/04/22 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
go语言计算两个时间的时间差方法
2015/03/13 Python
Python实现LRU算法的2种方法
2015/06/24 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
用Python写一个自动木马程序
2019/09/17 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
使用Python判断一个文件是否被占用的方法教程
2020/12/16 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
Internal修饰符有什么含义
2013/07/10 面试题
经理秘书岗位职责
2013/11/14 职场文书
珍惜时间演讲稿
2014/05/14 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
详细谈谈MYSQL中的COLLATE是什么
2021/06/11 MySQL
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS