美文网首页
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