本文实例为大家分享了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> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。