el table 树形结构Load 异步懒加载点击节点数据都没了
时间: 2023-12-21 13:03:56 浏览: 161
这种情况可能是因为你没有正确配置 el-table 的异步加载数据源。在 el-table 中使用树形数据时,需要通过 `lazy` 属性来开启异步加载,并通过 `load` 属性指定加载数据的方法。在加载数据的方法中,需要指定参数 `node` 来表示当前要加载的节点,以便根据节点信息从服务器获取对应的子节点数据。如果数据加载成功,需要将数据通过回调函数返回给 el-table 组件,以便渲染出树形结构。
以下是一个示例代码:
```html
<el-table :data="treeData" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :lazy="true" :load="loadData">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
```
```javascript
export default {
data() {
return {
treeData: [],
};
},
methods: {
loadData(node, resolve) {
// 从服务器获取子节点数据
axios.get('/api/getChildren', { params: { id: node.id } })
.then(response => {
// 将子节点数据返回给 el-table 组件
resolve(response.data);
})
.catch(error => {
console.error(error);
// 加载失败时需要调用 resolve 方法并传入空数组,以便 el-table 组件正确处理
resolve([]);
});
},
},
};
```
在上面的代码中,`treeData` 是树形结构的数据源,`loadData` 方法是用来加载子节点数据的回调函数。在 el-table 组件中,通过 `:tree-props` 属性来指定树形结构的属性名,如 `children` 和 `hasChildren`,以便 el-table 组件正确渲染出树形结构。同时,需要将 `lazy` 属性设置为 `true`,以开启异步加载功能。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![-](https://img-home.csdnimg.cn/images/20241226111658.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)