Vue コンポーネントライブラリ ElementUI はテーブル読み込みツリーデータのチュートリアルを実装します

ElementUIは、参考のためにテーブルツリーリストの読み込みチュートリアルを実装しています。具体的な内容は次のとおりです。

Element UI は、開発者、デザイナー、製品マネージャー向けの Vue 2.0 ベースのコンポーネントライブラリであり、Web サイトを迅速に構築するためのサポートデザインリソースを提供します。

キーコードは、 el-tableにプロパティを追加することです: tree-props="{children: 'children'}" 。行の名前はchildrenにする必要があることに注意してください。公式 Web サイトでも説明されています:

ツリー型データの表示をサポートします。行に children フィールドが含まれている場合、その行はツリーデータと見なされます。ツリーデータをレンダリングするときは、行キーを指定する必要があります。子ノードデータの非同期読み込みをサポートします。 Table の lazy プロパティを true に設定し、関数 load をロードします。行の hasChildren フィールドを指定することで、子ノードを含む行を指定できます。 children と hasChildren は両方とも tree-props を介して設定できます。

<el-テーブル
  ref="表"
  :data="apprItemData"
  :header-cell-style="headClass"
        @select="ハンドル選択"
        行キー="承認項目"
        高さ= "420"
  国境
       デフォルトすべて展開
       :tree-props="{children: 'children'}">
 <el-テーブル列
   タイプ="選択"
   幅="55">
 </el-table-column>
 <el-テーブル列
   prop="アイテムコード"
   label="商品コード">
 </el-table-column>
 <el-テーブル列
   prop="承認名"
   label="アイテム名">
 </el-table-column>
 <el-テーブル列
   プロパティ="apprStatusStr"
   label="設定リンク"
   色="青">
 </el-table-column>
</el-table>

背景のJSONデータ:

{
    "id":3,
    "アイテムコード":"123",
    "approveName":"テスト項目",
    "apprStatusStr":"リンク名",
    "子供たち"：[
        {
            "id":31,
            "アイテムコード":"111",
            "approveName":"テスト項目",
            "apprStatusStr":"リンク名"
        }
    ]
}

<script type="text/babel">
       var vm = 新しい Vue({
           el: '#app',
           データ：{
               アプリアイテムデータ: [],
               currentPage: 1, //現在のページ totalRow: 0, //ページの総数 pageSize: 10 //現在表示されている項目の数},
           計算: {},
           時計： {}、
           作成された() {},
           マウント() {
               this.loadItemData();
  },
           メソッド: {
               // アイテム情報を読み込む loadItemData () {
                   var pageSize = this.pageSize;
                   var 現在のページ = this.currentPage;
                   console.log("ページサイズ:"+ページサイズ+",現在のページ:"+現在のページ);
       //デバッガ;
       var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
                   $.ajax({
                       タイプ: 'get'、
                       url:geturl、
                       コンテンツタイプ: "application/json; 文字セット=utf-8",
                       成功: 関数(データ) {
                           //デバッガ;
                           console.log("totalRow:"+data.total);
                           vm.apprItemData = データ行;
                       },
                       エラー: 関数(e) {
                           console.log("データの更新中にエラーが発生しました:",e);
                       }
                   })
               }
           }
       });
</スクリプト>