el-tree-select 异步加载数据

在使用 `el-tree-select` 组件时，若需实现异步加载数据的功能，可以通过结合 `el-select` 和 `el-tree` 的方式来实现。虽然 Element UI 本身并未提供 `el-tree-select` 组件的原生异步加载支持，但通过自定义封装和利用 `el-tree` 的懒加载机制，可以实现类似的效果。 ### 实现思路 1. **使用 `el-select` 包裹 `el-tree`** 利用 `el-select` 提供下拉选择框，将 `el-tree` 嵌套在其内部作为下拉内容，实现树形结构的选择效果。 2. **开启懒加载模式（lazy mode）** `el-tree` 支持懒加载节点数据，通过设置 `lazy` 属性并配合 `load` 方法，可实现异步加载子节点数据。该方法适用于点击展开某个节点时请求接口获取子级数据。 3. **控制选中状态与层级信息返回** 在用户点击树节点后，可通过事件监听获取当前节点及其父节点信息，并结合单选逻辑处理。 ### 示例代码 以下是一个基于 Vue 2 和 Element UI 的示例实现： ```vue <template> <el-form-item label="选择节点"> <el-select v-model="selectedNode" placeholder="请选择" filterable :filter-method="handleFilter" clearable > <el-tree ref="tree" :props="props" :load="loadNode" lazy show-checkbox node-key="id" @check-change="handleCheckChange" :check-strictly="true" ></el-tree> </el-select> </el-form-item> </template> <script> export default { data() { return { selectedNode: '', props: { label: 'label', children: 'children', isLeaf: 'leaf' }, currentNode: null, parentNodes: [] }; }, methods: { // 懒加载节点 async loadNode(node, resolve) { if (node.level === 0) { const data = await this.fetchRootNodes(); // 获取根节点 this.$refs.tree.updateKey = Math.random(); return resolve(data); } if (node.level >= 1) { const data = await this.fetchChildNodes(node.data); // 根据当前节点请求子节点 return resolve(data); } }, // 获取根节点数据 fetchRootNodes() { return new Promise(resolve => { setTimeout(() => { resolve([ { id: 1, label: '一级节点1', leaf: false }, { id: 2, label: '一级节点2', leaf: false } ]); }, 500); }); }, // 获取子节点数据 fetchChildNodes(parentNode) { return new Promise(resolve => { setTimeout(() => { resolve([ { id: parentNode.id * 10 + 1, label: '子节点1', leaf: true }, { id: parentNode.id * 10 + 2, label: '子节点2', leaf: true } ]); }, 500); }); }, // 筛选方法 handleFilter(value) { this.$refs.tree.filter(value); }, // 节点点击或勾选变化 handleCheckChange(currentNode, isChecked) { if (isChecked) { this.selectedNode = currentNode.label; this.currentNode = currentNode; this.parentNodes = this.getParentNodes(currentNode); } }, // 获取父节点路径 getParentNodes(node) { let parents = []; let current = node.parent; while (current && current.level > 0) { parents.unshift(current.data); current = current.parent; } return parents; } } }; </script> ``` ### 功能说明 - **异步加载**：通过 `load` 方法实现懒加载，每次展开非叶子节点时触发异步请求。 - **过滤功能**：结合 `filter-method` 实现模糊搜索，提升用户体验。 - **节点选中与父子关系**：通过 `check-change` 事件获取当前选中节点及所有父节点信息，满足业务需求中的层级返回要求。 - **单选控制**：通过 `check-strictly` 配合手动管理选中状态，实现单选效果。 ---