Let's talk about tree component element ui-JS Tutorial-php.cn

Let's talk about tree component element ui

一个新手

Release： 2017-09-11 09:07:26

Original

3718 people have browsed it

I won’t introduce too much about element ui here, but directly introduce the common usage of dynamically loaded tree components, which is the most commonly used for work.
The code for introducing the tree component is as follows:

<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:&#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)//加载下级数据!
      }
    }
  };</script>

Copy after login

Now for the two tree components Analysis of common methods
1. node-click: the callback when the node is clicked, with three parameters in total, in order: the object corresponding to the node in the array passed to the data attribute, the Node corresponding to the node, and the node component itself. That is, 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*/
     }
}

Copy after login

2. Load method
load: The method of loading sub-data, the general form is function(node,reslove){}, remember to use promise promise compatible

loadNode(node, resolve){
        console.log(node);        if (node.level === 0) {          //初始第一层节点,根节点
          return resolve([{ &#39;parent&#39;: &#39;1&#39; }, { &#39;parent&#39;: &#39;2&#39; }, {&#39;parent&#39;: &#39;3&#39; },]);
        }        var data = [];        if(node.data.parent == 1){        //对点击节点加载内容处理
        //一次只能处理一层，sub属性数据被忽略
          data = [{&#39;parent&#39;:&#39;1-1&#39;,&#39;sub&#39;:[{            &#39;parent&#39;:&#39;1-1-1&#39;,
          }]},{&#39;parent&#39;:&#39;1-2&#39;},{&#39;parent&#39;:&#39;1-3&#39;}];
        }        if(node.data.parent == 2){
          data = [{&#39;parent&#39;:&#39;2-1&#39;},{&#39;parent&#39;:&#39;2-2&#39;},{&#39;parent&#39;:&#39;2-3&#39;}];
        }        //内容更新
        resolve(data)
      }

Copy after login

The above is the detailed content of Let's talk about tree component element ui. For more information, please follow other related articles on the PHP Chinese website!