我是歌谣 放弃很容易 但是坚持一定很酷
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…