el-ui官网的懒加载栗子是固定写的数据
那么我们自己从后端获取的数据有何变化,又如何写呢
其实,
差别不大.
html部分可以完全拷贝,没有问题的.
<template>
<div>
<el-table
:data="tableData1"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
</template>
至于 js部分
建议去除setTimeout部分
因为本身就是异步获取数据,有一定的时间差,当然加上也是完全没问题滴.
伪代码附上,调用自己的api获取数据,即可.
重要的是数据的格式,
hasChildren 布尔值属性要有的,
load(tree, treeNode, resolve) {
setTimeout(() => {
调用api.then(response=> resolve(response.data) )) //注意回调的data必须为数组.
}, 1000)
}
只要数据格式没错,
方法没错数据都可以正常展示的,
tree参数表示当前位置节点信息的.需要查询吧tree参数的属性赋值一下就可以查询了.