vue实现节点增删改功能

本文实例为大家分享了vue实现节点增删改功能的具体代码，供大家参考，具体内容如下

效果：

增删改功能 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=\"../../assets/img/login_logo.png\">
     <img v-else src=\"../../assets/img/login_logo2.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\" style=\"fontsize:40px;color:red;\">+</span>
     <span v-show=\"flag==true\" @click=\"remove(model)\"><img src=\"../../assets/img/del.png\"></span>
     <span v-show=\"flag==true\" @click=\"edit\" style=\"color:green;\">修改</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>

父组件中引用代码：

<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> 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。