How to implement JSON tree using Vue2.x

亚连
Release: 2018-06-13 17:11:52
Original
2012 people have browsed it

This article mainly introduces you to the relevant information about using Vue2.

#PrefaceI recently encountered a requirement at work. Since the project needs a function to parse JSON strings and generate JSON trees, I have not found a suitable one on GitHub. component, so I wrote a JSON tree component based on Vue2.X. The main principle is to use Vue's recursive component to perform depth-first pre-order traversal. This component can not only convert an unreadable JSON string into a readable tree structure, but can also be used to capture data from a certain subtree.

    Github source code
  • Github-Page
  • Components can be recursively used within their templates Call yourself. However, this can only be done if it has the name option

String data beautification function:

Specific Hierarchical data capture function:

 
Copy after login
Pass in the father's data through parent-data, and pass in the child's data through data. When the subtree data is a simple type At this time, recursion is no longer entered. At the same time, the component provides a click event to obtain the tree data of a specific node, and the child's data is continuously passed to the next level through the recursive mechanism, similar to the "bubble mechanism".

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use ueditor in vue

##How to implement a custom control bottom drawer menu using React Native

Use ref in vue to let the parent component call the child component

How to realize the web front-end page generation exe

How to implement ajax front-end and back-end cross-domain requests

The above is the detailed content of How to implement JSON tree using Vue2.x. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
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