vue+elementUI で埋め込みテーブルを実装する方法の例

// マップ構造を使用して翻訳リストを保存します this.WebsiteLangMap.set(id,response.rows)

this.websiteLangTableKey = !this.websiteLangTableKey;

<el-テーブル 
      v-loading="読み込み中" 
      :data="ウェブサイトリスト" 
      @selection-change="選択変更処理"
      ref="テーブル"
      キー="ウェブサイトテーブル"
      行キー="id"
      スタイル="幅: 100%; 最大ボトム: 20px;"
      国境
    >
      <el-table-column type="selection" width="55" align="center" />
      <!-- <el-table-column :label="td('主キー')" align="center" prop="id" /> -->
      <el-table-column :label="td('親ナビゲーション')" align="center" prop="parentId" />
      <el-table-column :label="td('ナビゲーション名')" align="center" prop="barName" >
        <テンプレート スロット スコープ="スコープ" >
          <el-link type="primary" :underline="false" @click="toogleExpand(scope.row)" >
            {{scope.row.barName}}
          </el-link>
        </テンプレート>
      </el-table-column>
      <el-table-column :label="td('リンクですか')" align="center" prop="isLink" />
      <el-table-column :label="td('リンクアドレス')" align="center" prop="url" />
      <el-table-column :label="td('作成日')" align="center" prop="createTime" />
      <el-table-column :label="td('ユーザーの作成')" align="center" prop="createBy" />
      <el-table-column :label="td('更新時間')" align="center" prop="updateTime" />
      <el-table-column :label="td('ユーザーの更新')" align="center" prop="updateBy" />
      <el-table-column :label="td('備考')" align="center" prop="備考" />
      <el-table-column :label="td('操作')" align="center" width="130" class-name="small-padding fixed-width" fixed="right">
        <テンプレート スロット スコープ="スコープ">
          <el-ボタン
            サイズ="ミニ"
            タイプ="テキスト"
            アイコン="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['cms:website:edit']"
          >{{td("変更")}} </el-button>
          <el-ボタン
            サイズ="ミニ"
            タイプ="テキスト"
            アイコン="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['cms:website:remove']"
          >{{td("削除")}}</el-button>
        </テンプレート>
      </el-table-column>

      <el-table-column type="expand" width="1" >
        <テンプレート スロット スコープ="スコープ">
          <el-テーブル 
            v-loading="読み込み中" 
            スタイル="幅: 100%"
            行キー="langId"
            :key="ウェブサイト言語テーブルキー"
            :data="WebsiteLangMap.get(スコープ行ID)"
            クラス="テーブル内テーブル"
          >
            <!-- <el-table-column :label="td('ID 主キー')" align="center" prop="langId" /> -->
            <!-- <el-table-column :label="td('ナビゲーションID')" align="center" prop="webId" /> -->
            <el-table-column :label="td('言語コード')" align="center" prop="langCode" />
            <el-table-column :label="td('言語名')" align="center" prop="langName" />
            <el-table-column :label="td('中文')" align="center" prop="langCn" />
            <el-table-column :label="td('言語翻訳')" align="center" prop="langTranslate" />
            <el-table-column :label="td('備考')" align="center" prop="備考" />
            <el-table-column :label="td('操作')" align="center" width="130" class-name="small-padding fixed-width" fixed="right">
              <テンプレート スロット スコープ="スコープ">
                <el-ボタン
                  サイズ="ミニ"
                  タイプ="テキスト"
                  アイコン="el-icon-edit"
                  @click="handleUpdateLang(scope.row)"
                  v-hasPermi="['cms:websiteLang:edit']"
                >{{td("変更")}} </el-button>
                <el-ボタン
                  サイズ="ミニ"
                  タイプ="テキスト"
                  アイコン="el-icon-delete"
                  @click="handleDeleteLang(scope.row)"
                  v-hasPermi="['cms:websiteLang:remove']"
                >{{td("削除")}}</el-button>
              </テンプレート>
            </el-table-column>
          </el-table>
        </テンプレート>
      </el-table-column>
    </el-table>

	//埋め込みテーブル 
    toogleExpand(行) {
      this.getListLang(行ID);
      $table = this.$refs.table とします。
      $table.toggleRowExpansion(行)
    },
     /** クエリナビゲーション翻訳リスト*/
    リスト言語を取得(id) {
       // ナビゲーション ID に基づいて翻訳リストを取得します。this.LangQueryParams.webId = id;
      listWebsiteLang(this.LangQueryParams).then(応答 => {
        // マップ構造を使用して翻訳リストを保存します this.WebsiteLangMap.set(id,response.rows)
        this.websiteLangTableKey = !this.websiteLangTableKey;
        this.resetLang();
      });
    },

<style lang="scss" スコープ>
.app-コンテナ{
  ::v-ディープ{
    .el-table th {
      背景: #ddeeff;
    }
    .el-table__展開セル{
      下境界線: 0px;
      右境界線: 0px;
      パディング: 0px 0px 0px 47px;
    }
  }
  .テーブルインテーブル {
    上境界線: 0px;
  }
}
</スタイル>