Vue ElementUI は非同期読み込みツリーを実装します

'@/components/list.vue' からリストをインポートします。
'@/components/add.vue' から Add をインポートします。
'@/components/tree.vue' から Tree をインポートします。
'@/components/asyntree.vue' から AsynTree をインポートします。

エクスポートデフォルト{
    ルート:[
        {パス:"/list",コンポーネント:リスト},
        {パス:"/add",コンポーネント:追加},
        {パス:"/add/:id",コンポーネント:追加},
        {パス:"/tree",コンポーネント:Tree},
        {パス:"/asyntree",コンポーネント:AsynTree}
    ]

}

<テンプレート>
  <div id="アプリ">
    <router-link to="/add">追加</router-link>&nbsp;&nbsp;
    <router-link to="/list">リスト</router-link>&nbsp;&nbsp;
    <router-link to="/tree">ツリー構造</router-link>&nbsp;&nbsp;
    <router-link to="/asyntree">非同期ツリー構造</router-link>&nbsp;&nbsp;
    <ルータービュー></ルータービュー>
  </div>
</テンプレート>

<スクリプト>
'./components/list.vue' からリストをインポートします。

エクスポートデフォルト{
  名前: 'アプリ',
  コンポーネント:
    リスト
  }
}
</スクリプト>

<スタイル>
＃アプリ {
  フォントファミリ: 'Avenir'、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

<テンプレート>


<el-コンテナ>
  <el-aside width="200px">
    <el-tree ref="ツリー"
    :data="データ"
    怠け者
    チェックボックスを表示
    ノードキー="id"
    厳密にチェックする
    :load="ロードノード"
    :props="デフォルトプロパティ"
    @node-click="ノードクリック">
    </el-tree>
  </el-aside>
  <メイン>

    <el-form :model="typeinfo" class="demo-form-inline">
    <el-form-item ラベル="ID">
        <el-input v-model="typeinfo.id" 読み取り専用></el-input>
    </el-form-item>
    <el-form-item label="カテゴリ名">
        <el-input v-model="typeinfo.label" placeholder="カテゴリ名"></el-input>
    </el-form-item>
    <el-form-item label="シリアル番号">
        <el-input v-model="typeinfo.seqno" placeholder="シリアル番号"></el-input>
    </el-form-item>
   <el-form-item label="親ID">
        <el-input v-model="typeinfo.pid" 読み取り専用></el-input>
    </el-form-item>
    <el-form-item>
        <el-button type="primary" @click="dosave">保存</el-button>
        <el-button type="primary" @click="dochildsave">ノードを追加</el-button>
    </el-form-item>
    </el-form>

  </el-main>
</el-コンテナ>

</テンプレート>

<スクリプト>
'axios' から axios をインポートします

エクスポートデフォルト{
    データ（） {
        戻る {
            data:[], //ツリーオブジェクトのデータモデル defaultProps: { //ツリーオブジェクトのプロパティの対応 children: 'children',
                ラベル: 'ラベル'
            },
            typeinfo:{//製品分類エンティティオブジェクトID:''、
                pid:''、
                ラベル: ''、
                シーケンス番号: ''
            }
        }
    },
    メソッド: {
        ロードノード(ノード、解決){
            //第 1 レベルのノードを展開する場合、バックグラウンドから第 1 レベルのノード リストをロードします if (node.level==0)
            {
                this.loadfirstnode(解決)。
            }
            //他のレベルのノードを展開する場合、次のレベルのノードリストをバックグラウンドから動的に読み込みます if (node.level>=1)
            {
                this.loadchildnode(ノード、解決);
            }
        },
        //第1レベルのノードをロードする loadfirstnode(resolve){
            axios.get('http://localhost:6060/loadtype')
                .then(関数(応答){
                    （応答データ）を解決します。
                })
        },
        //ツリーコンポーネントを更新する refreshtree(){
            var _this = これ;
            axios.get('http://localhost:6060/loadtype')
                .then(関数(応答){
                    _this.data = 応答データ;
                })
        },
        //ノードの子ノードコレクションをロードする loadchildnode(node,resolve){
            axios.get('http://localhost:6060/loadtypechild?pid='+node.data.id)
                .then(関数(応答){
                    （応答データ）を解決します。
                })
        },
        //ノード上でトリガーされたイベントをクリックし、3 つのパラメータを渡し、データ オブジェクトは最初のパラメータ nodeclick(data,dataObj,self) を使用します。
        {
            //アラート(data.label+",id="+data.id);
            this.typeinfo.id=データID;
            this.typeinfo.pid=データ.pid;
            this.typeinfo.label=データラベル;
            this.typeinfo.seqno=データ.seqno;
        },
        //分類方法を保存する dosave()
        {
            var _this = これ;
             axios.post('http://localhost:6060/savetype',this.typeinfo)
                .then(関数(応答){
                    if(resp.data)
                        _this.refreshtree();
                })
        },
        //サブ分類メソッドdochildsave()を保存する
        {
            // 左のツリーコンポーネントでノードが選択されているかどうかを判断します。var cnt=this.$refs['tree'].getCheckedNodes().length;
            （カウント！= 1）の場合
            {
                this.$message('一意の親ノードを選択する必要があります');
                戻る;
            }
            // this.$refs['tree'] を通じてツリー オブジェクトを取得します。ここで、tree はツリー コンポーネントの ref 属性です。var dataObj = this.$refs['tree'].getCheckedNodes()[0];
    
            this.typeinfo.id='';
            this.typeinfo.pid=データオブジェクトID;
            var _this = これ;
            axios.post('http://localhost:6060/savetype',this.typeinfo)
                .then(関数(応答){
                    if(resp.data)
                        _this.refreshtree();
                })
        }
    }

}
</スクリプト>

@RequestMapping("/loadtype")
 @レスポンス本文
 パブリック リスト<TypeInfo> getTypeJson()
 {
  リスト<TypeInfo> rtn = getFirstNode();
  
  戻り値 rtn;
 }
  
 @RequestMapping("/loadtypechild")
 @レスポンス本文
 パブリック リスト<TypeInfo> getTypeByPid(Integer pid)
 {
  System.out.println("pid==="+pid);
  リスト<TypeInfo> rtn = addsrv.getTypeList(pid);
  
  戻り値 rtn;
 }
 
 プライベート List<TypeInfo> getFirstNode()
 {
  タイプ情報ルート = addsrv.getRootType();
  リスト<TypeInfo> firstList = addsrv.getTypeList(root.getId());
  for(TypeInfo ti:firstList)
   ti を再帰的に実行します。
  firstList を返します。
 }
 
 プライベート void recurseNode(TypeInfo ti)
 {
  リスト<TypeInfo> children = addsrv.getTypeList(ti.getId());
  System.out.println("ti.id"+ti.getId()+",children="+children);
  (children == null || children.size() == 0)の場合
   戻る;
  ti.setChildren(子供);
  for(TypeInfo chd:children)
  {
   再帰ノード(chd);
  }
 }
 
 @RequestMapping("/savetype")
 @レスポンス本文
 パブリックブール savetype(@RequestBody TypeInfo ti)
 {
  試す {
   整数 id = ti.getId();
   if(id != null)
    rv.updateType(ti) を追加します。
   それ以外 {
    rv.saveType(ti)を追加します。
   }
   true を返します。
  } キャッチ (例外 e) {
   false を返します。
  }
  
 }