Benutzerdefinierte Zusammenführungsspalte von el-table

Das Zusammenführen von Zeilen oder Spalten kann durch Übergabe span-methodeiner Methode an die Tabelle erreicht werden. Der Parameter der Methode ist ein Objekt, das vier Attribute enthält: die aktuelle Zeile row, die aktuelle Spalte column, die aktuelle Zeilennummer rowIndexund die aktuelle Spaltennummer . columnIndexDiese Funktion kann ein Array mit zwei Elementen zurückgeben, wobei das erste Element darstellt rowspanund das zweite Element darstellt colspan. Es ist auch möglich, ein Objekt mit den Schlüsselnamen rowspanund zurückzugeben .colspan

1. Montage der El-Tischelementespan-method

<el-table v-if="show" border size='small' :max-height="maxHeightA" class="attendance-report" :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" :cell-style="cellStyle" :span-method="abilitySpanMethod">

2. Implementieren Sie Funktionen in Methoden

methods: {
	abilitySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex == 0
      ) {
        //要合并的在第几列
        const _row = this.tableCombine().one[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col, 
        }
      }
    },
    tableCombine() {
      let spanOneArr = [],
        spanTwoArr = [],
        concatOne = 0,
        concatTwo = 0
      this.tableData.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
          spanTwoArr.push(1)
        } else {
          if (item.deptName === this.tableData[index - 1].deptName) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr,
        two: spanTwoArr,
      }
    }
}