<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>
原文地址:https://blog.csdn.net/weixin_44640323/article/details/115347336
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。