vue element 合并列表格(当同一列前后相同 合并表格)

《vue element 合并列表格(当同一列前后相同 合并表格)》

《vue element 合并列表格(当同一列前后相同 合并表格)》

《vue element 合并列表格(当同一列前后相同 合并表格)》

《vue element 合并列表格(当同一列前后相同 合并表格)》

《vue element 合并列表格(当同一列前后相同 合并表格)》

rowspan() {
      // 在data里面定义
      this.spanArr = []
      // 在data里面定义
      this.position = 0
      this.dass.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
          // 设置序号
          item.sequence = index + 1
        } else {
          if (this.dass[index].stNa === this.dass[index - 1].stNa) {
            // 连续有几行项目名名称相同
            this.spanArr[this.position] += 1
            // 名称相同后往数组里面加一项0
            this.spanArr.push(0)
            console.log(this.spanArr)
            // 当项目名称相同时,设置当前序号和前一个相同
            this.dass[index].sequence = this.dass[ index - 1].sequence
          } else {
            this.spanArr.push(1)
            this.position = index
            // 当项目名称不同时,将当前序号设置为前一个序号+1
            this.dass[index].sequence = this.dass[ index - 1].sequence + 1
          }
        }
      })
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      // 表格合并行
      // 序号列也进行合并(第一列)
      if (columnIndex === 0) {
        // this.spanArr这个数组里面存的是table里面连续的有几条数据相同
        // 例如:[1,1,2,0,2,0]
        //  1  代表的没有连续的相同的
        //  2  代表连续的两个相同
        //  0  代表是和上一条内容相同
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        /* console.log('ppp')
        console.log(_row)
        console.log(_col) */
        return {
          rowspan: _row,
          colspan: _col
        }
      }
      /* if (columnIndex === 1) { // 项目列也进行合并(第二列)
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      } */
    },
    原文作者:qi_gaolei
    原文地址: https://blog.csdn.net/weixin_44178762/article/details/107857410
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞