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

大学 4 年生のときのインターンシップ中に、表内のデータの番号をクリックすると、そのデータの下に新しい表が表示されるという特別な要件に遭遇しました。この要件は、element UI の公式ドキュメントでも取り上げられています。以下は、他のブログ (ブログのアドレスが見つかりません) と element UI を参考にした最終的な実装効果です。

レンダリング

会社のパソコンが遅いからなのか、録画したモーショングラフィックスがカクカクするのはソフトウェアの問題なのかは分かりませんが、実際の操作ではカクカクしません。

ここに画像の説明を挿入

コード：

ページ表示コード:

メインコードは<el-table-column type="expand" width="1" >です。
type="expand"公式説明:
通過設置type="expand" 和Scoped slot 可以開啟展開行功能，el-table-column 的模板會被渲染成為展開行的內容，展開行可訪問的屬性與使用自定義列模板時的Scoped slot 相同。
最後に、 el-table-column type="expand" 、 width="1"に設定することで、表示される矢印アイコンが非表示になります。

コード全体のフローは次のようになります。
データテーブルはメインテーブルとサブテーブルに分かれており、ページが最初に読み込まれると、メインテーブルのデータ (つまり、メインテーブルと呼ばれる通常のテーブルデータテーブル) が表示されます。メインテーブルのデータ行のナビゲーション名をクリックすると、クリックイベントtoogleExpand()がトリガーされます。このイベントの主な機能は、クリックされたデータの ID に応じてバックグラウンドで対応するサブテーブルデータを検索し、それをフロントエンドに返し、最終的にフロントエンドで表示することです。
このプロセスで注目すべき点は、対応するデータを取得した後、サブテーブルデータをメインテーブルデータに 1 つずつバインドする方法です。
ここでは、メインテーブル ID をキーとして、サブテーブルデータを値として、Map を使用して実装します。

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

この時点ではまだ問題が残っています。
ページが読み込まれたばかりのときは、対応する埋め込みテーブルを開くための最初のクリックにはデータがありません。2 回目に開いたときにのみデータがあります。
テーブルが初めてレンダリングされるとき、保存したサブテーブルデータのマップにはデータがないため、最初のクリックではデータが表示されません (データなしでレンダリングする方法)。取得するデータは、クリックイベントtoogleExpand()がトリガーされた後に要求されたデータです。つまり、データはレンダリング後にのみ利用可能になります。当初は、 data変更をリアルタイムでリッスンしてページをレンダリングできるリスナーのようなものだと思っていましたが、それはできませんでした。
解決策は、 el-tableの key 属性を制御し、サブテーブルデータが変更されたときに key 値を変更することです。

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;
  }
}
</スタイル>

これで、vue+elementUI で埋め込みテーブルを実装する方法の例に関するこの記事は終了です。より関連性の高い vue 要素埋め込みテーブルコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: