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

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

Artikel    

Artikel empfehlen

So zeigen Sie die Zeitzone in MySQL an und ändern sie

Heute habe ich festgestellt, dass ein Programm ei...

Beispiel für eine MySQL-Datenbank-übergreifende Transaktions-XA-Operation

In diesem Artikel wird die MySQL-Datenbank-übergr...

Prinzip und Anwendungsbeispiele des URL-Umschreibmechanismus von Nginx

Durch das Umschreiben der URL lässt sich die bevo...

Informationen zum Ausdruck „wenn Komma enthält“ in JavaScript

Manchmal sehen Sie in der if-Anweisung in JavaScr...

Detaillierte Erläuterung des Zeitdarstellungsbeispiels des Linux-Zeitsubsystems

Vorwort Um zum Originalcode kompatibel zu sein, b...

Pygame-Code zum Erstellen eines Schlangenspiels

Inhaltsverzeichnis Verwendete Pygame-Funktionen E...

Tutorial zur SQL-Optimierung: IN- und RANGE-Abfragen

Vorwort In „High Performance MySQL“ wird erwähnt,...

Führen Sie die Shell oder das Programm im Docker-Container auf dem Host aus.

Um zu vermeiden, dass für den Betrieb immer wiede...