vue封装一个树形控件筛选和懒加载可以同时使用

可以封装一个树形控件组件，然后添加筛选和懒加载功能。

筛选功能可以通过在组件中添加一个搜索框，用户输入关键字后，使用递归算法遍历树形结构，找到包含关键字的节点并展示。

懒加载功能可以通过在组件中添加一个“展开”按钮，用户点击后异步加载子节点。可以在组件中添加一个方法，当点击展开按钮时，向服务器发送请求获取子节点数据，然后将子节点添加到父节点下面。

下面是一个简单的示例代码：

<template>
  <div>
    <input v-model="searchKeyword" placeholder="搜索">
    <ul>
      <li v-for="(item, index) in treeData" :key="index">
        <span @click="toggleNode(item)">
          {{item.label}}
          <span v-if="!item.isLeaf && !item.isExpanded">[展开]</span>
        </span>
        <ul v-show="item.isExpanded">
          <li v-for="(child, i) in item.children" :key="i">
            {{child.label}}
          </li>
          <li v-if="item.children.length === 0">暂无数据</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    treeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      searchKeyword: ''
    }
  },
  methods: {
    toggleNode(node) {
      if (!node.isLeaf && !node.isExpanded) {
        // 异步加载子节点
        // ...
        node.isExpanded = true
      } else {
        node.isExpanded = !node.isExpanded
      }
    },
    filterTree(treeData, keyword) {
      treeData.forEach(node => {
        if (node.label.indexOf(keyword) !== -1) {
          node.isMatched = true
          node.isExpanded = true
        } else {
          node.isMatched = false
          node.isExpanded = false
        }
        if (node.children) {
          this.filterTree(node.children, keyword)
        }
      })
    }
  },
  watch: {
    searchKeyword(val) {
      this.filterTree(this.treeData, val)
    }
  }
}
</script>

在这个示例中，我们使用了一个输入框来实现筛选功能，使用了一个“展开”按钮来实现懒加载功能。当用户输入关键字时，会触发 `searchKeyword` 的 `watch`，然后调用 `filterTree` 方法来遍历树形结构并展示符合条件的节点；当用户点击展开按钮时，会触发 `toggleNode` 方法，然后异步加载子节点并将其添加到父节点下面。