这里不对element ui做过多介绍，直接介绍工作最常用的一个动态加载树形组件的常用用法
引入tree组件的代码如下：
<el-tree :data="data" :props="props" lazy @node-click="handlenodeclick" :load="loadnode"></el-tree>/*
动态加载lazy参数和load方法是必选的,
lazy:为节点store（treestore）中的属性，可输出当前节点进行查看
load：加载子数据的方法，用法为function(node,reslove){}
*/<script>
export default {
data() { return {
props:{ //配置父子树的属性名
label:'parent',
children:'sub'
}
};
},
methods: { //点击节点的处理事件，可以更改显示节点的内容
handlenodeclick(data){ //在这里改变加载的数据无法刷新树数据
//to do something ,load data from server and show the data to the view
if(data.label == 1){//判断点击节点，choose the node you clicked
/*to do something*/
}
console.log(data.label)
console.log(data)
},
loadnode(node, resolve){
console.log(node); if (node.level === 0) { //初始第一层节点，初始化数据，根节点配置
return resolve([{ label: '1' }, { label: '2' }, { label: '3' },]);
} var data = []; if(node.data.label == 1){//点击树节点1的处理
data = [{label:'1-1'},{label:'1-2'},{label:'1-3'}];
} if(node.data.label == 2){//点击树节点2的处理
data = [{label:'2-1'},{label:'2-2'},{label:'2-3'}];
}
resolve(data)//加载下级数据!
}
}
};</script>
现在对tree的两个常用方法分析
1、node-click：节点被点击时的回调，共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 node、节点组件本身。即function（data,node,vuecomponent）{}
node-clikc方法:function(data,node,vuecomponent){ //可以进行常用的点击view层展示切换}
data:参数为我们点击的节点的数据对象
node:(node对象） checked:false//是否选中
childnodes:array(3)//子节点
data:object//data数据对象
expanded:true//是否可以展开
id:1//node的id
indeterminate:false//和checkbox结合的属性，选框的样式
isleaf:false
level:1//点击的node层级
loaded:true//加载完
loading:false//加载中
parent:node//父级node
store:treestore//树形数据的store
text:null
visible:(...)
disabled:(...)
icon:(...)
key:(...)
label:"1"
__ob__:observer {value: node, dep: dep, vmcount: 0} get checked:ƒ reactivegetter() set checked:ƒ reactivesetter(newval) get childnodes:ƒ reactivegetter() set childnodes:ƒ reactivesetter(newval) get data:ƒ reactivegetter() set data:ƒ reactivesetter(newval) get expanded:ƒ reactivegetter() set expanded:ƒ reactivesetter(newval) get id:ƒ reactivegetter() set id:ƒ reactivesetter(newval) get indeterminate:ƒ reactivegetter() set indeterminate:ƒ reactivesetter(newval) get isleaf:ƒ reactivegetter() set isleaf:ƒ reactivesetter(newval) get level:ƒ reactivegetter() set level:ƒ reactivesetter(newval) get loaded:ƒ reactivegetter() set loaded:ƒ reactivesetter(newval) get loading:ƒ reactivegetter() set loading:ƒ reactivesetter(newval) get parent:ƒ reactivegetter() set parent:ƒ reactivesetter(newval) get store:ƒ reactivegetter() set store:ƒ reactivesetter(newval) get text:ƒ reactivegetter() set text:ƒ reactivesetter(newval) get visible:ƒ reactivegetter() set visible:ƒ reactivesetter(newval)
__proto__:object
具体用法//node-click函数handlenodeclick(data,parent,child){ //to do something ,load data from server and show the data to the view
if(data.label == 1){//判断点击节点，进行view层试图切换，choose the node you clicked
/*to do something*/
}
}
2、load方法
load:加载子数据的方法，一般形式为function(node,reslove){},运用了promise记得进行promise兼容
loadnode(node, resolve){
console.log(node); if (node.level === 0) { //初始第一层节点,根节点
return resolve([{ 'parent': '1' }, { 'parent': '2' }, {'parent': '3' },]);
} var data = []; if(node.data.parent == 1){ //对点击节点加载内容处理
//一次只能处理一层，sub属性数据被忽略
data = [{'parent':'1-1','sub':[{ 'parent':'1-1-1',
}]},{'parent':'1-2'},{'parent':'1-3'}];
} if(node.data.parent == 2){
data = [{'parent':'2-1'},{'parent':'2-2'},{'parent':'2-3'}];
} //内容更新
resolve(data)
}
以上就是聊聊关于树形组件element ui的详细内容。