假设父组件father.vue
<el-input @click='showTree'/>
<el-tree ref='myTree'></el-tree>
showTree(){ //点击调用tree
this.$refs.myTree.fatherToChild({inName:'father'});
}
childToFather(treeId,treeText){ //拿到tree组件传回来的数据
console.log(treeId,treeText);
}
//以弹出框加载为例
<el-dialog :title='树' visible.sync='treeVisible' :before-close='closeTree'>
<el-tree
ref='tree'
:prop='props'
:load='loadNode'
node-key='nodeId'
lazy
show-checkbox
check-strictly
@check-change='handeCheckChange'>
</el-tree>
<el-button class='button' @click='submit()'>确定选中</el-button>
<el-button class='button' @click='closeTree()'>取消</el-button>
<el-dialog>
data(){
return{
treeVisible:false,
props:{
label:'name',
child:'child'
},
organName:'',
trees:[],
node:[],
resolve:[],
checkedId:'',
inName:'',//这个属性标是谁引用了tree组件,单页面可以不用
}
}
methods:{
fatherToChild(data){ //获取从父组件的请求
if(data!=''){
this.inName = 'data';//来自于哪个父组件调用的
this.treeVisible=true;
//定义树属性
this.Node.childNodes=[];
if(this.resolve!=''){
this.loadNode(this.node,this.resolve);//调用下层方法
}
}
},
loadNode(node,resolve){ //加载树
//调接口获取值
this.axios(path,data).then(res=>{
this.node=node;
this.resolve=resolve;
return resolve(res.data)
})
}
handeCheckChange(data,ischecked){ //选中里面的checkbod
let res=[];
if(ischecked==true){
this.checkedId=data.nodeId;
this.$refs.tree.setCheckedKeys([data.nodeId])
}else{
if(this.checkedId==data.nodeId){
this.$refs.tree.setCheckedKeys([data.nodeId])
}
}
res=this.$refs.tree.getCheckedNodes();
this.trees=res;
}
submit(){ //确定提交,给父组件发送结果
let treeText=[];
let treeId=[];
for(let i in this.trees){
treeId.push(this.trees[i].nodeId);
treeText.push(this.trees[i].nodeName)
}
this.$emit('childToFather',{id:treeId,name:treeText,inName:this.inName});
//提交完毕,清空选中
this.$nextTick(()=>{
this.$refs.tree.setCheckedKeys([])
})
}
closeTree(){ //取消,关闭树
this.treeVisible=false;
this.$nextTick(()=>{
this.$refs.tree.setCheckedKeys([])
})
}
}
element-tree渲染 懒加载
最新推荐文章于 2024-08-06 17:53:03 发布