el-tree loadNode懒加载如何实现

发布时间:2022-08-26 17:44:29 作者:iii
来源:亿速云 阅读:195

这篇文章主要介绍了el-tree loadNode懒加载如何实现的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇el-tree loadNode懒加载如何实现文章都会有所收获,下面我们一起来看看吧。

需要 lazy、 load 两个属性一起用

<el-tree 
         :data="treeData" 
         :props="defaultProps" 
         :load="loadNode" 
         @node-click="handleNodeClick" 
         lazy>
</el-tree>
data() {
    return {
        treeDataList: [],
        defaultProps: {
            id: 'id',
            label: 'name',
            children: 'children',
            parentId:'parentId',
            isLeaf: false,// 指定节点 是否为叶子节点,仅在指定了 lazy 属性的情况下生效
        },
    }
},
loadNode(node, resolve) {    
    let that = this;
    if (node.level === 0) {
        that.getFatherData(resolve);//获取顶级节点数据
    }
    if (node.level >= 1) {
        this.getChildrenData(node.data.id, resolve);//异步获取子节点数据
        return resolve([]); // 防止在该节点没有子节点时一直转圈
    }
},

获取顶级节点数据:

getFatherData(resolve) { 
    let options = {
        url: '',
        data: {
            parentId: 0
        }
    }
    let res = await $.fn.commonPlugin.commonAjaxRequest(options)
    if(res.flag){
        let data = res.data;
        data.forEach(item => {
            item={...item,isLeaf:true}
        });
        resolve(data)
    }
},

获取子节点数据:

getChildrenData(parentId, resolve) { 
       let options = {
            url: '',
            data: {
                parentId
            }
        }
        let res = await $.fn.commonPlugin.commonAjaxRequest(options)
        if(res.flag){
            let data = res.data;
            data.forEach(item => {
                item={...item,isLeaf:false}
            });
            resolve(data)
        } 
    },

关于“el-tree loadNode懒加载如何实现”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“el-tree loadNode懒加载如何实现”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. html中如何实现懒加载
  2. React路由懒加载如何实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

el-tree loadnode

上一篇:JavaScript本地存储与会话存储如何实现

下一篇:Node.js之Buffer和Stream模块系统怎么应用

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》