本文实例为大家分享了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}) } }, }</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>

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