vue實(shí)現(xiàn)節(jié)點(diǎn)增刪改功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)節(jié)點(diǎn)增刪改功能的具體代碼,供大家參考,具體內(nèi)容如下
效果:
增刪改功能 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', // 使用`編輯樹(shù)`組件需要傳遞的數(shù)據(jù) props: { // 編輯樹(shù)對(duì)象 model: { type: Object }, length: { type: Number } }, data () { return { flag:false } }, methods: { // 添加節(jié)點(diǎn) add(){ let val = prompt("請(qǐng)輸入要添加的節(jié)點(diǎn)的名稱:"); if (val) { this.model.children.push({ name: val, level: this.model.level + 1, isOpen: true, children: [] }); } }, // 移除節(jié)點(diǎn) remove(model){ var self = this; alert('確認(rèn)刪除嗎?'); if (self.$parent.model) { self.$parent.model.children.forEach((item, index) => { if (item.name == model.name) { self.$parent.model.children.splice(index, 1); } }) } }, // 編輯節(jié)點(diǎn)名稱 edit(){ var self = this; let rename = prompt('請(qǐng)輸入修改后的節(jié)點(diǎn)名稱:'); // 使用正則進(jìn)行重命名的差錯(cuò)校驗(yàn) if (!rename.length) { alert('請(qǐng)輸入正確的節(jié)點(diǎn)名稱'); return; } self.model.name = rename; }, /** * 展開(kāi)/收起功能 */ 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:"根節(jié)點(diǎn)", level:0, isOpen:true, children:[ { name:"節(jié)點(diǎn)1", level:1, url:"/homePage/middle/navLeftFirst", isOpen:false, children:[ { name:"節(jié)點(diǎn)1-1", level:2, isOpen:true, children:[] }, { name:"節(jié)點(diǎn)1-2", level:2, isOpen:true, children:[] } ] }, { name:"節(jié)點(diǎn)2", level:1, url:"/homePage/middle/navLeftSecond", isOpen:false, children:[ { name:"節(jié)點(diǎn)2-1", level:2, isOpen:true, children:[] }, { name:"節(jié)點(diǎn)2-2", level:2, isOpen:true, children:[] } ] } ] }, length:2 } }, components:{ tree } } </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue.js+Element實(shí)現(xiàn)表格里的增刪改查
- VUE餓了么樹(shù)形控件添加增刪改功能的示例代碼
- vue2 中如何實(shí)現(xiàn)動(dòng)態(tài)表單增刪改查實(shí)例
- vue實(shí)現(xiàn)表格增刪改查效果的實(shí)例代碼
- Spring boot + mybatis + Vue.js + ElementUI 實(shí)現(xiàn)數(shù)據(jù)的增刪改查實(shí)例代碼(二)
- Spring boot + mybatis + Vue.js + ElementUI 實(shí)現(xiàn)數(shù)據(jù)的增刪改查實(shí)例代碼(一)
- 從vue基礎(chǔ)開(kāi)始創(chuàng)建一個(gè)簡(jiǎn)單的增刪改查的實(shí)例代碼(推薦)
- vue實(shí)現(xiàn)表格數(shù)據(jù)的增刪改查
- vue增刪改查的簡(jiǎn)單操作
- Vue+Mock.js模擬登錄和表格的增刪改查功能
相關(guān)文章
利用vue寫(xiě)todolist單頁(yè)應(yīng)用
有很多關(guān)于vue的todolist小程序,這篇文章主要介紹了 用vue寫(xiě)todolist單頁(yè)應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo(推薦)
這篇文章主要介紹了Vue倒計(jì)時(shí)3秒后返回首頁(yè)Demo,倒計(jì)時(shí)結(jié)束后要清除計(jì)時(shí)器,防止內(nèi)存泄漏,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程
一般我們的前端Vue項(xiàng)目中都會(huì)涉及到跨域的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05Vue Element前端應(yīng)用開(kāi)發(fā)之樹(shù)列表組件
本篇隨筆主要介紹樹(shù)列表組件和下拉列表樹(shù)組件在項(xiàng)目中的使用,以及一個(gè)SplitPanel的組件。2021-05-05教你用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫(huà)效果
最近做的兩個(gè)項(xiàng)目都是關(guān)于vue的,做完整理一下,這篇文章主要給大家介紹了關(guān)于如何用vue實(shí)現(xiàn)一個(gè)有趣的圍繞圓弧動(dòng)畫(huà)效果的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04Vue.js結(jié)合bootstrap前端實(shí)現(xiàn)分頁(yè)和排序效果
這篇文章主要為大家詳細(xì)介紹了Vue.js結(jié)合bootstrap 前端實(shí)現(xiàn)分頁(yè)和排序效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)
這篇文章主要介紹了vue mvvm數(shù)據(jù)響應(yīng)實(shí)現(xiàn)的方法,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-11-11基于vue實(shí)現(xiàn)探探滑動(dòng)組件功能
這篇文章主要介紹了基于vue實(shí)現(xiàn)探探滑動(dòng)組件功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05