ホームページ >ウェブフロントエンド >jsチュートリアル >vue.js+element-ui はツリー構造を実装します
今回は vue.js+element-ui でツリー構造を実装する際の注意事項を紹介します。以下は実際的なケースです。一見。
ビジネスニーズのため、ツリーメニューを実装する必要があり、メニューデータはバックグラウンドから返されます。インターネットでいくつかの記事を見つけ、最終的に解決策を見つけました。
シナリオ: ビジネス要件に従って、アクティブなツリー メニューを実装する必要があります。メニュー データはバックグラウンドから返されます。最終的なレンダリングは次のとおりです。
バックグラウンドによって返されるデータ形式は次のとおりです。 :
data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID:'m1', name:'目录一--菜单一', menuID:'m11', isContent:true }, { pID:'m1', name:'目录一--目录一', menuID:'m12', isContent:false }, { pID:'m12', name:'目录一--目录一--菜单一', menuID:'m121', isContent:true }, { pID:'m2', name:'目录二--菜单一', menuID:'m21', isContent:true }, { pID:'m2', name:'目录二--菜单二', menuID:'m22', isContent:true }, ]
これは文字列です 親子関係のあるデータの場合、最初のステップは、この大きな文字列のデータをツリー構造に変換することです:
tree(){ let data=[{ pID:'1',//父ID name:'目录一', menuID:'m1',//本身ID isContent:false//判断是否是目录 }, { pID:'1', name:'目录二', menuID:'m2', isContent:false }, { pID:'m1', name:'目录一--菜单一', menuID:'m11', isContent:true }, { pID:'m1', name:'目录一--目录一', menuID:'m12', isContent:false }, { pID:'m12', name:'目录一--目录一--菜单一', menuID:'m121', isContent:true }, { pID:'m2', name:'目录二--菜单一', menuID:'m21', isContent:true }, { pID:'m2', name:'目录二--菜单二', menuID:'m22', isContent:true }, ] let tree = [] for(let i=0;i<data.length><p style="text-align: left;"> 実行後に返される構造は次のようになります: </p> <pre class="brush:php;toolbar:false">[{"pID":"1","name":"目录一","menuID":"m1","isContent":false,"list":[{"pID":"m1","name":"目录一--菜单一","menuID":"m11","isContent":true,"list":[]},{"pID":"m1","name":"目录一--目录一","menuID":"m12","isContent":false,"list":[{"pID":"m12","name":"目录一--目录一--菜单一","menuID":"m121","isContent":true,"list":[]}]}]},{"pID":"1","name":"目录二","menuID":"m2","isContent":false,"list":[{"pID":"m2","name":"目录二--菜单一","menuID":"m21","isContent":true,"list":[]},{"pID":"m2","name":"目录二--菜单二","menuID":"m22","isContent":true,"list":[]}]}]
次に、プロジェクトで使用される要素 UI を示します。Navigationmenu コンポーネントは、このようなツリー構造を実現するために、メニューの各レベルが別個のコンポーネントとして扱われ、isContent の値を判断することによって再帰的に 決定されます。 。コードを直接投稿しました
<el-menu> <template> <el-submenu> <template> <i></i> {{item.name}} </template> <tree-menu></tree-menu> </el-submenu> <el-menu-item>{{item.name}}</el-menu-item> </template> </el-menu>
ツリーメニューコンポーネントのコード:
<template> <el-submenu> <template> <i></i> {{menu.name}}</template> <tree-menu></tree-menu> </el-submenu> <el-menu-item> {{menu.name}} </el-menu-item> </template>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP に関する他の関連記事に注目してください。中国語のサイトです!
推奨読書:
vue-cli プロジェクトでブートストラップを使用する手順の詳細な説明
以上がvue.js+element-ui はツリー構造を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。