组件Element-UI 2实现树形下拉选择框懒加载和模糊查询

Element-UI是一个流行的Vue.js组件库，它提供了一个叫做`el-tree`的树形组件，用于实现类似的数据结构导航和筛选功能。要在Element UI 2版本中实现树形下拉列表的懒加载（即只在用户展开节点时加载数据）和模糊查询（用户输入搜索关键字实时过滤节点），可以按照以下步骤操作：

1. **设置初始状态**：
- 定义一个空的树形数据结构，初始状态下所有节点都是关闭的，只有根节点显示。
- 当需要从服务器获取数据时，设置一个标志或者状态表示正在加载。

2. **懒加载函数**：
- 在`data-loading`属性中，你可以编写一个自定义的函数，当点击节点时这个函数会被触发。在这个函数内部，发送请求到服务器获取该节点的子节点数据，并将其添加到当前节点的children属性里。

3. **模糊查询**：
- 使用`filter-node-method`属性，提供一个自定义的节点过滤函数。每当用户输入搜索关键词时，这个函数会遍历节点的文本内容、标签值等，判断是否匹配用户的输入。

<template>
  <el-tree
    :data="treeData"
    :props="defaultProps"
    :load="loadNode"
    :filter-node-method="filterNode"
    placeholder="请输入搜索内容..."
    @node-click="handleNodeClick"
  ></el-tree>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        // 根节点数据
      ],
      isLoading: false,
      searchKeyword: "",
    };
  },
  methods: {
    loadNode(node) {
      this.isLoading = true;
      setTimeout(() => {
        // 模拟异步数据加载
        const loadChildren = /* ... */; // 从服务器获取子节点
        node.children = loadChildren;
        this.isLoading = false;
      }, 1000);
    },
    filterNode(value, search, node) {
      return node.label.includes(search) || // 判断节点标签
             // 或者根据实际需求检查其他属性
    },
    handleNodeClick(node) {
      if (node.isLoad) { // 如果节点已加载
        // 跳转到详情页或其他处理逻辑
      }
    },
  },
};
</script>