任意の頼第三者によらず、単にvueでTreeツリーコントロールを実現した事例

この数日間で一つの需要を受けました。中には属性の部品を作って、第三者を探していますが、完全に私の需要を満たすことができません。この時間があれば、自分で小さな輪を作りましょう。
まず効果図を見ます。（赤い点の前に使うフォントのアイコンは、ペアです。ここでは、便利のために、選択状態の代わりに丸を使っています。あまり綺麗ではないので、必要なものは自分で修正してください。）

私が直接使うvue-cliで作ったプロジェクトのコードディレクトリは以下の通りです。

使用方法は以下の通りです。

tree Dataのフォーマットは以下の通りです。

treeData: [
    {open: false, name: '1', level: 0, checked: true},
    {
     open: false, // opend       
     name: '2',
     level: 0, //level     
     checked: false, // checked         
     children: [
      {
       open: false,
       name: '3',
       level: 1,
       checked: false,
       children: [
        {open: false, name: '4', level: 2, checked: false},
        {
         open: false,
         name: '5',
         level: 2,
         checked: false
        }
       ]
      }
     ]
    }
   ],

このコンポーネントはいくつかのポイントに設計されています。
1.深さウォッチ
データは深層の対象ですので、単純なウオッチではデータの変化は検出できません。だから、deepを使って、コードは以下の通りです。

watch: {
  //      treeDate        deep
  treeData: {
   handler: function (newVal, oldVal) {
    this.calculateSelectFormResult()
   },
   deep: true
  }
 }

2.再帰
データの結果は再帰的に巡回され、

calculateSelectFormResult: function () {
   var arr = []
   function f (obj) {
    for (var i in obj) {
     if (obj[i].checked) {
      // console.log(2)
      arr.push(obj[i].name)
     }
     if (obj[i].children) {
      if (obj[i].children.length !== 0) {
       f(obj[i].children)
      }
     }
    }
   }
   f(this.treeData)
   this.selectFormResult = arr
   console.log(this.selectFormResult)
  }

3.シミュレーションSLidendown sledUpアニメーション効果

プロジェクトの完全コード住所：https://github.com/YalongYan/tree
補足知識：vue実現elmentはツリーコントロールを編集できます。
機能の実現度：
elmentツリーコントロールは、追加、削除機能を備えています。この項目は、編集機能を追加し、新規にノードに名前を付けることができます。追加されたノードに直接名前を変更することもできます。
先に効果を見ます

コントロールが変更されました。入力ボックス、キーワードフィルタを入力すると、ノードアイコンが変わります。。。elment Treeツリーコントロールドキュメントを参照してください。
ダウンロード
プロジェクト住所：https://github.com/midnightvisitor/vue-el-tree.git
必要なら、自分でダウンロードしてください。
以上のように、第三者に依存しないで、単にvueでTreeツリーコントロールを実現するというケースは、小編集が皆さんに共有している内容の全部です。