vue+element ui 实现新建编辑共用一个模态框

vue+element ui 实现新建编辑共用一个模态框


在我们开发过程中常常会遇到新增和编辑模态框布局类似,只是一个带参一个不带参的区别,那么我们写两个模态框也可以实现,为什么不这么做呢?
答案是我能用一百行可以实现的功能,为什么要用两百行实现呢?有的人说多写一个模态框无所谓,那么有五十个页面呢?所以为了我们方便开发,减少代码量,新增和编辑公用一个模态框是很有必要的,下面就展示一下我是如何实现的

新增按钮:按钮我自己写的组件,因为element的输入框和美工给的样式不一致,所以重新封装了一下:
在这里插入图片描述
编辑按钮:
vue+element ui 实现新建编辑共用一个模态框_第1张图片
公用模态框组件:
在这里插入图片描述
事件函数:这里的Edit我在data里以对象形式定义的。
vue+element ui 实现新建编辑共用一个模态框_第2张图片
公共组件部分代码:vue+element ui 实现新建编辑共用一个模态框_第3张图片
公共页面方法:首先判断传过来的modifyEdit是否是当前行的数据,如果是就将各项的值赋给audition,反之就默认加载audition原始值。
vue+element ui 实现新建编辑共用一个模态框_第4张图片

你可能感兴趣的:(vue+element ui 实现新建编辑共用一个模态框)