###
Vue3 中实现 `
el-tree` 组件的
懒加载展开功能
在
Vue3 的项目中，可以通过配置 `<
el-tree>` 组件的相关属性来实现树形结构的
懒加载功能。以下是具体的实现方法：
#### 1. 配置基础模板
通过设置 `lazy` 和 `load` 属性，可以启用
懒加载模式并定义异步数据加载逻辑。
```html
<template>
<div>
<!
-- 输入框用于过滤
-->
<
el-input
placeholder="请输入搜索内容"
v
-mod
el="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 = {
lab
el: '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.lev
el === 0 ? '' : node.data.id,
keyword: filterText.value || ''
};
const response = await fetchLazy
TreeData(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 fetchLazy
TreeData({ 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]。
- 后端
接口负责提供分层数据，并根据关键词筛选结果。
---
####
博客介绍了在Vue里使用el-tree树形结构进行懒加载的方法。当同一页面存在多个树形结构时，可采用数据data与懒加载结合的方式，以此避免多次调用接口。
扫一扫
2504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
