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

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

this.websiteLangTableKey = !this.websiteLangTableKey;

<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>