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 empfehlen

Das Prinzip und die Implementierung der bidirektionalen Bindung in Vue2.x

Inhaltsverzeichnis 1. Implementierungsprozess 2. ...

Detaillierte Erklärung zu Padding und Abkürzungen im CSS-Boxmodell

Wie oben gezeigt, sind Füllwerte zusammengesetzte...

Einfache Kapselung von Axios und Beispielcode zur Verwendung

Vorwort Als ich kürzlich ein Projekt erstellte, d...

Kreativer Eröffnungseffekt durch die Kombination von CSS 3.0 mit Video

Ich möchte Ihnen einen kreativen Einstieg vorstel...

Detaillierte Erklärung inkompatibler Änderungen von Komponenten in vue3

Inhaltsverzeichnis Funktionale Komponenten So sch...

So installieren Sie MySQL 8.0 und melden sich bei MySQL unter MacOS an

Folgen Sie dem offiziellen Tutorial, laden Sie da...

Zusammenfassung häufig verwendeter SQL-Operationen in MySQL-Tabellen

1. Sehen Sie sich die Feldtypen in der Tabelle an...

Vue verwendet das Video-Tag, um die Videowiedergabe zu implementieren

In diesem Artikel wird der spezifische Code von V...

Grundlegendes Tutorial zur Steuerung des mobilen Roboters Turtlebot3 mit ROS

Chinesisch-Tutorial https://www.ncnynl.com/catego...

Schritte zum Einrichten des Windows Server 2016 AD-Servers (Bild und Text)

Einführung: AD ist die Abkürzung für Active Direc...

Welche Szenarien sind für JS-Pfeilfunktionen nicht geeignet?

Inhaltsverzeichnis Überblick Definieren von Metho...

Anweisungen zum Erlernen von Vue

Inhaltsverzeichnis 1. v-Text (v-Befehlsname = „Va...

HTML-Webseite: geordnete Liste ol und ungeordnete Liste ul

Listen zum Organisieren von Daten Nachdem die Les...

Detaillierte Erklärung, wie Zabbix den Master-Slave-Status von MySQL überwacht

Nach dem Einrichten des MySQL-Master-Slaves wisse...