码迷,mamicode.com
首页 > 其他好文 > 详细

element-ui树结构懒加载

时间:2018-10-19 18:20:06      阅读:443      评论:0      收藏:0      [点我收藏+]

标签:efault   项目   check   node   get   color   sele   data   status   

在实际项目中,往往树结构数据量较大,这时树节点必须懒加载

element-ui树的懒加载:

<div style="width:100%;height:420px;overflow: auto;">
                        <el-tree lazy :load="getOrgList" :props="defaultProps" highlight-current @node-click="handleNodeClick">
                        </el-tree>
</div>

js代码如下:

defaultProps: {
                    children: "children",
                    label: "name"
                },

树节点形式为:

 [
        {
            "id": "1",
            "name": "国家电网",
            "status": null,
            "isCheck": null,
            "children": []
        }
    ]

 

getOrgList方法如下:

/**
             * 懒加载树获取组织机构子节点
             * element-tree使用方法
             * @param node:当前点击节点信息
             * @param resolve:传递参数方法
             * */
            getOrgList(node,resolve) {
                /*this.$http.get(`${process.env.NODE_ENV}/admin/org/selectall`)
                    .then((response) => {
                        this.data2 = response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
*/
                let self = this;
                console.log(node);
                if(node.level == 0){
                    self.$http.get(`${process.env.NODE_ENV}/admin/org/selectall`).then(res => {
                        let treeData = []
                        res.data.data.forEach(e => {
                            treeData.push(e)
                        })
                        resolve(treeData);
                    }).catch(res => {
                        resolve([]);
                    })
                }else{
                    console.log("当前节点id值为:"+node.data.id)
                    self.$http.get(`${process.env.NODE_ENV}/admin/org/selectall/${node.data.id}`).then(res => {
                        let myList = [];
                        res.data.data.forEach(e => {
                            myList.push(e)
                        })
                        resolve(myList);
                    }).catch(res => {
                        resolve([]);
                    })

                }

            },

 

handleNodeClick方法如下:

                        // 点击树
            handleNodeClick(data) {
                console.log("点击树节点");
                console.log(data);
                this.clickTree = data;
            },                    

 

element-ui树结构懒加载

标签:efault   项目   check   node   get   color   sele   data   status   

原文地址:https://www.cnblogs.com/yuwenjing0727/p/9817911.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!