elementui的树形组件上手

elementui的树形组件上手

这里不对element ui做过多介绍，直接介绍工作最常用的一个动态加载树形组件的常用用法

引入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>

[效果图(https://img.blog.csdn.net/20170910115655509?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZHlsYW5femVuZzky/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
现在对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)
      }