具有增删改查功能的vue-tree树组件

Posted 2020-09-29 于文静0727

最近写了一个具有增删改查功能的多级树组件，感觉很实用，啦啦啦啦，

废话不多说，看代码：

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>