element three 动态加载子节点
three部分内容
<el-tree show-checkbox :load="loadNode" check-strictly lazy :props="defaultProps"> </el-tree>
defaultProps: { children: 'zones', label: 'name', isLeaf: 'leaf' },
函数部分
//此函数是点击那个+的符号
a_launch(){
//此处是根据传入id来获取子节点的数据(我默认是为0) this.$axios.post('/xxxxx/xxxxx/xxxxxxx.jsp?selectEmp=true&id=0' + `&userID=${this.tool.getCookie('userID')}&` + `sessionID=${this.tool.getCookie('sessionID')}` ).then(res => { if(res.code == 0){ var obj = { id:res.data[0].id, name:res.data[0].name, disabled: true } this.data.push(obj)
//初始数据准备完毕之后打开弹出框 this.y_show = true //这是打开弹出框 } }) },
async loadNode(node, resolve){ if (node.level === 0) {
//此处的this.data数据得提前拿到准备好 return resolve(this.data); }
//当node.level > 2的时候,就不在根据id去获取数据 if (node.level > 2) return resolve([]);
//传入id,和 node.level let list = await this.contextmenu(node.data.id,node.level) resolve(list) },
contextmenu(id,level){
//根据id去请求节点信息
//level 设置我的父级不可选中 return new Promise((resolve, rejects) => { this.$axios.post(`/xxxx/xxxx/xxxxx.jsp?selectEmp=true&id=${id}` + `&userID=${this.tool.getCookie('userID')}&` + `sessionID=${this.tool.getCookie('sessionID')}` ).then(res => { if(res.code == 0){ var children = [] res.data.forEach(element => { let obj = { id:element.id, name:element.name } if(level<2){ obj['disabled'] = true } children.push(obj) }); resolve(children) } }) }) },