###
实现 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: 'children', hasChildren: 'hasChildren' }">
<
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: '2023
-09
-01', name: 'Node A', address: 'Shanghai', hasChildren: true },
{ id: 2, date: '2023
-09
-02', name: 'Node B', address: 'Beijing', hasChildren: false }
]
};
},
methods: {
loadSub
Table(treeRow, resolve) {
setTimeout(() => {
const subNodes = treeRow.id === 1 ? [
{ id: 11, date: '2023
-09
-03', name: 'Child Node A1', address: 'Guangzhou', hasChildren: false },
{ id: 12, date: '2023
-09
-04', name: 'Child Node A2', address: 'Chengdu', hasChildren: true }
] : [];
resolve(subNodes); // 调用resolve返回子节点数据
}, 1000);
}
}
};
</script>
```
#### 关键点解析
1. **`row
-key` 配置**
使用 `row
-key` 来指定每一行数据的唯一标识字段，这有助于框架正确识别父子关系以及缓存已加载过的节点[^3]。
2. **`
load` 函数逻辑**
- 参数说明：`treeRow` 表示当前被展开的节点对象；`resolve` 是用于通知框架已完成子节点加载的一个回调函数。
- 在实际项目中，可以根据业务需求替换掉模拟请求的部分，改为真实的 API 请求来拉取服务器端数据[^4]。
3. **`hasChildren` 判断**
如果某一节点可能拥有子节点，则需将其标记为 `true`，即使目前尚未加载具体子项也无妨。这样能够确保界面显示正确的折叠/展开图标[^1]。
---
###
扫一扫
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
