VueコンポーネントライブラリElementUI実現表のツリーデータ教程のロード


ElementUIは表ツリーリストのチュートリアルを読み込みます。参考にしてください。具体的な内容は以下の通りです。
Element UIはVue 2.0をベースフレームとして実現されたコンポーネントライブラリのセットです。開発者、デザイナー、製品マネージャーのために準備されたVue 2.0ベースのコンポーネントライブラリは、セットの設計リソースを提供しています。
キーコードは、el-tableに属性を追加します。tree-props=「{チルドレン:'チルドレン'」、rowは必ずチルドレンと命名してください。公式サイトでも説明しています。
ツリータイプのデータの表示をサポートします。rowにchildrenフィールドが含まれている場合、ツリーデータとして扱われます。ツリーデータをレンダリングする場合は、row-keyを指定しなければなりません。サブノードのデータ非同期ロードをサポートします。Tableのlazy属性はtrueとローディング関数のロードです。rowのハスチルドレンフィールドを指定することにより、どの行がサブノードを含むかを指定します。チルドレンとハスチルドレンはいずれもtree-propsで配置できます。

<el-table
  ref="Table"
  :data="apprItemData"
  :header-cell-style="headClass"
        @select="handleSelection"
        row-key="approveItem"
        height="420"
  border
       default-expand-all
       :tree-props="{children: 'children'}">
 <el-table-column
   type="selection"
   width="55">
 </el-table-column>
 <el-table-column
   prop="itemCode"
   label="    ">
 </el-table-column>
 <el-table-column
   prop="approveName"
   label="    ">
 </el-table-column>
 <el-table-column
   prop="apprStatusStr"
   label="     "
   color="blue">
 </el-table-column>
</el-table>
バックグラウンドJsonデータ:

{
    "id":3,
    "itemCode":"123",
    "approveName":"    ",
    "apprStatusStr":"    ",
    "children":[
        {
            "id":31,
            "itemCode":"111",
            "approveName":"    ",
            "apprStatusStr":"    "
        }
    ]
}

<script type="text/babel">
       var vm = new Vue({
           el: '#app',
           data:{
               apprItemData : [],
               currentPage: 1,  //   
               totalRow: 0, //   
               pageSize: 10 //      
           },
           computed: {},
           watch: {},
           created() {},
           mounted() {
               this.loadItemData();
  },
           methods: {
               //       
   loadItemData () {
                   var pageSize = this.pageSize;
                   var currentPage = this.currentPage;
                   console.log("pageSize:"+pageSize+",currentPage:"+currentPage);
       //debugger;
       var geturl = '${root}/config/loadItemData.do?rows='+pageSize + '&page=' + currentPage;
                   $.ajax({
                       type: 'get',
                       url:geturl,
                       contentType: "application/json; charset=utf-8",
                       success: function(data) {
                           //debugger;
                           console.log("totalRow:"+data.total);
                           vm.apprItemData = data.rows;
                       },
                       error: function(e) {
                           console.log("        :",e);
                       }
                   })
               }
           }
       });
</script>

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。