Home Web Front-end JS Tutorial Let's talk about tree component element ui

Let's talk about tree component element ui

Sep 11, 2017 am 09:07 AM
element components

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!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to install the Windows 10 old version component DirectPlay How to install the Windows 10 old version component DirectPlay Dec 28, 2023 pm 03:43 PM

Many users always encounter some problems when playing some games on win10, such as screen freezes and blurred screens. At this time, we can solve the problem by turning on the directplay function, and the operation method of the function is also Very simple. How to install directplay, the old component of win10 1. Enter "Control Panel" in the search box and open it 2. Select large icons as the viewing method 3. Find "Programs and Features" 4. Click on the left to enable or turn off win functions 5. Select the old version here Just check the box

How to modify element.style How to modify element.style Nov 24, 2023 am 11:15 AM

Methods for element.style to modify elements: 1. Modify the background color of the element; 2. Modify the font size of the element; 3. Modify the border style of the element; 4. Modify the font style of the element; 5. Modify the horizontal alignment of the element. Detailed introduction: 1. Modify the background color of the element, the syntax is "document.getElementById("myElement").style.backgroundColor = "red";"; 2. Modify the font size of the element, etc.

VUE3 development basics: using extends to inherit components VUE3 development basics: using extends to inherit components Jun 16, 2023 am 08:58 AM

Vue is one of the most popular front-end frameworks currently, and VUE3 is the latest version of the Vue framework. Compared with VUE2, VUE3 has higher performance and a better development experience, and has become the first choice of many developers. In VUE3, using extends to inherit components is a very practical development method. This article will introduce how to use extends to inherit components. What is extends? In Vue, extends is a very practical attribute, which can be used for child components to inherit from their parents.

How to implement calendar component using Vue? How to implement calendar component using Vue? Jun 25, 2023 pm 01:28 PM

Vue is a very popular front-end framework. It provides many tools and functions, such as componentization, data binding, event handling, etc., which can help developers build efficient, flexible and easy-to-maintain Web applications. In this article, I will introduce how to implement a calendar component using Vue. 1. Requirements analysis First, we need to analyze the requirements of this calendar component. A basic calendar should have the following functions: display the calendar page of the current month; support switching to the previous month or next month; support clicking on a certain day,

Let's talk about how Vue dynamically renders components through JSX Let's talk about how Vue dynamically renders components through JSX Dec 05, 2022 pm 06:52 PM

How does Vue dynamically render components through JSX? The following article will introduce to you how Vue can efficiently dynamically render components through JSX. I hope it will be helpful to you!

Angular components and their display properties: understanding non-block default values Angular components and their display properties: understanding non-block default values Mar 15, 2024 pm 04:51 PM

The default display behavior for components in the Angular framework is not for block-level elements. This design choice promotes encapsulation of component styles and encourages developers to consciously define how each component is displayed. By explicitly setting the CSS property display, the display of Angular components can be fully controlled to achieve the desired layout and responsiveness.

How to open the settings of the old version of win10 components How to open the settings of the old version of win10 components Dec 22, 2023 am 08:45 AM

Win10 old version components need to be turned on by users themselves in the settings, because many components are usually closed by default. First we need to enter the settings. The operation is very simple. Just follow the steps below. Where are the win10 old version components? Open 1. Click Start, then click "Win System" 2. Click to enter the Control Panel 3. Then click the program below 4. Click "Enable or turn off Win functions" 5. Here you can choose what you want to open

VSCode plug-in sharing: a plug-in for real-time preview of Vue/React components VSCode plug-in sharing: a plug-in for real-time preview of Vue/React components Mar 17, 2022 pm 08:07 PM

When developing Vue/React components in VSCode, how to preview the components in real time? This article will share with you a plug-in for real-time preview of Vue/React components in VSCode. I hope it will be helpful to you!

See all articles