How to use vue Tree Control tree

This article is about how to use the vue tree control tree. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The details are as follows

Export default {name: 'HelloWorld', data () {return {msg:' Welcome to Your Vue.js App |', data: [{id: 1, label: 'level 2, children: [{id: 3, label:' level 2-1', children: [{id: 4 Label: 'level 3-1-1'}, {id: 5, label: 'stage 3-1-2, disabled: true}]}, {id: 2, label:' level 2-2, disabled: true Children: [{id: 6, label: 'level 3-2-1'}, {id: 7, label: 'level 3-2-2', disabled: true, children: [{id: 8 Label: 'level 8-1', children: [{id: 9, label: 'level 3-1-1'}, {id: 10, label: 'level 3-1-2' Disabled: true}], defaultProps: {/ / used to modify the attribute value of the specified tag of the node children: 'children', label:' label'}, methods: {allowDrop (draggingNode, dropNode) Type) {if (draggingNode.parrent.id=== dropNode.parrent.id) {return type! = 'next' } else {return true;} / * add connections to tree nodes * / .tree / deep/ .el-tree-node {position: relative; padding-left: 16px;} .tree / deep/ .el-tree-node__children {padding-left: 12px;} .tree / deep/ .el-tree-node: last-child:before {height: 50px }. Tree / deep/ > .el-tree-node:before {border: none! important;}. Tree / deep/. El-tree > .el-tree-node:before {border-left: none;}. Tree-container / deep/. El-tree > .el-tree-node:after {border-top: none;} .tree / deep/ .el-tree-node:before {content: "; left:-4px; position: absolute; right: auto; border-width: 1px } .tree / deep/ .el-tree-node:after {content: "; left:-4px; position: absolute; right: auto; border-width: 1px;} .tree / deep/ .el-tree-node__expand-icon.is-leaf {display: none;} .tree / deep/ .el-tree-node:before {border-left: 1px solid # b8b9bb; bottom: 0px; height: 100%; top:-26px; width: 1px } .tree / deep/ .el-tree-node:after {border-top: 1px solid # b8b9bb; height: 20px; top: 24px; width: 20px;} .tree / deep/ .el-tree-node__expand-icon {display: none;}. Tree / deep/ .el-tree-node__content {padding-left: 0! important;}. Tree / deep/. El-tree-node__content {height: 18pxtranspaddingtop: 16px;} Thank you for reading! This is the end of the article on "how to use the vue tree control tree". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!