Home >Web Front-end >JS Tutorial >Vue implements tree view data function

Vue implements tree view data function

不言Original: 2018-05-07 14:33:541679browse

This article mainly introduces the implementation of Vue to implement the tree view data function. It has certain reference value. Now I share it with you. Friends in need can refer to it.

Using a simple tree view implementation , familiar with the recursive use of components

This is the simulated tree diagram data

let all={ 
  name:&#39;all&#39;, 
  children:{ 
   A:{ 
    name:&#39;A&#39;, 
    children:{ 
     a1:{ 
      name:&#39;a1&#39;, 
      children:{ 
       a11:{  
        name:&#39;a11&#39;, 
        children:null 
       }, 
       a12:{  
        name:&#39;a12&#39;, 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:&#39;a2&#39;, 
      children:{ 
       b21:{  
        name:&#39;b21&#39;, 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:&#39;B&#39;, 
    children:{ 
     b1:{ 
      name:&#39;b1&#39;, 
      children:{ 
       b11:{  
        name:&#39;b11&#39;, 
        children:null 
       }, 
       b12:{  
        name:&#39;b12&#39;, 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:&#39;b2&#39;, 
      children:{ 
       b21:{  
        name:&#39;b21&#39;, 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 }

The code is as follows

treelist.vue

<template> 
<p> 
 <ul> 
  <li > 
   <span @click="isshow()">{{treelist.name}}</span> 
    <tree v-for="item in treelist.children"  
     v-if="isFolder" 
     v-show="open" 
     :treelist="item" 
     :keys="item" 
    ></tree> 
  </li> 
 </ul> 
</p> 
</template> 
<script> 
export default { 
 name:&#39;tree&#39;, 
 props:[&#39;treelist&#39;], 
 data(){ 
  return{ 
   open:false 
  } 
 },computed:{ 
  isFolder:function(){ 
   return this.treelist.children 
   } 
  } 
 ,methods:{ 
  isshow(){ 
   if (this.isFolder) { 
    this.open =!this.open 
   } 
  } 
 } 
} 
</script> 
<style lang="less"> 
</style>

index.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>树形图</title> 
</head> 
<body> 
 <p id="app"> 
  <tree :treelist="treeList"></tree> 
   
 </p> 
</body> 
</html>

index. js

import Vue from 'vue'; 
import tree from '../components/treelist.vue' 
let all={ 
  name:&#39;all&#39;, 
  children:{ 
   A:{ 
    name:&#39;A&#39;, 
    children:{ 
     a1:{ 
      name:&#39;a1&#39;, 
      children:{ 
       a11:{  
        name:&#39;a11&#39;, 
        children:null 
       }, 
       a12:{  
        name:&#39;a12&#39;, 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:&#39;a2&#39;, 
      children:{ 
       b21:{  
        name:&#39;b21&#39;, 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:&#39;B&#39;, 
    children:{ 
     b1:{ 
      name:&#39;b1&#39;, 
      children:{ 
       b11:{  
        name:&#39;b11&#39;, 
        children:null 
       }, 
       b12:{  
        name:&#39;b12&#39;, 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:&#39;b2&#39;, 
      children:{ 
       b21:{  
        name:&#39;b21&#39;, 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 } 
const app=new Vue({ 
 el:"#app", 
 components:{ 
  'tree':tree 
 }, 
 data:{ 
  treeList:all 
 } 
})

After going through the pitfalls, I found that there is a similar case on the Vue official website, link → Portal

Refer to the official website method Finally, I tried to implement it

The difference between writing this way and my idea when I stepped on the trap is that such a component is only responsible for one object, traverses the objects in each children, and passes in the components one by one. Processing, and my first attempt was to pass the entire children into itself. It is a component that processes multiple objects. (The failure case of the first attempt, please see the bottom if you are interested)

Such a component handles What are the benefits of writing an object?

I can customize the switch in the component

I defined the variable open in data. Because the component is recursive, it is equivalent to each component having An open

Then why can’t I use this method the first time I step into a pit? Because my first attempt was A component processing multiple objects is equivalent to a switch controlling all objects in children. When the switch is turned on, all objects at the same level will be expanded.

Traverse children and pass in the component itself one by one. Use v-show to control whether to display

##defines a calculated attribute and determines whether to continue execution based on children

Bound a custom event on the span tag

Change the value of open

<span @click="isshow()">{{treelist.name}}</span>

Achieve the effect

The following is the pitfall I encountered when I first tried it

Record it here, and leave an impression when encountering similar problems in the future

I encountered such an error when I first came up

#After looking for the problem for a long time, I found that it was because I forgot to write the name in the component. When I use it, I must fill in the name and make it consistent with the label name

The initial implementation method uses component recursion to display the name of the current level and render it, and all objects in the children Pass it to yourself and then perform the same operation until children has no data. It is worth mentioning that

, if v-if is not added here, It will become an infinite loop and will continue to be executed, so we need to determine whether the currently executed object has a next level

My data has been slightly changed here , so the data I passed in for the first time was (index.html page)

Then I defined an event to handle the closing and opening of each layer , I use the pop-up box to check whether the value of Isopen has been changed

Let’s take a look at the result

When we first entered the page, the undefined in the brackets It is the current value of Isopen. Because it is not defined at this time, it is undefined

Then I clicked A

Because isopen has been inverted at this time, so isopen is true at this time

But the page still has no change, not to mention the expansion function, even undefined has not changed

After some Baidu, I found that Vue itself no longer allows direct changes to the values accepted by Props

After Vue2.0, child components cannot change the value of the parent component, only Respond to changes through child component $emit() and parent component $on()

Related recommendations:

Vue implements dynamics Refresh Echarts component

The above is the detailed content of Vue implements tree view data function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：Use of VUE-region selector (V-Distpicker) componentNext article：Use of VUE-region selector (V-Distpicker) component

See more

Vue implements tree view data function

Related articles