码迷,mamicode.com
首页 > 其他好文 > 详细

vue element 弹窗 新增修改 同一个Dialog展示

时间:2020-12-19 12:32:21      阅读:1      评论:0      收藏:0      [点我收藏+]

标签:png   mit   com   根据   action   数通   img   his   保存   

1.确定新增以及修改事件

技术图片

技术图片

注意:修改的时候需要把当前这一行的数据传递过去,做回显展示,并需要传递一个action标记,来判断是修改还是新增,默认不传为新增。

2.新增修改事件激活

技术图片

注意:新增对象我们传递的两个参数,第一个是空对象,第二个为新增标记。并去触发修改事件。从图中我们可以看到新增的时候我们传的是空对象和新增标记,修改时我们传的是当前点击的这一条数据和修改标记。

3.解释修改事件内的this.addOrEditDialog对象

首先这些数据是我们使用弹窗组件,在data定义的

技术图片

其次,弹窗组件的使用

我们定义一个自定义组件,组件的事件在下面解释。

把刚刚我们定义的data的数据绑定给自定义组件。

技术图片

4.弹窗自定义组件

首先我们要定义一个props来接受父组件传递过来的数据(如下图所示)

技术图片

5.传递数据的使用

如下图所示,首先我们初始化数据的时候,把上面props中detail中的当前点击的这一行数据拿到,默认赋值都为空,判断

传递过来的类型action,是新增的话,选用默认值,表单显示为空,如果点击的是修改,将数据赋值过去进行回显。

技术图片

6.自定义组件dialog参数解释

如下图展示,visible是我们props传递过来的,是否展示此弹窗,默认不展示,title是标题,根据action标记来判断

来展示新增或者修改,@close是弹窗关闭事件,通过this.$emit来向父组件传递事件。

技术图片

7.弹窗组件向父组件传递关闭保存事件

如下图所示,关闭和保存事件都需要把事件名称传递出去,注意,保存的时候,需要把表单内的信息也要传递出去。

技术图片

技术图片

8.接收传递的事件和参数

如下图所示,弹窗通过save传递的事件绑定新的事件,接收的参数通过param打印出来,以供我们使用。

通过action来判断点击的是新增的保存,还是修改的保存。

技术图片

技术图片

vue element 弹窗 新增修改 同一个Dialog展示

标签:png   mit   com   根据   action   数通   img   his   保存   

原文地址:https://www.cnblogs.com/loveliang/p/14134913.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!