Vue+Element!一千字带你编写合理的编辑,查看,新建!

我是歌谣 放弃很容易 但是坚持一定很酷

1前言

在我们的日常的开发过程中
不免会遇到需要操作同一页面得情况

2需求

比如一个页面 我们会有一个对应的一个表单

A:姓名:XXXX
B:年龄:XXXX
C:账号:XXXX
D:密码:XXXX
E:邮箱:XXXX
XXXXX
el-formel-input nameel-input ageel-input accountel-input passwordel-input email

要是你需要做一个验证直接

	el-form rules

基本的样式和代码展示就如上图所示
一般的表单我们需要有一个el-table的表格行

el-tableel-table-column nameel-table-column ageel-table-column accountel-table-column passwordel-table-column email

获取当前行的属性我们可以

templatescope-slotscope-row

3解决方案

首先展示编辑页面和新增页面有两种方案
弹出框和路由都是可以实现的提示

3.1.1dialog

el-dialog

3.1.2route

route

我们目前已第一种来说

el-dialog

3.1.3笨拙解决方案

route新建页面
route编辑页面
route查看页面

4思考

这种方案是具有可行性 但是代码未免有点过分冗余
于是转换为新方案 还是需要进行的是页面的一个判断

route页面新建|编辑|查看

这个时候思考的是页面跳转的判断条件
首先查看和编辑和新建的一个判断条件是否会存在id的属性

4.1.1query传参

 routequery{:id}

对于当前的页面有id的我们可以进行一个编辑
查看的操作 没有id就是我们的新增操作

4.1.2 第三方插件传参

可以采用store2 等进行页面传参 目的是对当前的页面带到下一个
页面可以做一个判断

4.1.3其余逻辑

对于其余逻辑的完善我们就需要分别查看和编辑的一个逻辑
两者都是可以有id的输入 我们可以在页面进入的时候带入一个参数
进入下一个页面

skip(param1,param2)

当parma2为编辑则进行编辑逻辑 查看则显示查看逻辑

其余逻辑

页面的其余部分都是通过判断获得 代码简洁生动

5总结

我是歌谣 以上代码均为简写 原创不易 欢迎一起讨论学习前端知识,前端学习ing…

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/409294.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

script标签属性用type还是language?

一个网站的建设&#xff0c;经常会用到JavaScript,其中必须用到script标签来外调js文件&#xff0c;但是script标签属性用type还是language&#xff1f; type 和 language 属性都可用来指定 <script> 标签中的脚本的类型。所以可以使用下面两种属性&#xff1a; language…

惊呼!JavaScript基本数据类型和引用数据类型详解

前言 我是歌谣 知其然知其所以然 人人都有一个大厂梦 希望通过自己的一个总结分享可以给予大家带来帮助和提升。 本期知识点 JavaScript中基本数据类型和引用数据类型 目标 理解基本数据类型和引用数据类型的定义理解堆和栈数据类型分为哪些 定义 ECMAScript包括两个不同类型…

计算机的特点 分类及其应用,2016计算机知识:计算机的特点、分类及其应用(1)...

【导读】为了帮助广大考生更好的备考&#xff0c;中公事业单位考试网提供2016年计算机知识《计算机的特点、分类及其应用(1)》&#xff0c;为考生定制计算机基础知识复习计划&#xff0c;相信广大考生可以顺利计算机知识考试。一、第1代&#xff1a;电子管数字计算机(1946-1958…

面向船舶结构健康监测的数据采集与处理系统(一)系统架构

世界贸易快速发展起始于航海时代&#xff0c;而船舶作为重要的水上交通工具&#xff0c;有 其装载量大&#xff0c;运费低廉等优势。但船舶在运营过程中出现的某些结构处应力值 过大问题往往会给运营部门造成重大的损失&#xff0c;甚至造成大量的人员伤亡和严重 的环境污染…

Gunicorn 0.17 发布,Python HTTP 服务器

HTTP 服务器 Gunicorn 0.17 发布了&#xff0c;该版本改进内容包括&#xff1a; 支持绑定多个网卡地址支持 SSL支持 syslog增加 nworkers_changed 钩子为 post_request 钩子增加 response 参数使用 argparse 解析命令行参数&#xff08;废弃 optparse&#xff09;fix PWD detec…

优地机器人厂家_2019中国人工智能机器人企业TOP30榜单发布 优地科技跻身前十...

原标题&#xff1a;2019中国人工智能机器人企业TOP30榜单发布 优地科技跻身前十据2019《互联网周刊》&eNet研究院选择排行&#xff0c;“2019中国的人工智能机器人企业TOP30”榜单新鲜出炉&#xff0c;名单如下&#xff1a;从榜单可以看到&#xff0c;阿里巴巴、新松、百度…

计算机网络中的高层应用,第四章计算机网络中的高层应用-.ppt

第四章计算机网络中的高层应用-第四章 计算机网络中的高层应用 掌握C/S模式和B/S模式 熟练掌握常用的网络高层服务&#xff1a; WWW、Telnet 、FTP、EMAIL、DNS等 了解其它网络应用&#xff1a;BBS、IP电话、VOD等 引 言 网络的应用层是计算机开放互连环境与本地的操作系统环境…

硬核!原型和原型链详解

前言 我是歌谣 知其然知其所以然 人人都有一个大厂梦 希望通过自己的一个总结分享可以给予大家带来帮助和提升。 本期知识点 原型和原型链 目标 1理解原型和原型链 2理解构造函数 3理解构造函数 原型和原型链之间的关系 引用类型都是对象 基本数据类型和引用数据类型可以看下…

TCP/IP协议读书笔记(1)

TCP一共有四个主要的定时器&#xff0c;前面已经讲到了一个&#xff0d;&#xff0d;超时定时器&#xff0d;&#xff0d;是TCP里面最复杂的一个&#xff0c;另外的三个是&#xff1a; 坚持定时器保活定时器2MSL定时器其中坚持定时器用于防止通告窗口为0以后双方互相等待死锁的…

python 3 5_零基础学Python3(5):基础运算符(上)

人生苦短&#xff0c;我选Python前文传送门前言前面我们讲了变量的基础操作&#xff0c;本文我们接着讲运算符。运算符根据用途可以分为以下这么几类&#xff1a;算术运算符比较运算符赋值运算符逻辑运算符成员运算符身份运算符本篇我们先介绍前两个&#xff0c;算术运算符和比…

JS中的异步任务有哪些

JS中的异步任务有哪些 异步任务指的是&#xff0c;不进入主线程、而进入"任务队列"&#xff08;task queue&#xff09;的任务&#xff0c;只有等主线程任务执行完毕&#xff0c;"任务队列"开始通知主线程&#xff0c;请求执行任务&#xff0c;该任务才会…

spring下jndi配置

参考&#xff1a; 1&#xff09;Spring配置JNDI(Tomcat7) http://liuzidong.iteye.com/blog/962841 2&#xff09;在tomcat 6.0下配置JNDI及在Spring中的使用 http://hi.baidu.com/xulong7814/item/1b150826c4cd81cadcf69abf 转载于:https://www.cnblogs.com/lpshou/archive/20…

机场精细化管理_宇视科技智慧机坪解决方案助力机场实现精细化管理

飞行需求不断膨胀&#xff0c;有限的空域资源愈发拥挤&#xff0c;带来航班延误、资源浪费及航行安全等问题&#xff0c;降低机场运行效率。机坪作为空中交通起讫点&#xff0c;也是拥堵、延误多发区&#xff0c;对机场整体运行效率至关重要。如何在兼顾成本下&#xff0c;让机…

安徽省计算机水平考试试卷,第1次安徽省计算机水平考试试卷.doc

PAGEPAGE 62006第一次安徽省计算机水平考试试卷(ACCESS)单项选择题(每题1分&#xff0c;共40分)能将高级语言源程序转换为目标程序的是A)编译程序 B)解释程序 C)测试程序 D)编辑程序6位无符号二进制数能表示的最大十进制整数是A)64 B)63 C)32 D)31在Windows中&#xff0c;下列关…

总结:js延迟加载的方式有哪些?

该面试题主要考察的是程序的性能方面。性能优化的核心思想就是快&#xff0c;常见的优化手段有预先准备数据&#xff08;如缓存&#xff09;&#xff0c;按需获取&#xff0c;分段、异步获取等 由于JavaScript的阻塞特性&#xff08;单线程运行&#xff09;&#xff0c;在每一个…

Android中简单的日期格式化

自己遇到的一点格式化日期的方法&#xff0c;记下来 // 今天的信息 显示时间 dateStr DateFormat.getTimeFormat(context).format(date); // 日期 dateStr DateFormat.getDateFormat(context).format(date)" "DateFormat.getTimeF…

集群没有leader_面试官问:说说你对ZooKeeper集群与Leader选举的理解?

ZooKeeper是一个开源分布式协调服务、分布式数据一致性解决方案。可基于ZooKeeper实现命名服务、集群管理、Master选举、分布式锁等功能。高可用为了保证ZooKeeper的可用性&#xff0c;在生产环境中我们使用ZooKeeper集群模式对外提供服务&#xff0c;并且集群规模至少由3个Zoo…

t3修改计算机后就无法登录了,电脑更换系统后,用友T3登录不上了,一直显示这个,怎么处理,这个怎么解决...

我用的是类似用友的FineReport报表软件&#xff0c;没用过您那款软件&#xff0c;我帮您搜了一下您看看能不能帮到您&#xff1a;运行软件常出现的提示Run-time error429运行一些软件常出现这样的提示&#xff1a;Run-time error429:Activex componert cant create object是说你…

浅谈webpack打包原理

模块化机制 webpack并不强制你使用某种模块化方案&#xff0c;而是通过兼容所有模块化方案让你无痛接入项目。有了webpack&#xff0c;你可以随意选择你喜欢的模块化方案&#xff0c;至于怎么处理模块之间的依赖关系及如何按需打包&#xff0c;webpack会帮你处理好的。 关于模…

ubuntu rsync

rsync&#xff0c;remote synchronize顾名思意就知道它是一款实现远程同步功能的软件&#xff0c;它在同步文件的同时&#xff0c;可以保持原来文件的权限、时间、软硬链接等附加信息。 rsync是用 “rsync 算法”提供了一个客户机和远程文件服务器的文件同步的快速方法&#xf…