vue实现节点增删改功能
时间:2019-09-26
本文章向大家介绍vue实现节点增删改功能,主要包括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 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- NFS服务搭建与配置
- Hadoop2.7.6_07_HA高可用
- Hadoop2.7.6_08_Federation联邦机制 1.1. HDFS-federation图解2.1. 注意事项3.1. 部署3.2. 环境变量3.3. c
- ThinkPHP5 SQL注入漏洞 && PDO真/伪预处理分析
- Hive-1.2.1_01_安装部署
- Supervisord远程命令执行漏洞(CVE-2017-11610)
- Hive-1.2.1_02_简单操作与访问方式
- PHP-CGI远程代码执行漏洞(CVE-2012-1823)分析
- Hive-1.2.1_03_DDL操作 1.1. Create Database1.2. Drop Database1.3. Use Database2.1. Cre
- Hive-1.2.1_04_DML操作 5.1. Join8.1. 使用案例8.2. Transform实现
- Hive-1.2.1_05_案例操作
- Mysql字符编码利用技巧
- Hive-1.2.1_06_累计报表查询
- Flume-1.8.0_部署与常用案例
- GlassFish 目录穿越漏洞测试过程