Vue+el-table realisiert das Zusammenführen von Zellen

In diesem Artikelbeispiel wird der spezifische Code von el-table zur Realisierung der Zusammenführung von Zellen zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

el-table Zellen zusammenführen (vue+element)

- Zuerst in el-table einfügen: span-method="arraySpanMethod"

<el-table :header-cell-style="{background:'#eef1f6',color:'#606266'}" :data="merchantList" border :span-method="arraySpanMethod">
          <el-table-column align="center" prop="provinceName" label="Provinz"> </el-table-column>
          <el-table-column align="center" label="Agentenname">
            <Vorlage Umfang="Umfang">
              <span>{{scope.row.parentMerchantName == scope.row.merchantName ? '---' : scope.row.parentMerchantName}}</span>
            </Vorlage>
          </el-Tabellenspalte>
          <el-table-column align="center" prop="cityName" label="Stadt"> </el-table-column>
          <el-table-column align="center" prop="countryName" label="Land"> </el-table-column>
          <el-table-column align="center" prop="merchantName" label="Händlername"> </el-table-column>
</el-Tabelle>

Schreiben Sie die Methode in Methoden:

//Zellen zusammenführen arraySpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {//Merge-Methode für die erste Spalte, Provinz const _row_1 = this.provinceArr[rowIndex];
        const _col_1 = _row_1 > 0 ? 1 : 0; //Wenn es zusammengeführt wird, _row=0, dann muss diese Spalte gelöscht werden return {
          Zeilenbereich: _Zeile_1,
          colspan: _col_1
        }
      } 
    },
    // Initialisiere merageInit () {
      diese.provinceArr = []
      diese.provincePos = 0
    },
    //Methode zum Zusammenführen von Arrays merge() {
      dies.merageInit()
      für (var i = 0; i < this.merchantList.length; i++) {
        wenn (i === 0) {
          //Die erste Zeile muss vorhanden sein this.provinceArr.push(1)
          diese.provincePos = 0
        } anders {
          // Bestimmen Sie, ob das aktuelle Element mit dem vorherigen Element identisch ist. this.provincePos ist die Seriennummer des ProvinceArr-Inhalts //province if (this.merchantList[i].provinceName === this.merchantList[i - 1].provinceName) {
            diese.provinzArr[diese.provinzPos] += 1
            diese.provinceArr.push(0)
          } anders {
            diese.provinceArr.push(1)
            diese.provincePos = i
          }
        }
      }
    },

Ergebnisse:

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Vue verbindet Zellen dynamisch und fügt Zwischensummen hinzu – Beispielfunktion
Implementierung der Zusammenführung mehrerer Spalten von Vue-Zellen
Antd Vue Table führt Zellen über Zeilen hinweg zusammen und passt Inhaltsinstanzen an
In Vue führt die Element-UI-Tabelle dieselben Datenzellen in den oberen und unteren Zeilen zusammen

<<: Kenntnisse über die MySQL Memory-Speicher-Engine

>>: Das Konzept von MTR in MySQL