要素UIツリー検索

検索ボックス

プロパティ

  ：ノードが非表示する場合は、このノードを表示することができる場合にtrueを返しをフィルタリングするフィルタノード法ツリーノードの場合=「filterNode」方法は、falseを返します

           <EL-入力Vモデル= " filterText " > </ EL-入力> 
          <EL-ツリーREF = " 空間" 
                   ID = " modelTree " 
                   ：データ = " spaceTreeData " 
                   ：小道具 = " defaultProps " 
                   ショー - チェックボックス
                   ノード -key = " のnodeId " 
                   ：デフォルト -expanded-キー= "defaultExpandedKeys "
                   ：拡大 = -onクリックノードを" 偽" 
                   ：レンダリング -content = " renderContent " 
                   ：フィルタ -node-法= " filterNode " 
                   @node +クリック= " handleNodeClickを" > </ EL-木>

データ

データ（）{
     リターン{
       // 空間ツリーデータ
      spaceTreeData：[]
       // デフォルト出力フォーマットツリー構造
      defaultProps：{ 
        子供：' 子供' 、
        ラベル：' 名前' 
      }、
      filterText：'' 、
    } 
  }、

方法

// クエリパラメータには、検索ボックスを監視し、次いで濾過
ウォッチ：{ 
  filterText（ヴァル）{ 
      この$のrefs.space.filter（ヴァル）。
    } 
}

フィルタートリガーフィルターイベント

方法：{ 
 // コードに関係なく、いくつかのレベルの最適化の後に適用することができますが、それは量が大きすぎるかクラッシュで、再帰を使用して、その後の必要性が最適化する
    filterNode（値を、データ、ノードは）{
       IF（！{値）
         リターン trueに
      } 
      LETレベル = node.level 
      LET _array = [] // のみアレイに格納された格納された値を本明細書中で使用されます。
      この.getReturnNode（ノード_array、値）
      LET結果 = falseに
      _array.forEach（項目 => { 
        結果 = ||結果項目
      }）
      戻り結果を
    } 
    getReturnNode（ノード_array、値）{
      isPassましょう = node.data && && node.data.name node.data.name.indexOf（値）== - ！1 
      isPass？_array.push（isPass）：'' 
      この .INDEX ++ 
      はconsole.log（この.INDEX）
       であれば（！isPass && node.level = 1 && node.parent）{
         この.getReturnNode（node.parent、_array、値）
      } 
    } 
}