Vue +element 用filter 对el-tree树形控件过滤

1.定义一个搜索框

    <el-input v-model="filterText" :placeholder="$t('refersetting.HereInputKeyWord')" clearable maxlength="2000" />
    //  clearable 属性 搜索框后面可以出现个删除图标，一下就能删除搜索框内容

2.在data 中 绑定 搜索框v-model 绑定的全局变量

data(){
return{
   filterText: '', // 搜索框（左树子表）的值
}
}

3.el-tree 上定义 过滤方法filter-node-method

<el-tree ref="refTree" :data="data" :props="defaultProps" highlight-current :filter-node-method="filterNode" @node-click="getChildTree" :expand-on-click-node="false" default-expand-all>

4. 定义watch 监听搜索框关键字的改变，实现数据双向绑定

  watch: {
    filterText(val) {
      this.$refs.refTree.filter(val.trim())
    },

5. 在methods 中实现过滤方法 过滤方法filter-node-method

    // 左树查询
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },

6. 效果如下

• 未输入 关键字时
  
  *输入搜索关键字
  
• 取消搜索关键字‘
  

*至此 就实现了树型控件 根据搜索框关键字，动态过滤树形控件的数据