最近写了一个具有增删改查功能的多级树组件，感觉很实用，啦啦啦啦，
废话不多说，看代码：
tree.vue
1 <template> 2 <div> 3 <div class="all-div" v-if="model.name"> 4 <div class="itemRow" :style="{ marginLeft:model.level*20+'px' }"> 5 <span v-show="model.children.length" @click="expandOrCollapse"> 6 <img v-if="model.isOpen" src="../../static/img/down.png"> 7 <img v-else src="../../static/img/right.png"> 8 </span> 9 <div class="hover-div" @mouseover="flag=true" @mouseout="flag=false"> 10 <span @click="jump(model.url)">{{model.name}}</span> 11 <span v-show="flag==true" @click="add"><img src="../../static/img/add.png"></span> 12 <span v-show="flag==true" @click="remove(model)"><img src="../../static/img/delete.png"></span> 13 <span v-show="flag==true" @click="edit"><img src="../../static/img/edit.png"></span> 14 <!--<span class="asce" v-show="model.children.length" @click="orderAsce">↑</span> 15 <span class="desc" v-show="model.children.length" @click="orderDesc">↓</span>--> 16 </div> 17 18 </div> 19 </div> 20 <navigation v-if="model.isOpen" v-for="row in model.children" :key="row.name" :model="row" :length="model.children.length"></navigation> 21 </div> 22 </template> 23 24 <script> 25 export default { 26 name: 'navigation', 27 // 使用`编辑树`组件需要传递的数据 28 props: { 29 // 编辑树对象 30 model: { 31 type: Object 32 }, 33 34 length: { 35 type: Number 36 } 37 }, 38 39 data () { 40 return { 41 flag:false 42 43 } 44 }, 45 46 methods: { 47 // 添加节点 48 add(){ 49 let val = prompt("请输入要添加的节点的名称："); 50 if (val) { 51 this.model.children.push({ 52 name: val, 53 level: this.model.level + 1, 54 isOpen: true, 55 children: [] 56 }); 57 } 58 59 }, 60 61 // 移除节点 62 remove(model){ 63 var self = this; 64 alert('确认删除吗?'); 65 if (self.$parent.model) { 66 self.$parent.model.children.forEach((item, index) => { 67 if (item.name == model.name) { 68 self.$parent.model.children.splice(index, 1); 69 } 70 }) 71 } 72 }, 73 74 // 编辑节点名称 75 edit(){ 76 var self = this; 77 let rename = prompt('请输入修改后的节点名称：'); 78 // 使用正则进行重命名的差错校验 79 if (!rename.length) { 80 alert('请输入正确的节点名称'); 81 return; 82 } 83 self.model.name = rename; 84 }, 85 86 /** 87 * 展开/收起功能 88 */ 89 expandOrCollapse(){ 90 this.model.isOpen = !this.model.isOpen; 91 }, 92 jump(url){ 93 var self = this; 94 self.$router.push({path:url}) 95 } 96 97 /*// 升序排列 98 orderAsce(){ 99 function compare(property) { 100 return function (a, b) { 101 var value1 = a[property]; 102 var value2 = b[property]; 103 return value1 - value2; 104 } 105 } 106 this.model.children.sort(compare('name')); 107 }, 108 109 // 降序排列 110 orderDesc(){ 111 this.orderAsce(); 112 this.model.children.reverse(); 113 }*/ 114 }, 115 } 116 </script> 117 118 <!-- Add "scoped" attribute to limit CSS to this component only --> 119 <style scoped> 120 .all-div{ 121 margin-left: 6%; 122 123 } 124 .itemRow { 125 text-align: left; 126 padding-top: 2%; 127 padding-bottom: 2%; 128 } 129 .itemRow span,.itemRow img{ 130 cursor: pointer; 131 } 132 .itemRow span{ 133 font-size: 1.1vw; 134 } 135 .hover-div{ 136 display:inline-block; 137 } 138 139 140 </style>
父组件代码如下：
leftNavigation.vue
1 <template> 2 <div id="all"> 3 <tree :model="root" :length="length"></tree> 4 </div> 5 </template> 6 <style scoped> 7 #all{ 8 width:100%; 9 height: 100%; 10 } 11 12 </style> 13 <script> 14 import tree from './tree.vue' 15 export default{ 16 data(){ 17 return{ 18 root:{ 19 name:"根节点", 20 level:0, 21 isOpen:true, 22 children:[ 23 { 24 name:"节点1", 25 level:1, 26 url:"/homePage/middle/navLeftFirst", 27 isOpen:false, 28 children:[ 29 { 30 name:"节点1-1", 31 level:2, 32 isOpen:true, 33 children:[] 34 }, 35 { 36 name:"节点1-2", 37 level:2, 38 isOpen:true, 39 children:[] 40 } 41 ] 42 }, 43 { 44 name:"节点2", 45 level:1, 46 url:"/homePage/middle/navLeftSecond", 47 isOpen:false, 48 children:[ 49 { 50 name:"节点2-1", 51 level:2, 52 isOpen:true, 53 children:[] 54 }, 55 { 56 name:"节点2-2", 57 level:2, 58 isOpen:true, 59 children:[] 60 } 61 ] 62 63 } 64 ] 65 }, 66 length:2 67 } 68 }, 69 components:{ 70 tree 71 } 72 } 73 </script>