Shulou(Shulou.com)06/01 Report--

This article mainly explains the "VUE infinite level tree data structure display how to achieve", the article explains the content is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "VUE infinite level tree data structure display how to achieve" it!

The data used in the article is the following:

MainData: {value: "root", children: [{value: "level 1-1", children: [{value: "level 2-1", children: [{value: "level 3-1", children: []}]}, {value: "level 2-2", children: []}} {value: "level 1-2", children: []}}

That's what it looks like down there.

Component recursive call

The first is for the component to call itself recursively to create a component that references itself to display the data of children. The sub-components are as follows:

{{treeData.value}} export default {name: "treeComp", props: {treeData: {default: function () {return {}, mounted () {}, methods: {}} .demo {padding:5px 0transperition1px 10pxtranstextAfter align: left;font-size:16px;max-width:500px;border-left:1px dashed # 999; &: before {content: "-"; display: inline-block Padding:0 4px;}}

Then create the parent component, which uses the child component and passes the data into the child component.

Export default {name: "treeMain", data () {return {mainData: {value: "root", children: [{value: "level 1-1", children: [{value: "level 2-1", children: [{value: "level 3-1" Children: []}}, {value: "level 2-2", children: []}}, {value: "level 1-2", children: []} Components: {"tree-comp": () = > import (". / TreeComp")}, mounted () {}, methods: {} using the render method

In addition to using components, you can also use vue's render method to take advantage of JavaScript's full programming ability to recursively process tree data, thus showing an infinite hierarchical tree. As follows:

Export default {name: "treeRender", data () {return {mainData: {value: "root", children: [{value: "level 1-1", children: [{value: "level 2-1", children: [{value: "level 3-1" Children: []}}, {value: "level 2-2", children: []}}, {value: "level 1-2", children: []} Components: {treeComp: {functional: true, props: {treeData: Object}, render (h {props: {treeData = {}) {const creatNode = (node) = > {if (node.children & & node.children.length > 0) {let hArr = node.children.map (item= > {return creatNode (item)}) return h ("div", {class: "demo"}, [node.value HArr])} else {return h ("div", {class: "demo"}, [node.value])}} return creatNode (treeData)},}}, mounted () {}, methods: {}} .demo {padding:5px 0 Margin:1px 10pxTexttext: left;font-size:16px;max-width:500px;border-left:1px dashed # 999; &: before {content: "-"; display: inline-block;padding:0 4px;}}

The core of this is that in the render method, the creatNode method recursively traverses the tree data in depth first, generates vnode, and then renders the page.

Thank you for your reading, the above is the "VUE infinite level tree data structure display how to achieve" content, after the study of this article, I believe you on the VUE infinite level tree data structure display how to achieve this problem has a deeper understanding, the specific use of the need for everyone to practice and verify. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.