ElementUI实现异步加载树-蒲公英云

ElementUI实现异步加载树

<el-tree ref="tree"
    :data="data"
    lazy
    show-checkbox
    node-key="id"
    check-strictly
    :load="loadnode"
    :props="defaultProps"
    @node-click="nodeclick">
</el-tree>
export default { 
    data() { 
        return { 
            data:[],//树对象数据模型
            defaultProps: { //树对象属性对应关系
                children: 'children',
                label: 'label'
            },
            typeinfo: { //分类实体对象
                id:'',
                pid:'',
                label: '',
                seqno: ''
            }
        }
    },
    methods: { 
        loadnode(node,resolve) { 
            //如果展开第一级节点，从后台加载一级节点列表
            if(node.level==0)
            { 
                this.loadfirstnode(resolve);
            }
            //如果展开其他级节点，动态从后台加载下一级节点列表
            if(node.level>=1)
            { 
                this.loadchildnode(node,resolve);
            }
        },
        //加载第一级节点
        loadfirstnode(resolve){ 
            axios.get('http://localhost:6060/loadtype')
                .then(function(resp){ 
                    resolve(resp.data);
                })
        },
        //刷新树组件
        refreshtree() { 
            var _this = this;
            axios.get('http://localhost:6060/loadtype')
                .then(function(resp){ 
                    _this.data = resp.data;
                })
        },
        //加载节点的子节点集合
        loadchildnode(node,resolve) { 
            axios.get('http://localhost:6060/loadtypechild?pid='+node.data.id)
                .then(function(resp){ 
                    resolve(resp.data);
                })
        },
        //点击节点上触发的事件，传递三个参数，数据对象使用第一个参数
        nodeclick(data,dataObj,self) { 
            //alert(data.label+",id="+data.id);
            this.typeinfo.id=data.id;
            this.typeinfo.pid=data.pid;
            this.typeinfo.label=data.label;
            this.typeinfo.seqno=data.seqno;
        }
    }
}
</script>