el-table動態獲取數據合併行列

element自帶的方法不能夠隨機分,只能是固定的去合併,這裏我的需求是根據圖片的id去合併,一張圖片可能對應多個題型在這裏插入圖片描述在這裏插入圖片描述

獲取到的數據同時賦給tableData和spanArr,並在獲取到數組的函數裏執行getSpanArr方法,相當於給table賦值的還是用tableData 但是切割table是用的spanArr方法。
在這裏插入圖片描述

getSpanArr (data) {
      this.spanArr = [] // 定義在vue的data中
      if (data === null) {
        return
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          if (data[i].pictureId === data[i - 1].pictureId) {  // 我這裏是根據圖片去合併列,一張圖片可能會對應多個題
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
      }
    },
arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 1 || columnIndex === 0) {  // 第一行和第二行進行合併
        const _row = this.spanArr[rowIndex] // 從處理完的數組裏獲取
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col // 相當於給給表格加上rowspan,colspan屬性
        }
      }
    },

在這裏插入圖片描述
以上是合併一種,當要動態合併不同列的時候,再新增一個數組。getSpanArr的時候多套一層if,arraySpanMethod函數裏去用
在這裏插入圖片描述
在這裏插入圖片描述
在這裏插入圖片描述

arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // 每次走到第3列時給單元格加上rowspan和colspan屬性
        const _row = this.spanArr[rowIndex] // 從處理完的數組裏獲取
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col // 相當於給給表格加上rowspan,colspan屬性
        }
      } else if (columnIndex === 1) {
        const _row = this.contentSpanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
getSpanArr (data) {
      this.spanArr = [] // 定義在vue的data中
      this.contentSpanArr = []
      if (data === null) {
        return
      }
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
          this.contentSpanArr.push(1)
          this.position = 0
        } else {
          if (data[i].differentia === data[i - 1].differentia) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
          if (data[i].classifyName === data[i - 1].classifyName) {
            this.contentSpanArr[this.position] += 1
            this.contentSpanArr.push(0)
          } else {
            this.contentSpanArr.push(1)
            this.position = i
          }
        }
      }
    }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章