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

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

废话不多说，看代码：

tree.vue

 <template>
   <div>
     <div class="all-div" v-if="model.name">
       <div class="itemRow" :style="{ marginLeft:model.level*20+'px' }">
         <span v-show="model.children.length" @click="expandOrCollapse">
           <img v-if="model.isOpen" src="../../static/img/down.png">
           <img v-else src="../../static/img/right.png">
         </span>
         <div class="hover-div" @mouseover="flag=true" @mouseout="flag=false">
           <span @click="jump(model.url)">{{model.name}}</span>
           <span v-show="flag==true" @click="add"><img src="../../static/img/add.png"></span>
           <span v-show="flag==true" @click="remove(model)"><img src="../../static/img/delete.png"></span>
           <span v-show="flag==true" @click="edit"><img src="../../static/img/edit.png"></span>
           <!--<span class="asce" v-show="model.children.length" @click="orderAsce">↑</span>
         <span class="desc" v-show="model.children.length" @click="orderDesc">↓</span>-->
         </div>

       </div>
     </div>
     <navigation v-if="model.isOpen" v-for="row in model.children" :key="row.name" :model="row" :length="model.children.length"></navigation>
   </div>
 </template>

 <script>
   export default {
     name: 'navigation',
     // 使用`编辑树`组件需要传递的数据
     props: {
       // 编辑树对象
       model: {
         type: Object
       },

       length: {
         type: Number
       }
     },

     data () {
       return {
         flag:false

       }
     },

     methods: {
       // 添加节点
       add(){
         let val = prompt("请输入要添加的节点的名称：");
         if (val) {
           this.model.children.push({
             name: val,
             level: this.model.level + 1,
             isOpen: true,
             children: []
           });
         }

       },

       // 移除节点
       remove(model){
         var self = this;
         alert('确认删除吗?');
         if (self.$parent.model) {
           self.$parent.model.children.forEach((item, index) => {
             if (item.name == model.name) {
             self.$parent.model.children.splice(index, 1);
           }
         })
         }
       },

       // 编辑节点名称
       edit(){
         var self = this;
         let rename = prompt('请输入修改后的节点名称：');
         // 使用正则进行重命名的差错校验
         if (!rename.length) {
           alert('请输入正确的节点名称');
           return;
         }
         self.model.name = rename;
       },

       /**
        * 展开/收起功能
        */
       expandOrCollapse(){
         this.model.isOpen = !this.model.isOpen;
       },
       jump(url){
         var self = this;
         self.$router.push({path:url})
       }

       /*// 升序排列
        orderAsce(){
        function compare(property) {
        return function (a, b) {
        var value1 = a[property];
        var value2 = b[property];
        return value1 - value2;
        }
        }
        this.model.children.sort(compare('name'));
        },

        // 降序排列
        orderDesc(){
        this.orderAsce();
        this.model.children.reverse();
        }*/
     },
   }
 </script>

 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
   .all-div{
     margin-left: 6%;

   }
   .itemRow {
     text-align: left;
     padding-top: 2%;
     padding-bottom: 2%;
   }
   .itemRow span,.itemRow img{
     cursor: pointer;
   }
   .itemRow span{
     font-size: 1.1vw;
   }
   .hover-div{
     display:inline-block;
   }

 </style>

父组件代码如下：

leftNavigation.vue

 <template>
   <div id="all">
     <tree :model="root" :length="length"></tree>
   </div>
 </template>
 <style scoped>
   #all{
     width:100%;
     height: 100%;
   }

 </style>
 <script>
   import tree from './tree.vue'
   export default{
     data(){
       return{
         root:{
           name:"根节点",
           level:0,
           isOpen:true,
           children:[
             {
               name:"节点1",
               level:1,
               url:"/homePage/middle/navLeftFirst",
               isOpen:false,
               children:[
                 {
                   name:"节点1-1",
                   level:2,
                   isOpen:true,
                   children:[]
                 },
                 {
                   name:"节点1-2",
                   level:2,
                   isOpen:true,
                   children:[]
                 }
               ]
             },
             {
               name:"节点2",
               level:1,
               url:"/homePage/middle/navLeftSecond",
               isOpen:false,
               children:[
                 {
                   name:"节点2-1",
                   level:2,
                   isOpen:true,
                   children:[]
                 },
                 {
                   name:"节点2-2",
                   level:2,
                   isOpen:true,
                   children:[]
                 }
               ]

             }
           ]
         },
         length:2
       }
     },
     components:{
       tree
     }
   }
 </script>