Beispiel für die Implementierung einer eingebetteten Tabelle mit vue+elementUI

Beispiel für die Implementierung einer eingebetteten Tabelle mit vue+elementUI

Während meines Praktikums im letzten Studienjahr stieß ich auf eine besondere Anforderung: Ich musste auf die Nummer eines Datensatzes in einer Tabelle klicken, woraufhin unter den Daten eine neue Tabelle erschien. Diese Anforderung wird auch in der offiziellen Dokumentation von Element UI behandelt. Im Folgenden finden Sie den endgültigen Implementierungseffekt nach dem Verweis auf andere Blogs (ich kann die Blogadresse nicht finden) und Element UI.

Rendern

Ich weiß nicht, ob es an den langsamen Computern des Unternehmens liegt oder ob ein Softwareproblem vorliegt, das die aufgezeichneten Motion Graphics so ruckeln lässt, aber im tatsächlichen Betrieb kommt es nicht zu Verzögerungen.

Bildbeschreibung hier einfügen

Code:

Seitenanzeigecode:

Der Hauptcode ist <el-table-column type="expand" width="1" >
Offizielle Erklärung type="expand" :
通過設置type="expand" 和Scoped slot 可以開啟展開行功能，el-table-column 的模板會被渲染成為展開行的內容，展開行可訪問的屬性與使用自定義列模板時的Scoped slot 相同。
Schließlich wird durch Festlegen von el-table-column auf type="expand" mit width="1" das angezeigte Pfeilsymbol ausgeblendet.

Der gesamte Codefluss ist wie folgt:
Die Datentabelle ist in Haupttabelle und Untertabelle unterteilt. Beim ersten Laden der Seite werden die Haupttabellendaten (dh die normale Tabellendatentabelle, die als Haupttabelle bezeichnet wird) angezeigt. Wenn ich auf den Navigationsnamen einer Datenzeile in der Haupttabelle klicke, wird ein Klickereignis toogleExpand() ausgelöst. Die Hauptfunktion dieses Ereignisses besteht darin, im Hintergrund anhand der ID der angeklickten Daten nach den entsprechenden Untertabellendaten zu suchen, diese an das Front-End zurückzugeben und sie schließlich am Front-End anzuzeigen.
Beachtenswert bei diesem Vorgang ist, wie die Daten der Untertabelle nach dem Abrufen der entsprechenden Daten nacheinander mit den Daten der Haupttabelle verknüpft werden.
Hier implementiere ich es mithilfe von Map, mit der Haupttabellen-ID als Schlüssel und den Untertabellendaten als Wert.

// Kartenstruktur verwenden, um Übersetzungsliste zu speichern this.WebsiteLangMap.set(id,response.rows)

An dieser Stelle besteht noch ein Problem.
Wenn die Seite gerade geladen wurde, enthält der erste Klick zum Öffnen der entsprechenden eingebetteten Tabelle keine Daten. Erst beim zweiten Öffnen sind Daten vorhanden.
Denn wenn die Tabelle zum ersten Mal gerendert wird, enthält die von uns gespeicherte Karte der untergeordneten Tabellendaten keine Daten, sodass beim ersten Klick keine Daten angezeigt werden (wie man ohne Daten rendert). Die Daten, die wir erhalten, sind die Daten, die nach dem Auslösen des Klickereignisses toogleExpand() angefordert werden. Das heißt, die Daten sind erst nach dem Rendern verfügbar. Ich dachte ursprünglich, dass es wie ein Listener sein könnte, der in der Lage ist, data in Echtzeit abzuhören und die Seite zu rendern, aber das kann es nicht.
Die Lösung besteht darin, das Schlüsselattribut der el-table zu steuern und den Schlüsselwert zu ändern, wenn sich die Daten der Untertabelle ändern.

this.websiteLangTableKey = !this.websiteLangTableKey;

Das Folgende ist der Kerncode:

<el-Tabelle 
      v-loading="wird geladen" 
      :data="websiteList" 
      @selection-change="Auswahländerungsgriff"
      ref="Tabelle"
      Schlüssel="Websitetabelle"
      Zeilenschlüssel="id"
      Stil = "Breite: 100 %; Max-Bottom: 20px;"
      Grenze
    >
      <el-table-column Typ="Auswahl" Breite="55" Ausrichtung="Mitte" />
      <!-- <el-table-column :label="td('Primärschlüssel')" align="center" prop="id" /> -->
      <el-table-column :label="td('Übergeordnete Navigation')" align="center" prop="parentId" />
      <el-table-column :label="td('Navigationsname')" align="center" prop="barName" >
        <template slot-scope="Umfang" >
          <el-link Typ="primary" :underline="false" @click="toogleExpand(scope.row)" >
            {{scope.row.barName}}
          </el-link>
        </Vorlage>
      </el-Tabellenspalte>
      <el-table-column :label="td('Ist es ein Link?')" align="center" prop="isLink" />
      <el-table-column :label="td('Linkadresse')" align="center" prop="url" />
      <el-table-column :label="td('Erstellungsdatum')" align="center" prop="createTime" />
      <el-table-column :label="td('Benutzer erstellen')" align="center" prop="createBy" />
      <el-table-column :label="td('Aktualisierungszeit')" align="center" prop="updateTime" />
      <el-table-column :label="td('Benutzer aktualisieren')" align="center" prop="updateBy" />
      <el-table-column :label="td('Anmerkungen')" align="center" prop="Anmerkung" />
      <el-table-column :label="td('Operation')" align="center" width="130" class-name="small-padding fixed-width" fixed="right">
        <template slot-scope="Umfang">
          <el-Schaltfläche
            Größe="mini"
            Typ="Text"
            Symbol="el-icon-edit"
            @click="handleUpdate(Umfang.Zeile)"
            v-hasPermi="['cms:website:edit']"
          >{{td("Ändern")}} </el-button>
          <el-Schaltfläche
            Größe="mini"
            Typ="Text"
            Symbol="el-icon-delete"
            @click="handleDelete(Umfang.Zeile)"
            v-hasPermi="['cms:website:entfernen']"
          >{{td("Löschen")}}</el-button>
        </Vorlage>
      </el-Tabellenspalte>

      <el-table-column Typ="erweitern" Breite="1" >
        <template slot-scope="Umfang">
          <el-Tabelle 
            v-loading="wird geladen" 
            Stil="Breite: 100%"
            Zeilenschlüssel = "Sprach-Id"
            :key="websiteLangTableKey"
            :data="WebsiteLangMap.get(scope.row.id)"
            Klasse="Tabelle-in-Tabelle"
          >
            <!-- <el-table-column :label="td('ID Primärschlüssel')" align="center" prop="langId" /> -->
            <!-- <el-table-column :label="td('Navigations-ID')" align="center" prop="webId" /> -->
            <el-table-column :label="td('Sprachcode')" align="center" prop="langCode" />
            <el-table-column :label="td('Sprachname')" align="center" prop="Sprachname" />
            <el-table-column :label="td('Deutsch')" align="center" prop="langCn" />
            <el-table-column :label="td('Sprachübersetzung')" align="center" prop="langTranslate" />
            <el-table-column :label="td('Anmerkungen')" align="center" prop="Anmerkung" />
            <el-table-column :label="td('Operation')" align="center" width="130" class-name="small-padding fixed-width" fixed="right">
              <template slot-scope="Umfang">
                <el-Schaltfläche
                  Größe="mini"
                  Typ="Text"
                  Symbol="el-icon-edit"
                  @click="handleUpdateLang(Umfang.Zeile)"
                  v-hasPermi="['cms:websiteLang:edit']"
                >{{td("Ändern")}} </el-button>
                <el-Schaltfläche
                  Größe="mini"
                  Typ="Text"
                  Symbol="el-icon-delete"
                  @click="handleDeleteLang(Umfang.Zeile)"
                  v-hasPermi="['cms:websiteLang:remove']"
                >{{td("Löschen")}}</el-button>
              </Vorlage>
            </el-Tabellenspalte>
          </el-Tabelle>
        </Vorlage>
      </el-Tabellenspalte>
    </el-Tabelle>

	//Eingebettete Tabelle 
    toogleExpand(Zeile) {
      dies.getListLang(row.id);
      sei $table = diese.$refs.table;
      $table.toggleRowExpansion(Zeile)
    },
     /**Suchnavigationsübersetzungsliste*/
    getListLang(id) {
       // Holen Sie sich die Übersetzungsliste basierend auf der Navigations-ID this.LangQueryParams.webId = id;
      listWebsiteLang(diese.LangQueryParams).dann(Antwort => {
        // Kartenstruktur verwenden, um Übersetzungsliste zu speichern this.WebsiteLangMap.set(id,response.rows)
        this.websiteLangTableKey = !this.websiteLangTableKey;
        this.resetLang();
      });
    },

<style lang="scss" scoped>
.app-container {
  ::v-tief {
    .el-table th {
      Hintergrund: #ddeeff;
    }
    .el-table__expanded-cell {
      Rahmen unten: 0px;
      Rand rechts: 0px;
      Polsterung: 0px 0px 0px 47px;
    }
  }
  .Tabelle-in-Tabelle {
    Rahmen oben: 0px;
  }
}
</Stil>

Damit ist dieser Artikel über das Beispiel zur Implementierung eingebetteter Tabellen in vue+elementUI abgeschlossen. Weitere relevante Inhalte zu eingebetteten Tabellen von Vue-Elementen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Beispielcode zur Implementierung einer Mehrfachauswahl basierend auf einer verschachtelten Tabelle in ElementUI
  • Element realisiert Tabellenschachtelung und mehrere Tabellen teilen sich einen Header
  • Implementierungscode für die Vue ElementUI-Formularvalidierung (mehrschichtige Verschachtelung)
  • Vue ElementUI-Formularvalidierungsfunktionsarray mit mehrschichtiger Verschachtelung

<<:  Bereitstellung und Konfiguration des Apache-Dienstes unter Linux

>>:  MySQL-Transaktionsdetails

Artikel empfehlen

js native Karussell-Plugin-Produktion

In diesem Artikel wird der spezifische Code für d...

HTML-Grundlagen - CSS-Stylesheets, Style-Attribute, Format- und Layoutdetails

1. Position : fest Gesperrte Position (relativ zu...

Objektorientierte JavaScript-Implementierung eines Lupengehäuses

In diesem Artikel wird der spezifische Code der o...

So isolieren Sie Benutzer in Docker-Containern

Im vorherigen Artikel „UID und GID in Docker-Cont...

Eine kurze Analyse, wie Sie das Root-Passwort in Linux suse11 ändern können, wenn Sie es vergessen haben

So lösen Sie das Problem des Vergessens des Root-...

Ein einfaches Beispiel für die Verwendung von js, um die Zeit der letzten Woche, des letzten Monats und der letzten drei Monate abzurufen

Inhaltsverzeichnis Holen Sie sich die Zeit in der...

Upgrade von MySQL 5.1 auf 5.5.36 in CentOS

Dieser Artikel beschreibt den Upgrade-Prozess von...

Detailliertes Tutorial zur Installation und Konfiguration von MySql 5.7.17 winx64

1. Laden Sie die Software herunter 1. Gehen Sie a...

So fahren Sie nginx herunter/starten es neu

Schließung Dienst Nginx stoppen systemctl stoppt ...

Eine kurze Erläuterung des Unterschieds zwischen schreibgeschützten und deaktivierten Eingabeattributen in HTML

Sowohl die Optionen „Nur lesen“ als auch „Deaktiv...

Installationsprozess von CentOS8 Linux 8.0.1905 (Abbildung)

Die aktuellste Version von CentOS ist CentOS 8. A...

Implementierung eines einfachen Timers in JavaScript

In diesem Artikelbeispiel wird der spezifische Ja...

Nodejs implementiert Intranet-Penetrationsdienst

Inhaltsverzeichnis 1. Proxy im LAN 2. Intranet-Pe...

MySQL implementiert Ranking und fragt die angegebene Benutzer-Ranking-Funktion ab (parallele Ranking-Funktion) Beispielcode

Vorwort Dieser Artikel stellt hauptsächlich die r...

So implementieren Sie die Formularvalidierung in Vue

1. Installation und Nutzung Installieren Sie es z...