vue3 element plus TreeSelect el-tree-select 远程搜索 怎么鼠标放入加载默认数据源

在 Vue3 中使用 Element Plus 的 `el-tree-select` 组件进行远程搜索并实现在鼠标悬停时加载默认数据源，你需要结合组件的 `remote-method` 和 `filter-method` 属性来实现这个功能。这里是一个简单的示例：

首先，安装 Element Plus 和相关的依赖：

npm install element-plus vue3

然后，在你的 Vue3 组件模板中，设置 TreeSelect 的基本结构，并添加必要的属性：

<template>
  <el-tree-select
    ref="treeSelect"
    v-model="selectedValue"
    :props="treeProps"
    placeholder="请选择"
    remote-method="fetchData"
    filter-method="remoteFilter"
    @remote-loading="handleRemoteLoading"
  ></el-tree-select>
</template>

接下来，在你的 script 部分，定义相关的数据和方法：

<script setup>
import { ref } from 'vue';
import { ElTreeSelect } from 'element-plus';

const fetchData = (input) => {
  // 这里模拟一个异步远程请求，实际项目中应替换为真实服务端API
  return new Promise((resolve) => {
    setTimeout(() => {
      const defaultDataSource = [
        // 假设这是你的默认数据源
        { value: 'default-item-1', label: '默认项1' },
        // 添加更多默认项...
      ];
      resolve({ data: defaultDataSource });
    }, 500); // 模拟延迟加载时间
  });
};

const handleRemoteLoading = (node, search) => {
  if (!search) { // 如果用户未输入搜索内容，显示默认数据源
    node.data.loading = true;
    fetchData('');
  }
};

const treeProps = {
  children: 'children',
  expandAndLoad: false,
};

// 其他变量和方法...
let selectedValue = ref(null);
</script>

最后，在你的 CSS 或样式文件中，如果需要，你可以调整加载状态的样式：

.el-tree-node.is-loading {
  /* 样式调整，如添加 loading 动画 */
}