Ant-tree添加搜索框功能

<template>
  <a-col>
    <a-input-search
      v-model="searchTree"
      placeholder="请搜索"
      @search="searchClick"
      @change="searchClick"
    />
    <a-tree :treeData="scheduleTreeList" />
  </a-col>
</template>

<script>
// 深拷贝(不懂得话百度一下) 或者我博客也有自己封装的深拷贝的方法(拷贝对象和数组可以参考一下)
import cloneDeep from "lodash.clonedeep";
export default {
  data() {
    return {
      // 树数据
      scheduleTreeList: [],
      // 搜索时需要一个数组接收后台传过来的data数据
      searchScheduleTreeList: [],
      // 搜索框的v-model值
      searchTree: "",
    };
  },
  methods: {
    // 模拟后台发请求拿数据加载
    loadTree() {
      // loadDataTree模拟向后台发送请求的API
      loadDataTree().then((res) => {
        // scheduleTreeList存放treeData
        this.scheduleTreeList = res.list;
        // searchScheduleTreeList 用于搜索时不发请求拿数据
        this.searchScheduleTreeList = res.list;
      });
    },

    // 树搜索方法
    searchClick() {
      // searchTree  搜索框的V-model
      if (this.searchTree.length > 0) {
        // 如果搜索框的输入值大于0那么当前树的数据清空并重新赋值
        this.scheduleTreeList = [];
        // this.fetch() 检索所有的数据并且给tree重新赋值
        this.fetch(
          this.searchTree, // 参数一  当前搜索框的值
          this.searchScheduleTreeList, // 参数二  拿取之前存放treeData的数据(treeData的备用数据)
          (data) => (this.scheduleTreeList = data) // 参数三  callback返回值
        );
      } else {
        // 如果用户清空搜索框 那么重新赋值显示所有数据
        this.scheduleTreeList = this.searchScheduleTreeList;
      }
    },
    // tree搜索时检索关键字段的方法
    fetch(value, data, callback) {
      let that = this;
      // 定义新数组便于重新赋值
      let arr = [];
      function changeFieldCode(data, arr) {
        data.filter((item) => {
          // 先判断有无子节点(这里加避免查出来的数据重复<父节点包含检索词并还且带有子节点>)
          if (item.children.length !== 0) {
            // 页面显示的字段是item.title(根据项目需求进行修改)
            if (item.title.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
              // 如果父节点包含检索值直接深拷贝(不改变原来的data值)
              let val = cloneDeep(item);
              // 并且清空父节点包含的所有子节点
              val.children.length = 0;
              // 存放到一个新的数组
              arr.push(val);
            }
            // 继续递归遍历它的所有节点
            changeFieldCode(item.children, arr);
          } else {
            // 如果没有子节点且包含检索值直接把当前Item存放进数组
            if (item.title.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
              arr.push(item);
            }
          }
        });
        // 最后把所有检索到的值返回callback
        callback(arr);
      }
      // 最后别忘记调用函数changeFieldCode
      changeFieldCode(data, arr);
    },
  },
};
</script>