溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例為大家分享了vue實現節點增刪改功能的具體代碼，供大家參考，具體內容如下
效果：
增刪改功能 tree.vue組件代碼：
<template>
<div>
<div class="all-div" v-if="model.name">
<div class="itemRow" :>
<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" >+</span>
<span v-show="flag==true" @click="remove(model)"><img src="../../assets/img/del.png"></span>
<span v-show="flag==true" @click="edit" >修改</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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
