前言

  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 方法上面

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
// }
// }
},

  展示结果

  

注意注意

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

  

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

Fannie式总结

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

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

  

element 动态合并表格的更多相关文章

  1. jquery动态合并表格行

    利用<td rowspan = "num"/>;原理来实现,其中num为要合并的行数. <!DOCTYPE html> <html> <h ...

  2. javascript动态合并表格相同的单元格

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  3. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

  4. Bootstrap-table实现动态合并相同行(表格同名合并)

    写在前面: 有时候表格的需求就是奇奇怪怪的,最近要做的表格需要实现当紧挨着的记录的某一列的行元素内容相同,就将其合并.要是不是相同的就不合并.如果表格数据的顺序不需要被改变,这个样子是可以很简单就完成 ...

  5. vue+element创建动态的form表单.以及动态生成表格的行和列

    动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言. 最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v ...

  6. element ui的表格列设置fixed后做动态表格出现表格错乱

    最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机 ...

  7. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格   一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...

  8. js/jq动态创建表格的行与列

    之前做了一个项目,需求是能动态创建表格行,动态创建表格的列,度了很多资料,都没有动态创建列的插件,所以自己动手写了一个 需求大概是(下图) 1.动态添加一行.2.动态添加一列,3.删除行.4.删除列, ...

  9. 第84天:jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. 神经网络hopfield的学习

    Hopfield神经网络使用说明. 该神经网络有两个特点: 1,输出值只有0,1 2,Hopfield没有输入(input) 这里解释一下第二个特点,什么叫没有输入?因为在使用Hopfield网络的时 ...

  2. UVALive 5886 The Grille (模拟)

    The Grille 题目链接: http://acm.hust.edu.cn/vjudge/problem/26634 Description http://7xjob4.com1.z0.glb.c ...

  3. (转)IIS7 优化-网站请发并发数

    1. 调整IIS 7应用程序池队列长度 由原来的默认1000改为65535. IIS Manager > ApplicationPools > Advanced Settings Queu ...

  4. [分享] 自动化测试与持续集成方案-- UI 检查

    对于自动化测试中,UI 自动化测试估计是最有争议的,让人又爱又恨. UI 自动化做回归测试,可以省下很多人力.如果版本一直不稳定,投入跟产出不成比例的. 时机 一般是要版本稳定,界面改动不大.如果迭代 ...

  5. mime.go

    package manager import (     "mime"     "path" ) //初始化数据 func init() {     if mi ...

  6. Json常用操作

    1, 获取json字符串中属性(传统方式) import net.sf.json.JSONObject JSONObject json = JSONObject.fromObject(response ...

  7. webpack 入口:entry

    定义一个入口点就生成一个chunk.如果你只是用字符串的方式定义了一个入口点,其就被命名为main.如果你用对象的方式定义多个入口点,其就被命名为入口对象中的键值.下面两个例子是等价的: entry: ...

  8. PHP编译安装时常见错误解决办法,php编译常见错误

    PHP编译安装时常见错误解决办法,php编译常见错误 1.configure: error: xslt-config not found. Please reinstall the libxslt & ...

  9. gcc __attribute__关键字举例之visibility【转】

    转自:https://blog.csdn.net/starstarstone/article/details/7493144?utm_source=tuicool&utm_medium=ref ...

  10. Top 20 NuGet packages for captcha

    Top 20 NuGet packages for captcha CaptchaMvc.Mvc4 CaptchaMvc will implement your web MVC application ...