Home > Article > Web Front-end > How to use Vue to implement tree view data

How to use Vue to implement tree view data

php中世界最好的语言Original: 2018-05-31 10:22:551702browse

This time I will show you how to use Vue to implement tree view data, and what are the precautions for using Vue to implement tree view data. The following is a practical case, let's take a look.

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

This is the simulated tree view data

let all={ 
  name:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        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:'tree', 
 props:['treelist'], 
 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:'all', 
  children:{ 
   A:{ 
    name:'A', 
    children:{ 
     a1:{ 
      name:'a1', 
      children:{ 
       a11:{  
        name:'a11', 
        children:null 
       }, 
       a12:{  
        name:'a12', 
        children:null 
       } 
      } 
     }, 
     a2:{ 
      name:'a2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   }, 
   B:{ 
    name:'B', 
    children:{ 
     b1:{ 
      name:'b1', 
      children:{ 
       b11:{  
        name:'b11', 
        children:null 
       }, 
       b12:{  
        name:'b12', 
        children:null 
       } 
      } 
     }, 
     b2:{ 
      name:'b2', 
      children:{ 
       b21:{  
        name:'b21', 
        children:null 
       } 
      } 
     } 
    } 
   } 
  } 
 } 
const app=new Vue({ 
 el:"#app", 
 components:{ 
  'tree':tree 
 }, 
 data:{ 
  treeList:all 
 } 
})

After going through the pitfalls, I found a similar case on the Vue official website. Link → Portal

After referring to the method on the official website, 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, traverse the objects in each children, and pass them into the component for processing one by one. 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)

What are the benefits of writing such a component to process an object?

I can customize the switch in the component

I am in data

variableopen is defined in it. Because the component is recursive, it is equivalent to each component having its own open

So why couldn't I use this method when I first stepped on the trap? Because my first attempt was to use a component to handle multiple objects, which is equivalent to a switch controlling all the objects in children. When the switch is turned on, this will occur at the same time. All objects at the level are expanded

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

Definition A calculated

attribute is used to determine whether to continue execution based on children

A custom event is bound to 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 pass all the objects in the children to itself. Then continue to perform the same operation until children have no data. It is worth mentioning that

, if v-if is not added here, it will become The infinite loop will continue to execute, so we need to determine whether the currently executed object has a next level

My data has been slightly changed here, so I The first data passed in is (index.html page)

Then I defined an event to handle the closing and opening of each layer. I used the pop-up box to see whether the value of Isopen was changed.

Let’s take a look at the results.

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

Then I clicked A

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

But the page is still empty No change, not to mention the expansion function, even undefined has not changed

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related topics on the PHP Chinese website article!

How to use Vue to implement tree view data

Related articles