vue--el-tree懒加载数据并且实现树的过滤

树的样式：

过滤效果：

过滤代码实现：
1，如果这里的树数据是全加载，即可使用element-ui中的设置，进行前端过滤。
element-ui对应的组件位置

<el-input
  placeholder="输入关键字进行过滤"
  v-model="filterText">
</el-input>
<el-tree
  class="filter-tree"
  :data="data"
  :props="defaultProps"
  default-expand-all
  :filter-node-method="filterNode"
  ref="tree">
</el-tree>
// 监听输入框中的数据
 watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },

    methods: {
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      }
    },

2，如果这里的树数据是懒加载，，需要使用后端的模糊加载，返回搜索到的树的节点。
树的懒加载实现
重要的是:filter-node-method=“filterNode”，这个属性

<el-input placeholder="请输入搜索内容" v-model="filterText" class="inputStyle" clearable> </el-input>
             <el-tree
              :data="treeData"
              node-key="id"
              :filter-node-method="filterNode"
              ref="dimTree"
              :props="treeDataDefaultProp"
              class="tree_Style"
              :expand-on-click-node="false"
              :load="loadNode"
              lazy
            ></el-tree>
	  data(){
			return {
				filterText: '',
				keyword:'',
				}
			}
 watch: {
    // 树节点的过滤
    filterText(val) {   
      this.keyword = val
      this.getTreeData()
    }
methods：{
// 将keyword传入到接口中，从后端返回模糊匹配后的节点，然后赋值给树绑定的数据变量，即可完成。
 // 得到树的列表
    async getTreeData() {
      const param = {
        type: Number(this.cateTabActive),
        keyword: this.keyword
        };
      const res = await this.$api.get('/api/category', param);
      if (res.code == 200) {
        this.treeData = res.info;
      } else {
        return false;
      }
    },
}