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

Natives JS zum Erzielen von Laufschrifteffekten

Heute werde ich Ihnen einen Laufschrifteffekt zei...

Vue-Routing zum Implementieren der Login-Abfangung

Inhaltsverzeichnis 1. Übersicht 2. Routing Naviga...

So führen Sie SQL-Anweisungen automatisch aus, wenn MySQL in Docker gestartet wird

Wenn wir mit Docker einen MySQL-Container erstell...

So erlauben Sie allen Hosts den Zugriff auf MySQL

1. Ändern Sie den Host-Feldwert eines Datensatzes...

Beispiel für die Einstellung des HTML-Hyperlink-Stils (vier verschiedene Zustände)

Code kopieren Der Code lautet wie folgt: <styl...

Beispiel zum Aktivieren langsamer Abfragen in MySQL

Vorwort Das langsame Abfrageprotokoll ist eine se...

Teilen Sie JS vier lustige Hacker-Hintergrundeffektcodes

Inhaltsverzeichnis Beispiel 1 Beispiel 2 Beispiel...

Der Handler PageHandlerFactory-Integrated hat ein fehlerhaftes Modul ManagedPipelineHandler in seiner Modulliste

Wenn Sie ein Webprojekt entwickeln, müssen Sie II...

Beispielcode zum Ausblenden von Element-Bildlaufleisten mithilfe von CSS

Wie kann ich die Bildlaufleisten ausblenden und t...

CSS wählt das erste untergeordnete Element unter dem übergeordneten Element aus (:first-child)

Vorwort Ich habe vor Kurzem :first-child in einem...

vue + ts realisiert den Effekt des Ziehens von Elementen mit der Maus

In diesem Artikelbeispiel wird der spezifische Co...

Was wir über absolute und relative CSS-Werte zu sagen haben

In der Einleitung steht: Absolute sagte: „Relativ...

Fünf Möglichkeiten zum Durchlaufen von Objekten in JavaScript Beispielcode

Inhaltsverzeichnis Vorbereiten Fünf Waffen für … ...

Ein Beispiel für die vertikale Zentrierung von Unterelementen in Div mithilfe des Flex-Layouts

1. Flex ist die Abkürzung für Flexible Box, was „...

Der Unterschied sowie die Vor- und Nachteile des MySQL-Primärschlüssels UUID und des automatisch inkrementierten Primärschlüssels

Einführung Ich habe eine Zeit lang die PostgreSQL...