这里不对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){}    */<ｓｃｒｉｐｔ>  export default {    data() {      return {        props:{        //配置父子树的属性名          label:&#39;parent&#39;,          children:&#39;sub&#39;        }      };    },    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: &#39;1&#39; }, { label: &#39;2&#39; }, { label: &#39;3&#39; },]);        }        var data = [];        if(node.data.label == 1){//点击树节点1的处理          data = [{label:&#39;1-1&#39;},{label:&#39;1-2&#39;},{label:&#39;1-3&#39;}];        }        if(node.data.label == 2){//点击树节点2的处理          data = [{label:&#39;2-1&#39;},{label:&#39;2-2&#39;},{label:&#39;2-3&#39;}];        }        resolve(data)//加载下级数据!      }    }  };</ｓｃｒｉｐｔ>

现在对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)      }