el-autocomplete 及 el-tree 实现远程搜索与同步

在实际项目中，我们经常需要实现远程搜索和同步树的功能。这篇文章将介绍如何使用 el-autocomplete 和 el-tree 组件来实现这一需求。

el-autocomplete 组件是一个自动完成组件，它可以根据用户输入的内容提供建议。el-tree 组件是一个树形组件，它可以用于展示数据结构。

首先，我们需要在组件中引入 el-autocomplete 和 el-tree 组件。

import { ElAutocomplete, ElTree } from 'element-ui';

Vue.component('el-autocomplete', ElAutocomplete);
Vue.component('el-tree', ElTree);

接下来，我们需要定义一个数据对象，用于存储搜索结果和树形数据。

export default {
  data() {
    return {
      // 搜索结果
      searchResults: [],
      // 树形数据
      treeData: [],
    };
  },
};

然后，我们需要配置 el-autocomplete 组件。

<el-autocomplete
  v-model="searchValue"
  :fetch-suggestions="fetchSuggestions"
  placeholder="请输入搜索内容"
>
</el-autocomplete>

• v-model: 用于绑定搜索框的值。
• :fetch-suggestions: 用于指定当用户输入内容时触发的函数。
• placeholder: 用于指定搜索框的提示文字。

接下来，我们需要实现 fetchSuggestions 函数。

methods: {
  fetchSuggestions(query) {
    // 这里使用了 axios 进行远程搜索
    axios.get('/search', {
      params: {
        query,
      },
    })
      .then((res) => {
        // 将搜索结果存储到 searchResults 中
        this.searchResults = res.data;
      })
      .catch((err) => {
        console.error(err);
      });
  },
},

接下来，我们需要配置 el-tree 组件。

<el-tree
  :data="treeData"
  node-key="id"
  :props="defaultProps"
>
</el-tree>

• :data: 用于指定树形数据。
• node-key: 用于指定树形节点的唯一标识符。
• :props: 用于指定树形节点的属性。

defaultProps 是一个对象，用于指定树形节点的属性。

defaultProps: {
  children: 'children',
  label: 'label',
},

最后，我们需要实现一个函数，当用户选择一个搜索结果时，将相应的树形节点同步到 el-tree 组件中。

methods: {
  handleSelect(item) {
    // 这里使用了一个递归函数来找到相应的树形节点
    const findNode = (data, id) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i].id === id) {
          return data[i];
        }
        if (data[i].children) {
          const node = findNode(data[i].children, id);
          if (node) {
            return node;
          }
        }
      }
      return null;
    };

    // 将选中的树形节点同步到 el-tree 组件中
    this.$refs.tree.setCurrentKey(item.id);
  },
},

至此，我们已经完成了 el-autocomplete 和 el-tree 组件的配置。当用户输入搜索内容时，el-autocomplete 组件将触发 fetchSuggestions 函数，该函数将向服务器发送请求，获取搜索结果。当用户选择一个搜索结果时，handleSelect 函数将被触发，该函数将找到相应的树形节点并将其同步到 el-tree 组件中。