Vue-based tree selection component sample code

This article describes the Vue-based tree selection component. Share it to everyone, the specific:
system requirements: Vue 2


perfect Level linkage effect
  • Supports unlimited number of hierarchical
screenshot display

The code is as follows: 基于 Vue 的树形选择组件的示例代码


    Vue Tree Select Example            
  • {"Customer Management": {"My Customer": {"New Assign": {}, "Follow Jin": {}, "Sign Customer": {}, "Long-term Customer": {}} "Long-term customer rights": {"Set as long-term customers": {}, "Restore long-term customers": {}}}, "purchase list": {"Add anomalous": {}, "Add Purchase": {}, "Purchase Return List": {}, "Supplier Management": {}, "SupplyBusiness Contact ": {}," Brand List ": {" P & G ": {}," LeTV ": {" LeTV ": {}," LeTV mobile phone ": {" LeTV mobile phone 1 ": {}," LeTV mobile phone 2 ": {}," LeTV mobile phone 3 ": {}," LeTV mobile phone 4 ": {}," LeTV mobile phone 5 ": {" Experience super-level ": {" Continue Experience Super Level ": { "Index to the ultra-deep level": {}, "still experience the ultra-deep level 2": {}}}}}, "LeTV TV": {}}, "Coca Cola": {}, "Sea": {} }}}
// Initial data var treedatajson = document.getlementByid ("Treedatajson"). Value; var treedata = json.parse (TreeDatajson); Vue.component ('One-select', {name: 'One-Select', Template: '# One-select', Props: ['Tree', 'IsRoot'], Created: function () {var realtree = Object.assign ({}, this.tree); delete realtree .Selected; if (object.keys (realtree) .length === 0) {// Judgment the lowest level, refresh the parent THISRESHALLParentNodes (this. $ parent);}}, methods: {NodeClick: function (node, index) {if (node.selected === 'full. || node.selected ===' hald ') {vue.set (node,' selected ', null);} else {Vue .SET (Node, 'SELECTED', 'FULL');} this.refreshallParentNodes (Self. $ Parent); this.refreshallParentnodes (this); this.refreshallsonnodes (this. $ children [index], node.selected);} , refreshAllSonNodes:. function (node, status) {if (. node instanceof Vue && node $ children.length) {for (. index in node $ children) {Vue.set (node ​​$ children [index] .tree, 'selected ', status); // Recursively calculate the child. THISREFRESHALLSONNODES (Node. $ Children [index], status);}}}, refreshallparentnodes: function (node) {if (node ​​instanceof vue) {var status = null; var status = null; var status = null; var status = null; nullcount = 0; var halfcount = 0; var fullcount = 0For (INDEX IN Node. $ children) {if (TypeOf Node. $ children [index] .tree.selected === 'undefined') {nullcount ++;} else if (node. $ children [index] .tree.selected === NULL) {nullcount ++;} else if (node. $ children [index] .tree.selected === 'hald') {HALFCOUNT ++;} else if (node. $ children [index] .tree.selected == = 'FULL') {FullCount ++;}}}} f (fullcount === Node. $ children.length) {status = 'full';} else if (nullcount === ode. $ children.length) {status = null; } else {status = 'hald';} vue.set (node.tree, 'selected', status); // recursively calculates the parent THISREFRESHALLParentnodes (Node. $ Parent);}}, log: function (O) {Console.log (o);}}}); VM = new Vue ({EL: '#tree', Data: {Tree: Treedata}, methods: {// Return the final data getResult: function () {return Object.assign ({}, this.tree);}}}); #tree {Width: 500px; Margin: 0 AUTO; margin-top: 50px;} li {list-style: none; line-height: 25px;}. inline-block {display: inline-block;}. Tree-select {width: 13px; height: 13px; line -Height: 16px; Margin: 3px; Display: inline-block; vertical-align: middle; border: 0 none; cursor: Pointer; OUTLINE: NONE; Background-Color: None; Background-Repeat: no-repeat; background Attachment: Scroll; Background-Image: URL ('selects.png');}. Tree-select-null {background-position: 0 0;}. Tree-select-full {background-position: -14px 0;}. Tree-select-hald {background-position: -14px -28px;}
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment