Lassen Sie uns über die Benutzeroberfläche des Baumkomponentenelements sprechen-js-Tutorial-php.cn

Lassen Sie uns über die Benutzeroberfläche des Baumkomponentenelements sprechen

一个新手

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

Original

3718 Leute haben es durchsucht

Ich werde hier nicht zu viel über die Element-UI vorstellen, sondern direkt die allgemeine Verwendung des dynamischen Ladens von Baumkomponenten vorstellen, die in der Arbeit am häufigsten verwendet wird.
Der Code zum Einführen der Baumkomponente lautet wie folgt:

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

Nach dem Login kopieren

Jetzt zur Baumanalyse zweier gängiger Methoden
1. Node-Click: Rückruf, wenn auf einen Knoten geklickt wird, mit insgesamt drei Parametern, in der Reihenfolge: das Objekt, das dem Knoten in entspricht das an das Datenattribut übergebene Array, der dem Knoten entsprechende Knoten und die Knotenkomponente selbst. Das heißt, Funktion (Daten, Knoten, Vue-Komponente) {}

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*/
     }
}

Nach dem Login kopieren

2. Lademethode
Laden: Methode zum Laden von Unterdaten, die allgemeine Form ist Funktion (Knoten, Auflösung) {} , mit Versprechen Denken Sie daran, Versprechen kompatibel zu machen

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)
      }

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonLassen Sie uns über die Benutzeroberfläche des Baumkomponentenelements sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!