el-table動態合並行列

一、場景

根據接口返回數據，將ID相同的數據進行合並。

el-table自帶的方法可以固定的合並，但是不能夠隨機分。

 

二、思路

先將查詢出的列表數據分出哪幾列以及哪幾行需要進行合並，並且合並多少行或多少列；如spanArr

再將這些數據記錄（spanArr）放進一個空數組中，合並的時候再根據這個數組進行相應的合並。

通過添加 :span-method="objectSpanMethod" 來自定義合並規則。

方法的參數是一個對象，里面包含當前行 row、當前列 column、當前行號 rowIndex、當前列號 columnIndex四個屬性。

該函數可以返回一個包含兩個元素的數組，第一個元素代表 rowspan，第二個元素代表 colspan。 也可以返回一個鍵名為 rowspan和 colspan的對象。

 <el-table
      :data="tableData"
      :span-method="objectSpanMethod">
      <el-table-column  prop="firstNodeName" label="考核內容">
      </el-table-column>
      <el-table-column prop="secondNodeName" label="考核項目">
      </el-table-column>
      <el-table-column  prop="shortName"  label="評價項目">
      </el-table-column>
       <el-table-column  prop="standard" label="考核標准">
      </el-table-column>
     <el-table-column fixed prop="evaluateScoreType" label="分值" >
     </el-table-column>
</el-table> 

JS代碼：

methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     //row:對象形式，保存了當前行的數據 
     //column：對象形式，保存了當前列的參數 
     //rowIndex:當前行的行號 
     //column：當前列的列號
      if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,  //rowspan:單元格可橫跨的行數
          colspan: _col,  //colspan:單元格可橫跨的列數 
        }
      } else if (columnIndex === 1) {
        const _row = this.contentSpanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0 //等於0表示不合並
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },

    rowspan() {
      this.indexList.forEach((item, index) => {
        if (index === 0) {
          this.spanArr.push(1)
          this.position = 0
          this.contentSpanArr.push(1)
          this.pos = 0
        } else {
          //判斷當前元素與上一行元素是否相同（第一列和第二列）
          if (this.indexList[index].firstNodeName === this.indexList[index - 1].firstNodeName) {
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.position = index
          }
          // 第三列
          if (this.indexList[index].secondNodeName === this.indexList[index - 1].secondNodeName) {
            this.contentSpanArr[this.position] += 1
            this.contentSpanArr.push(0)
          } else {
            this.contentSpanArr.push(1)
            this.pos = index
          }
        }
      })
    },
}

 

三、數據處理

<el-table :data="tableData"></eltable>只能渲染一個數組中保存多條扁平化的對象類型數據,

如果接口返回的數據格式不符合 這個渲染格式需要先處理數據。

 tableData: [{
          id: '12987122',
          name: '張三',
          amount1: '234',
          amount2: '8',
        }, {
          id: '12987123',
          name: '王李四',
          amount1: '165',
          amount2: '9',
        }]

 

四、表格合並方法

objectSpanMethod中寫的是合並規則。在這之前先找出需要合並的單元格。

通過getSpanArr(),該方法需要加在頁面渲染之前獲取列表數據的方法中並傳入列表需要渲染的數據作為參數。

//因為要合並的行數是不固定的，此函數實現隨意合並行數的功能

//spanArr初始為一個空的數組，用於存放每一行記錄的合並數

getSpanArr（）{
　　this.indexList.forEach((item, index) => {
        if (index === 0) {
          //如果是第一條數據，向數組中加1，占住位置
          this.spanArr.push(1)  
          this.position = 0
        } else {
          if (this.indexList[index].parentId === this.indexList[index - 1].parentId) {
            //如果parentId相同, 合並行數加1，
            this.spanArr[this.position] += 1
            this.spanArr.push(0)
          } else {
            //數組后移1位
            this.spanArr.push(1)
            this.position = index
          }
        }
      })
}

//實現parentId相同的值合並

 objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
      if (columnIndex === 1) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },

效果：

 

 

 參考;https://www.cnblogs.com/qjh0208/p/14108189.html