Vue を使用してツリー ビュー データを実装する方法

今回は、Vue を使用してツリー ビュー データを実装する方法と、Vue を使用してツリー ビュー データを実装するための 注意事項 について説明します。以下は実際的なケースです。

これはシミュレートされたツリーマップデータです

let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 }

コードは次のとおりです

treelist.vue

<template> 
<p> 
 </p>
<ul> 
  <li> 
   <span>{{treelist.name}}</span> 
    <tree></tree> 
  </li> 
 </ul> 
 
</template> 
<script> 
export default { 
 name:&#39;tree&#39;, 
 props:[&#39;treelist&#39;], 
 data(){ 
  return{ 
   open:false 
  } 
 },computed:{ 
  isFolder:function(){ 
   return this.treelist.children 
   } 
  } 
 ,methods:{ 
  isshow(){ 
   if (this.isFolder) { 
    this.open =!this.open 
   } 
  } 
 } 
} 
</script> 
<style> 
</style>

index.html

nbsp;html> 
 
 
 <meta> 
 <meta> 
 <meta> 
 <title>树形图</title> 
 
 
 <p> 
  <tree></tree> 
   
 </p> 
 

index.js

import Vue from 'vue'; 
import tree from '../components/treelist.vue' 
let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 } 
const app=new Vue({ 
 el:"#app", 
 components:{ 
  'tree':tree 
 }, 
 data:{ 
  treeList:all 
 } 
})

落とし穴をくぐり抜けた結果、Vueの公式Webサイトが同様のものがあります Case、リンク→ポータル

公式サイトの方法を参考にして実装してみました

この書き方と罠を踏んだ時の私の考えとの違いは、そのようなコンポーネントが担当するだけということです1 つの

オブジェクト に対して、各子を走査します。 のオブジェクトは、処理のために 1 つずつコンポーネントに渡されます。私の最初の試みは、複数のオブジェクトを処理するコンポーネントです。最初の試みです。興味があれば一番下をご覧ください)

オブジェクトを処理するためにこのようなコンポーネントを作成する利点は何ですか?

コンポーネント内のスイッチをカスタマイズできます

で

変数 open を定義しました。データは再帰的であるため、各コンポーネントが自分の open

に属する属性を持つのと同等です。 では、なぜ最初にピットに足を踏み入れたときにこのメソッドを使用できないのでしょうか?コンポーネントを使用して複数のオブジェクトを処理します。これは、すべての子オブジェクトを制御するスイッチに相当します。スイッチがオンになると、この同じレベルのすべてのオブジェクトが展開されます

子をトラバースしてコンポーネントに渡します。それ自体を 1 つずつ表示するかどうかを制御するには v-show を使用します

は、子に基づいて計算された

属性を定義し、実行を継続するかどうかを決定します

スパンでカスタムイベントをバインドしますタグ

openの値を変更

<span>{{treelist.name}}</span>

効果を達成

以下は私が最初に試したときに行き詰まったものです

ここに記録して、遭遇したときに印象を残してください将来同様の問題が発生する可能性があります

最初にこのエラーが発生したときにこのエラーに遭遇しました

長い間問題を探した後、内部に名前を書き忘れたコンポーネントが原因であることがわかりました。使用するときは名前を入力する必要があり、タグ名と一致している必要があります

最初の実装方法では、コンポーネントの再帰を使用して、現在のレベルの名前を表示してレンダリングし、子を配置しますすべてのオブジェクトを自分自身に渡し、子にデータがなくなるまで同じ操作を実行します。ここで v-if が追加されていない場合、無限ループになることに注意してください。は実行を続けるので、現在実行されているオブジェクトに次のレベルがあるかどうかを判断する必要があります

ここでデータが少し変更されているため、最初に渡したデータは (index.html ページ) です

次に、各レイヤーの開閉を処理するイベントを定義し、ポップアップ ボックスを使用して Isopen の値が変更されたかどうかを確認しました。

結果を見てみましょう

最初にページに入ったとき、括弧内の未定義はIsopenの現在の値でした。この時点では定義されていなかったため、未定義でした

では。 Aをクリックしました

この時、isopenが反転しているので、この時点ではisopenがtrueです

でも、ページはまだ何も変化しておらず、展開機能はおろか、未定義さえも変化していません

Baidu をいくつか調べたところ、Vue 2.0 以降、サブコンポーネントは親コンポーネントの値を変更することしかできないことがわかりました。サブコンポーネント $emit() と親コンポーネント $on() を介して応答します。Change

この記事の事例を読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 php中国語ウェブサイトで！

推奨読書:

Angularを使用してデータリクエスト機能を実装する方法

Vue+better-scrollを使用してアルファベット順のインデックスナビゲーションを実装する方法

以上がVue を使用してツリー ビュー データを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。