Element表格合并

yy13818512006 发布于2019-08-26 13:52 / 2940人阅读

摘要：注意在合并第一行后需要合并第二行时需要判断要合并的第二行的第一行值是不是一样在这里我的处理方式是第二行的值加上第一行希望写的对大家有用如果我写的没看明白的可以联系我

var mergeIndex = 0;
var hasMerge = false;
var mergeIndex1 = 0;
var hasMerge1 = false;
//方法的全局变量
//官网给我们提供了span-method的方法可以进行表格合并,有4个参数返回:row,column,rowIndex,columnIndex;row和column是表格的行和列,里面是当前行和列的值,也就是tableData里的值,rowIndex,columnIndex是当前行和列的序号
arraySpanMethod({ row, column, rowIndex, columnIndex }) {

    var that = this;
    var spanNum = this.spanNum;
    var spanNum1 = this.spanNum1;
    console.log("FFF",spanNum)
  //   合并第二列
    if (columnIndex === 1) {
      var num = spanNum1[row.fldSTName+"-"+row.fldRName];
      if (!hasMerge) {
        hasMerge = true;
        mergeIndex = rowIndex;
        if (num === 1) {
          hasMerge = false;
        }
        return [num, 1];//[10,1]
      } else {
        if (rowIndex === mergeIndex + num - 1) {
          hasMerge = false;
        }
        return [0, 0];
      }
    }
    //合并第一列
    if (columnIndex == 0) {
      var num = spanNum[row.fldSTName];
      if (!hasMerge1) {
        hasMerge1 = true;
        mergeIndex1 = rowIndex;
        if (num === 1) {
          hasMerge1 = false;
        }
        return [num, 1];
         // 这里返回的是行和列的合并数量,可以返回一个数组,也可以返回一个对象,效果一样
         // 这里rowspan为num是几行就有几行合并,colspan为1列有1列合并,你要合并几行几列就写上相应的数字
      } else {//对合并后的
        if (rowIndex === mergeIndex1 + num - 1) {
          hasMerge1 = false;
        }
        return [0, 0];
       // 这里要写一个else的判断,不然被合并列的原始数据会填充到合并之后的表格里
      // 这个判断是把合并的前几行值省略,直接填原先最后行的值,合并了几行,就省略几行的值
      }
    }
}

上面是我封装的一个合并行的方法  合并列一样
用上面的方法首先需要处理一下数据 把需要合并的排列在一起，这里的spanNum的数据格式是

arr数组里面包含的是你合并行的唯一数据（有很多大同市但这里只会出现一次）,这里row.fldSTName是合并行的当前值。注意在合并第一行后需要合并第二行时需要判断要合并的第二行的第一行值是不是一样

在这里我的处理方式是第二行的值加上第一行（row.fldSTName+"-"+row.fldRName）

希望写的对大家有用如果我写的没看明白的可以联系我QQ1195392918

GPU云服务器云服务器表格合并 python合并表格怎么合并表格html html表格合并线

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109697.html

element-ui table表格动态列合并

摘要：前言的时候没有表格合并的方法，这当时做表格合并的功能时候，非常头疼。开始官方已经支持表格合并的方法，那怎么做到表格动态合并呢，还是直接看代码吧。该函数可以返回一个包含两个元素的数组，第一个元素代表，第二个元素代表。前言 element-ui 1.0的时候没有表格合并的方法，这当时做表格合并的功能时候，非常头疼。2.0开始官方已经支持表格合并的方法，那怎么做到表格动态合并呢，还是直接看...

isLishude 2019-08-23 10:35 评论0 收藏0
element-ui表格数据的应用

摘要：需求原型需求对表格一列每行都添加一个按钮。整个表格每过自动刷新一次。后端返回数据的为的数据思路两个接口的数据。在获取的数据后，再遍历两个数据。根据对应的，合并到值再渲染到页面上。核心代码获取表格数据待刷新单次点击获取的数据需求原型showImg(https://segmentfault.com/img/bVbcRQR?w=380&h=76);需求：对表格date一列,每行都添加一个按...

simon_chen 2019-08-22 18:21 评论0 收藏0
vue elementUI table 自定义表头和行合并

摘要：最近项目中做表格比较多，对表格的使用，只需要传递进去数据，然后写死表头即可渲染。该函数可以返回一个包含两个元素的数组，第一个元素代表，第二个元素代表。也可以返回一个键名为和的对象。最近项目中做表格比较多，对element表格的使用，只需要传递进去数据，然后写死表头即可渲染。但现实中应用中，如果写死表头，并且每个组件中写自己的表格，不仅浪费时间而且消耗性能。这个时候需要动态渲染表头。...

funnyZhang 2019-08-26 13:53 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

soasme 2019-08-02 16:07 评论0 收藏0
jsu系列之表格组件 ---- jsu.Table

摘要：作者注是基于扩展的原生表格插件，设计理念来源于的组件该库基于，暂时未找到版本因此在此造轮子。本文将记录系列所有组件开发过程中遇到的问题和解决思路，欢迎讨论和指正。作者注：jsu.Table是基于jQuery扩展的原生表格插件，设计理念来源于Element.ui的Table组件（该UI库基于vue.js，暂时未找到jQuery版本因此在此造轮子）。本文将记录jsu系列所有组件开发过程...

everfly 2019-08-23 14:05 评论0 收藏0