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通过元素id和name直接取得元素的方法
Apr 28 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 Javascript
js严格模式总结(分享)
Aug 22 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 Javascript
微信小程序基于高德地图API实现天气组件(动态效果)
Oct 22 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
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中创建并处理图象
2006/10/09 PHP
php中几种常见安全设置详解
2010/04/06 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
php多个文件及图片上传实例详解
2014/11/10 PHP
php简单实现批量上传图片的方法
2016/05/09 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
javascript Array数组对象的扩展函数代码
2010/05/22 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
Js日期选择器并自动加入到输入框中示例代码
2013/08/02 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
基于replaceChild制作简单的吞噬特效
2015/09/21 Javascript
javascript电商网站抢购倒计时效果实现
2015/11/19 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
怎样写好自我评价呢?
2014/02/16 职场文书
2014年店长工作总结
2014/11/17 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
会计求职自荐信范文
2015/03/04 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
离婚民事起诉状
2015/08/03 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python