具有增、删、改、查功能的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>