###
实现 Element UI `
el-table`
树形数据懒加载的功能
为了在
Element UI 的 `
el-table` 组件中
实现树形数据的
懒加载功能，可以通过设置特定属性
并定义回调函数完成。以下是详细的
实现方法：
#### 属性配置
1
. **row
-key**: 设置每一行
数据的唯一标识符，通常是一个唯一的 ID 字段。
2
. **lazy**: 开启
懒加载模式。
3. **load**: 定义一个异步
加载子节点的回调函数，在展开某一行时触发。
这些属性的具体作用如下：
- 当设置了 `lazy=true` 后，`
el-table` 将不会自动渲染所有的子节点，而是等待用户手动展开父节点后再动态
加载其子节点[^1]。
- 通过绑定 `load` 方法，可以在每次展开某个节点时调用该方法获取对应子节点的
数据[^2]。
#### 示例代码
以下是一个完整的示例代码片段，展示了如何配置和使用
懒加载功能：
```html
<template>
<div>
<
el-table
:data="
tableData"
style="width: 100%"
row
-key="id"
border
lazy
:load="loadSub
Table"
:tree
-props="{ children: &#
39;children&#
39;, hasChildren: &#
39;hasChildren&#
39; }">
<
el-table-column prop="date" lab
el="日期"></
el-table-column>
<
el-table-column prop="name" lab
el="名称"></
el-table-column>
<
el-table-column prop="address" lab
el="地址"></
el-table-column>
</
el-table>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, date: &#
39;202
3-09
-01&#
39;, name: &#
39;Node A&#
39;, address: &#
39;Shanghai&#
39;, hasChildren: true },
{ id: 2, date: &#
39;202
3-09
-02&#
39;, name: &#
39;Node B&#
39;, address: &#
39;Beijing&#
39;, hasChildren: false }
]
};
},
methods: {
loadSub
Table(treeRow, resolve) {
setTimeout(() => {
const subNodes = treeRow
.id === 1 ? [
{ id: 11, date: &#
39;202
3-09
-0
3&#
39;, name: &#
39;Child Node A1&#
39;, address: &#
39;Guangzhou&#
39;, hasChildren: false },
{ id: 12, date: &#
39;202
3-09
-04&#
39;, name: &#
39;Child Node A2&#
39;, address: &#
39;Chengdu&#
39;, hasChildren: true }
] : [];
resolve(subNodes); // 调用resolve返回子节点
数据
}, 1000);
}
}
};
</script>
```
#### 关键点解析
1
. **`row
-key` 配置**
使用 `row
-key` 来指定每一行
数据的唯一标识字段，这有助于框架正确识别父子关系以及缓存已
加载过的节点[^
3]。
2
. **`load` 函数逻辑**
- 参数说明：`treeRow` 表示当前被展开的节点对象；`resolve` 是用于通知框架已完成子节点
加载的一个回调函数。
- 在实际项目中，可以根据业务需求替换掉模拟请求的部分，改为真实的 API 请求来拉取服务器端
数据[^4]。
3. **`hasChildren` 判断**
如果某一节点可能拥有子节点，则需将其标记为 `true`，即使目前尚未
加载具体子项也无妨。这样能够确保界面显示正确的折叠/展开图标[^1]。
---
###
扫一扫
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
