今回は、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 } } } } } } }
<template> <p> <ul> <li > <span @click="isshow()">{{treelist.name}}</span> <tree v-for="item in treelist.children" v-if="isFolder" v-show="open" :treelist="item" :keys="item" ></tree> </li> </ul> </p> </template> <script> export default { name:'tree', props:['treelist'], data(){ return{ open:false } },computed:{ isFolder:function(){ return this.treelist.children } } ,methods:{ isshow(){ if (this.isFolder) { this.open =!this.open } } } } </script> <style lang="less"> </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>树形图</title> </head> <body> <p id="app"> <tree :treelist="treeList"></tree> </p> </body> </html>
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 } })
変数 open を定義しました。データは再帰的であるため、各コンポーネントが自分の open
<span @click="isshow()">{{treelist.name}}</span>
効果を達成
ここでデータが少し変更されているため、最初に渡したデータは (index.html ページ) です
次に、各レイヤーの開閉を処理するイベントを定義し、ポップアップ ボックスを使用して Isopen の値が変更されたかどうかを確認しました。
結果を見てみましょう
最初にページに入ったとき、括弧内の未定義はIsopenの現在の値でした。この時点では定義されていなかったため、未定義でした
では。 Aをクリックしました
この時、isopenが反転しているので、この時点ではisopenがtrueです
でも、ページはまだ何も変化しておらず、展開機能はおろか、未定義さえも変化していません
Baidu をいくつか調べたところ、Vue 2.0 以降、サブコンポーネントは親コンポーネントの値を変更することしかできないことがわかりました。サブコンポーネント $emit() と親コンポーネント $on() を介して応答します。Change
この記事の事例を読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、他の関連記事に注目してください。 php中国語ウェブサイトで!
推奨読書:Angularを使用してデータリクエスト機能を実装する方法
Vue+better-scrollを使用してアルファベット順のインデックスナビゲーションを実装する方法
以上がVue を使用してツリー ビュー データを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。