Parlons de l'interface utilisateur de l'élément de composant d'arborescence

Je ne présenterai pas grand-chose sur l'élément ui ici, mais présenterai directement l'utilisation courante des composants d'arborescence chargés dynamiquement, qui est le plus couramment utilisé pour le travail.
Le code pour introduire le composant d'arborescence est le suivant :

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

Maintenant pour l'arborescence Analyse de deux méthodes courantes
1. node-click : rappel lorsqu'on clique sur un nœud, avec trois paramètres au total, dans l'ordre : l'objet correspondant au nœud dans le tableau transmis à l'attribut data, au nœud correspondant au nœud et au composant de nœud lui-même. C'est-à-dire fonction (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. méthode de chargement
load : méthode de chargement des sous-données, la forme générale est function (node, reslove) {} , en utilisant promise Pensez à faire des promesses compatibles

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!