How to use Recursive components to implement a Tree Control in vue
This article mainly explains "how to use recursive components to achieve a tree control in vue". The content of the article is simple and clear, and it is easy to learn and understand. Please follow Xiaobian's train of thought to study and learn how to use recursive components to achieve a tree control in vue.
Vue version of the tree control
Tree structure 2 Vue.component ('tree', {name: "tree", template: `{item.label}}`, props: ["folder", "select"],}) / / var app = new Vue ({el: "# app" Data: {msg: "hello world", trees: [{id:1, label: "level 1 directory 1", show:false, children: [{id: "1-1", label: "1.1directory"} {id: "1-2", label: "1.2 directories"}, {id: "1-3", label: "1.3 directories"},]}, {id:2 Label: "level 1 directory 2", show:false}, {id:3, label: "level 1 directory 3", show:false, children: [{id: "3-1" Label: "3.1Catalog"}, {id: "3-2", label: "3.2Catalog", show:false, children: [{id: "3-2-1" Label: "3.2.1 directory"}, {id: "3-2-2", label: "3.2.2 directory"}, {id: "3-2-3" Label: "3.2.3 directory"}]}]}, {id:4, label: "level 1 directory 4", show:false Children: [{id: "4-1", label: "4.1 directory"}, {id: "4-2", label: "4.2 directory", show:false Children: [{id: "4-2-1", label: "4.2.1 contents"}]}}, {id:5 Label: "level 1 directory 5", show:false, children: [{id: "5-1", label: "5.1 directory", show:false, children: [{id: "5-1-1" Label: "5.1.1 directory"}, {id: "5-1-2", label: "5.1.2 directory", show:false Children: [{id: "5-1-2-1", label: "5.1.2.1 contents"},]}]} {id: "5-2", label: "5.2 contents", show:false}]},]}, methods: {clickHandler () {console.log (23333) }, select (data) {console.log (data);}}, mounted () {console.log (this.trees);}})
Take a look at the results.
Of course, the global component I use, if the environment built with vue-cli is the same, it is OK to introduce the component, but it must be noted that the name attribute must be used in the component, and the name of name must be consistent with the component name (component tag name).
Post a template used in the project, which is equivalent to taking notes.
{{item.label}} import {mapGetters, mapActions} from 'vuex' Export default {name: "DatabaseTree", props: ["folder", "select", "currentId"], data () {return {addParams: {label: ", children: []}, noteData: {children: []}}, computed: {. MapGetters ([" catalog "])} Methods: {}} .dataBaseTree {padding-left:12% Line-height:40px; ul {padding-left:12%; line-height:40px; li {span {display:inline-block; padding-left:23%; height:100%; width:120%; color:#ababab; font-size:14px; position: relative; cursor: pointer &: hover {background: # EDF0F5;} .folderIcon {color:#BCBCBC; position: absolute; top:-1px; left:22px;}} li {position: relative; span {display:inline-block; padding-left:40px Font-size:14px; height:100%; width:120%; cursor: pointer; position: relative; right:25px; top:-2px; color:#ababab; &: hover {background: # EDF0F5;} .titleIcon {color:#C3C3C3; font-size:16px; position: absolute Top:12px; left:16px;} .folderIcon {color:#BCBCBC; position: absolute; top:-1px; left:22px;}} .active {background: # EDF0F5;}
That's it for the vue version.
The following post a native js version, interested friends can continue to read on
Document var tree= [{id:1, label: "level 1 directory 1", children: [{id: "1-1", label: "1.1 directory"}, {id: "1-2" Label: "1.2directory"}, {id: "1-3", label: "1.3directory"},]}, {id:2, label: "level 1 directory 2",}, {id:3 Label: "level 1 directory 3", children: [{id: "3-1", label: "3.1 directory"}, {id: "3-2", label: "3.2 directory" Children: [{id: "3-2-1", label: "3.2.1 directory"}, {id: "3-2-2", label: "3.2.2 directory"} {id: "3-2-3", label: "3.2.3 directory"}]}}, {id:4, label: "level 1 directory 4" Children: [{id: "4-1", label: "4.1 directory"}, {id: "4-2", label: "4.2 directory", children: [{id: "4-2-1" Label: "4.2.1 directory"}]}}, {id:5, label: "level 1 directory 5", children: [{id: "5-1", label: "5.1 directory" Children: [{id: "5-1-1", label: "5.1.1 directory"}, {id: "5-1-2", label: "5.1.2 directory" Children: [{id: "5-1-2-1", label: "5.1.2.1 contents"},]}]} {id: "5-2", label: "5.2 contents"}]},] Var render = function (tree) {if (! tree) return null var ul = document.createElement ('ul'); for (var I = 0; I < tree.length;i++) {var li = document.createElement (' li') / / create span tag var span = document.createElement ('span'); span.innerText = tree [I] .label; li.appendChild (span) If (tree.children) {var sub = render (tree.children); li.appendChild (sub);} ul.appendChild (li);} return ul}; document.body [XSS _ clean] ='; document.body.appendChild (render (tree)) Thank you for your reading, the above is the content of "how to use recursive components to achieve a tree control in vue". After the study of this article, I believe you have a deeper understanding of how to use recursive components to achieve a tree control in vue, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
