vue实现节点增删改功能


Posted in Javascript onSeptember 26, 2019

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 操作DOM的基本用法分享
Apr 05 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
Angular+Node生成随机数的方法
Jun 16 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
Jun 29 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 Javascript
浅谈layui里的上传控件问题
Sep 26 #Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 #Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 #Javascript
layui 上传图片 返回图片地址的方法
Sep 26 #Javascript
vue仿ios列表左划删除
Sep 26 #Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 #Javascript
vue实现百度搜索功能
Dec 28 #Javascript
You might like
星际原理概述
2020/03/04 星际争霸
水质对咖图啡风味的影响具体有哪些
2021/03/03 冲泡冲煮
PHP中的正规表达式(一)
2006/10/09 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
jQuery Clone Bug解决代码
2010/12/22 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
js 作用域和变量详解
2017/02/16 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
[03:01]完美世界DOTA2联赛PWL S2 集锦第二期
2020/12/03 DOTA
Python判断某个用户对某个文件的权限
2016/10/13 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
python with语句的原理与用法详解
2020/03/30 Python
django正续或者倒序查库实例
2020/05/19 Python
PyQt5实现画布小程序
2020/05/30 Python
python dict乱码如何解决
2020/06/07 Python
Python脚本调试工具安装过程
2021/01/11 Python
video.js支持m3u8格式直播的实现示例
2020/05/20 HTML / CSS
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
路政管理专业个人自荐信范文
2013/11/30 职场文书
总裁岗位职责
2013/12/04 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
新郎婚礼致辞
2015/07/27 职场文书
食堂管理制度范本
2015/08/04 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
一起来学习Python的元组和列表
2022/03/13 Python
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python