前一段时间刚接触vue3.x,发现网上生态不多。在使用vue3.x+el-tree的时候遇到了一些问题,随笔而写,希望可以帮到一些小白朋友。
这是官网的dome,我们想要进行懒加载。首先我们看一下el-tree的懒加载:
如上所示:我标记的这两个属性是el-tree懒加载必备,做懒加载的时候需要把他们都写上。
lazy | 是否懒加载子节点,需与 load 方法结合使用, 默认值为false |
load | 加载子树数据的方法,仅当 lazy 属性为 true 时生效 |
以下是我的代码:我定义了一个变量为true,赋值给lazy。定义loadNode函数
<el-tree
class="filter-tree"
:props="defaultProps"
:expand-on-click-node="false"
ref="quickTree"
:load="loadNode"
:lazy="lazyFlag"
>
const loadNode = (node:any,resolve:any) => { // 加载 树数据
if (node.level === 0) {
//level==0为第一级,先把node和resolve函数存起来,搜索的时候使用
nodeObj.value = node;
resolveFun.value = resolve;
//调取ajax获取数据。。。然后使用resolve(data)方法载入数据,data为你的数据数组
}
else {
//调取ajax获取数据。。。然后使用resolve(data)方法载入数据,data为你的数据数组
}
};