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

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>

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

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([{ '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)
      }

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!