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 相关文章推荐
js获取系统的根路径实现介绍
Sep 08 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
原生js实现autocomplete插件
Apr 14 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
Jan 25 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 jQuery
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 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
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
PHP基于yii框架实现生成ICO图标
2015/11/13 PHP
thinkPHP框架动态配置用法实例分析
2018/06/14 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
jquery之Document元素选择器篇
2008/08/14 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
2010/09/28 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
JS关闭窗口时产生的事件及用法示例
2016/08/20 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
微信小程序 实现动态显示和隐藏某个控件
2017/04/27 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
python 魔法函数实例及解析
2019/09/25 Python
python logging.info在终端没输出的解决
2020/05/12 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python中random模块详解
2021/03/01 Python
CSS3动画效果回调处理详解
2014/12/10 HTML / CSS
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
大学生思想汇报范文
2013/12/31 职场文书
积极分子思想汇报
2014/01/04 职场文书
社区国庆节活动方案
2014/02/05 职场文书
银行开业庆典方案
2014/02/06 职场文书
秋天的雨教学反思
2014/04/27 职场文书
卫生标语大全
2014/06/21 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
行政诉讼答辩状
2015/05/21 职场文书