vuejs は再帰コンポーネントを使用してツリー ディレクトリを実装します

小云云
リリース: 2018-01-27 14:30:08
オリジナル
2823 人が閲覧しました

この記事では、vuejs で再帰コンポーネントを使用してツリー ディレクトリを実装する方法を主に紹介します。編集者がそれを共有し、参考になれば幸いです。

まず、効果は次のとおりです。かなり良いメニューだと思います。

ここでのデータはデータベースのデータを呼び出します。これにはデータを構築するためのデータベースが必要です。 Java でマルチツリーを構築する方法については、後で別の記事で詳しく説明することにし、ここではフロントエンドについて説明します。

データはまず json として構築できます。ここで使用される形式はおおよそ次のとおりです。childList を使用してサブメニューをネストします。


{
  id:YH, 
  name:银行, 
  pid:0, 
  childList:[{
    id:YH******, 
    name:国家开发银行, 
    pid:YH, 
    childList:[{
      id:YH*****3, 
      name:国家开发银行香港分行, 
      pid:YH******, 
      childList:[]
    }, 
    {
      id=YH*****1, 
      name=国家开发银行广东省分行, 
      pid=YH******, 
      childList=[]
    }, {
      id=YH*****2, 
      name=国家开发银行深圳分行, 
      pid=YH******, 
      childList=[]
    }
  ]}
}
ログイン後にコピー

アイデアによれば、li を ul の中に、ul を li の中に入れる必要があります。無限に適用できるので、サブコンポーネントに次のように記述します:


 <li>
  <p>
   <i @click=&#39;toggle&#39; v-if=&#39;isFolder&#39; class="mui-icon iconfont" :class="[open?&#39;icon-wenjianjia&#39;:&#39;icon-wenjianjiaguanbi&#39;]"></i>
   <!--isFolder判断是否存在子级改变图标-->
   <i @click=&#39;toggle&#39; class="mui-icon iconfont icon-wenjian" style="color: #00ccff" v-else></i>
   <!--这里用到的方法是给父组件传值,具体可看上一篇文章-->
   <span @click="propInstCode(model);propInstName(model)">
    {{model.name}}
   </span>
  </p>
  <ul v-show="open" v-if=&#39;isFolder&#39;>
   <tree-menu v-for=&#39;cel in model.childList&#39; :model=&#39;cel&#39;></tree-menu>
  </ul>
 </li>
ログイン後にコピー

公式ドキュメントでは name 属性が強調されているため、最初に名前を定義する必要があります。ここでの名前はツリーメニューを使用します。上:


export default {
  name: &#39;treeMenu&#39;,
  props: [&#39;model&#39;],
  components: {}
}
ログイン後にコピー

vueの考え方に従い、Domツリーを操作せずに、サブメニューの表示/非表示(開く)とアイコンを変更して保存する変数の2つを定義します。サブメニュー (isFolder)。


data() {
   return {
    open: false,
    isFolder: true,
   }
 },
ログイン後にコピー

このステップで言ったことは、「vueの計算プロパティを使用してisFolderの値を動的に変更し、アイコンを変更し、子の有無と子の長さを決定する」です。 "


computed: {
  isFolder() {
    return this.model.childTreeNode && this.model.childTreeNode.length
  }
}
ログイン後にコピー

ここに問題があり、エラーが報告され続けます:

私は長い間その問題を探していましたが、次のように解決しました。私は計算された属性を削除しましたこれで、ツリー ディレクトリのコンポーネントが構築されました。これを、対応する親コンポーネントで呼び出すだけです。

親コンポーネントで参照されています

created(){
   //将isFolder放在这里判断可以识别出最底层菜单,然后改变图标,放在computed的话会一直报错并识别不出最底层菜单改变样式
   this.isFolder = this.model.childList && this.model.childList.length;
  }
ログイン後にコピー

サブコンポーネント:

methods: {
   toggle: function() {
    if(this.isFolder){
     this.open = !this.open;
    }
   },
}
ログイン後にコピー

サブコンポーネントは直接使用でき、スタイルも一緒に投稿されます。 ただし、親コンポーネントにもいくつかのスタイルがあります。この完全なコードには、前の記事も含まれています。上記のコンポーネントは値の部分を渡します。

私のアイコンは Alibaba のアイコンフォントを使用しています。Baidu で検索することもできます。

関連する推奨事項:

jquery_jquery によって実装されたツリー ディレクトリの例

以上がvuejs は再帰コンポーネントを使用してツリー ディレクトリを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!