美文网首页
elementui动态合并单元格(亲测好用)

elementui动态合并单元格(亲测好用)

作者: 飞吧666 | 来源:发表于2021-02-20 16:12 被阅读0次
    //这个方法 重要 ,这个方法是将数组中的对象 按照分类进行合并单元格的方法(直接复制使用(引用的别人的 没仔细研究))
     mergeComon(id, rowIndex) { // 合并单元格
          var idName = this.articlesData[rowIndex][id]
          if (rowIndex > 0) {
            // eslint-disable-next-line eqeqeq
            if (this.articlesData[rowIndex][id] != this.articlesData[rowIndex - 1][id]) {
              var i = rowIndex; var num = 0
              while (i < this.articlesData.length) {
                if (this.articlesData[i][id] === idName) {
                  i++
                  num++
                } else {
                  i = this.articlesData.length
                }
              }
              return {
                rowspan: num,
                colspan: 1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 1
              }
            }
          } else {
            var i = rowIndex; var num = 0
            while (i < this.articlesData.length) {
              if (this.articlesData[i][id] === idName) {
                i++
                num++
              } else {
                i = this.articlesData.length
              }
            }
            return {
              rowspan: num,
              colspan: 1
            }
          }
        },
    
    // 这个方法是 element-ui提供的单元格合并方法
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {  // 合并单元格
          switch (columnIndex) {
            case 0:
              return this.mergeComon('b0111Result', rowIndex)
            case 1:
              return this.mergeComon('b0111Result', rowIndex)
              // eslint-disable-next-line no-unreachable
              break
            case 2:
              return this.mergeComon('b0111Result', rowIndex)
          }
        },
    

    效果:按照数组中的数据 动态的分组


    20200812132850878.png

    相关文章

      网友评论

          本文标题:elementui动态合并单元格(亲测好用)

          本文链接:https://www.haomeiwen.com/subject/xcqxfltx.html