vue3 el-tree懒加载展开

### Vue3 中实现 `el-tree` 组件的懒加载展开功能 在 Vue3 的项目中，可以通过配置 `<el-tree>` 组件的相关属性来实现树形结构的懒加载功能。以下是具体的实现方法： #### 1. 配置基础模板 通过设置 `lazy` 和 `load` 属性，可以启用懒加载模式并定义异步数据加载逻辑。 ```html <template> <div> <!-- 输入框用于过滤 --> <el-input placeholder="请输入搜索内容" v-model="filterText" class="inputStyle" clearable @input="handleFilter" /> <!-- 树组件 --> <el-tree :data="treeData" node-key="id" :props="defaultProps" :filter-node-method="filterNode" ref="treeRef" :expand-on-click-node="false" lazy :load="loadNode" class="tree_Style" > </el-tree> </div> </template> ``` --- #### 2. 定义响应式数据 在 `setup()` 或组合式 API 中初始化必要的状态变量。 ```javascript <script setup> import { ref, watch } from 'vue'; const treeData = ref([]); // 初始为空数组 const filterText = ref(''); // 过滤输入框的内容 const defaultProps = { label: 'name', // 节点显示字段名 children: 'children', isLeaf: 'leaf' // 是否为叶子节点 }; const treeRef = ref(null); // 处理过滤操作 function handleFilter(value) { treeRef.value.filter(value); } // 自定义过滤函数 function filterNode(value, data) { if (!value) return true; return data.name.includes(value); } </script> ``` --- #### 3. 实现懒加载逻辑 (`load`) `load` 方法会在每次节点被展开时触发，需返回一个 Promise 并调用后端接口获取子节点数据。 ```javascript async function loadNode(node, resolve) { try { const params = { id: node.level === 0 ? '' : node.data.id, keyword: filterText.value || '' }; const response = await fetchLazyTreeData(params); // 假设这是封装好的请求方法 if (response.success && Array.isArray(response.data)) { resolve(response.data.map(item => ({ ...item, leaf: !item.children?.length // 动态判断是否为叶子节点 }))); } } catch (error) { console.error(error); resolve([]); } } // 模拟后端接口请求 async function fetchLazyTreeData({ id, keyword }) { const url = `/api/tree-data?id=${id}&keyword=${encodeURIComponent(keyword)}`; const res = await fetch(url).then(r => r.json()); return res; } ``` --- #### 4. 整合样式与交互 为了提升用户体验，可以在 CSS 文件中自定义树组件的样式。 ```css <style scoped> .inputStyle { margin-bottom: 10px; width: 100%; } .tree_Style ::v-deep(.el-tree-node__content) { height: 36px; line-height: 36px; } </style> ``` --- ### 总结 以上代码展示了如何基于 Vue3 和 Element Plus 实现 `el-tree` 的懒加载功能。核心在于： - 使用 `lazy` 和 `load` 属性动态加载子节点。 - 结合 `filter-node-method` 提供实时过滤支持[^1]。 - 后端接口负责提供分层数据，并根据关键词筛选结果。 --- ####