el-tree loadNode懒加载的实现

 更新时间:2022年08月18日 12:03:47   作者:不能懒鸭  
本文主要介绍了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懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue跳转页面的几种常用方法实例总结

    vue跳转页面的几种常用方法实例总结

    Vue是一种流行的JavaScript框架,用于构建用户界面,在Vue中,页面跳转通常使用路由(Router)来实现,除此之外还有很多方法,这篇文章主要给大家介绍了关于vue跳转页面的几种常用方法,需要的朋友可以参考下
    2024-05-05
  • 详解Vue2 无限级分类(添加,删除,修改)

    详解Vue2 无限级分类(添加,删除,修改)

    本篇文章主要介绍了详解Vue2 无限级分类(添加,删除,修改) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 关于vue的element-ui web端引入高德地图并获取经纬度

    关于vue的element-ui web端引入高德地图并获取经纬度

    这篇文章主要介绍了关于vue的element-ui web端引入高德地图并获取经纬度,高德地图首先要去申请key和密钥,文中提供了部分实现代码和解决思路,感兴趣的朋友可以学习一下
    2023-04-04
  • Vue发送Formdata数据及NodeJS接收方式

    Vue发送Formdata数据及NodeJS接收方式

    这篇文章主要介绍了Vue发送Formdata数据及NodeJS接收方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vuex的安装、搭建及案例详解

    Vuex的安装、搭建及案例详解

    vuex是一个专门为vue开发的状态管理工具,它采用集中式存储管理应用的所有组件的状态,其核心是state,下面这篇文章主要给大家介绍了关于Vuex的安装、搭建及案例的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue router仿天猫底部导航栏功能

    vue router仿天猫底部导航栏功能

    这篇文章主要介绍了vue router仿天猫底部导航栏功能,需要的朋友可以参考下
    2017-10-10
  • vue如何自定义按钮单选和多选

    vue如何自定义按钮单选和多选

    这篇文章主要介绍了vue如何自定义按钮单选和多选问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • 如何使用Vue3构建一个图像画廊(支持图片上传)

    如何使用Vue3构建一个图像画廊(支持图片上传)

    这篇文章主要给大家介绍了关于如何使用Vue3构建一个图像画廊(支持图片上传)的相关资料,Vue画廊这是vue编写的图库应用程序,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 详解vue axios用post提交的数据格式

    详解vue axios用post提交的数据格式

    这篇文章主要介绍了详解vue axios用post提交的数据格式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue自动化注册全局组件脚本分享

    Vue自动化注册全局组件脚本分享

    这篇文章主要介绍了Vue自动化注册全局组件脚本,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03

最新评论