How to implement JSON tree using Vue2.x

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:

<tree
 :parent-data="data"
 :data="item"
 :path="path + (Array.isArray(data) ? `[${index}]` : `.${index}`)"
 :path-checked="pathChecked"
 :path-selectable="pathSelectable"
 :selectable-type="selectableType"
 :index="index"
 :child="true"
 @click="handleItemClick">
</tree>

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!