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

この記事では、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='toggle' v-if='isFolder' class="mui-icon iconfont" :class="[open?'icon-wenjianjia':'icon-wenjianjiaguanbi']"></i>
   <!--isFolder判断是否存在子级改变图标-->
   <i @click='toggle' 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='isFolder'>
   <tree-menu v-for='cel in model.childList' :model='cel'></tree-menu>
  </ul>
 </li>

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

export default {
  name: 'treeMenu',
  props: ['model'],
  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 サイトの他の関連記事を参照してください。