Let's talk about tree component element ui
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:'parent', children:'sub' } }; }, 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: '1' }, { label: '2' }, { label: '3' },]); } var data = []; if(node.data.label == 1){//点击树节点1的处理 data = [{label:'1-1'},{label:'1-2'},{label:'1-3'}]; } if(node.data.label == 2){//点击树节点2的处理 data = [{label:'2-1'},{label:'2-2'},{label:'2-3'}]; } resolve(data)//加载下级数据! } } };</script>
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*/ } }
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([{ '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) }
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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

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.

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.

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,

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!

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.

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

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!
