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

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

Wombat-

6171人浏览 · 2019-08-28 10:36:16

Wombat- · 2019-08-28 10:36:16 发布

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

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

新增按钮：按钮我自己写的组件，因为element的输入框和美工给的样式不一致，所以重新封装了一下:
在这里插入图片描述
编辑按钮：

公用模态框组件：

事件函数：这里的Edit我在data里以对象形式定义的。

公共组件部分代码：
公共页面方法：首先判断传过来的modifyEdit是否是当前行的数据，如果是就将各项的值赋给audition，反之就默认加载audition原始值。
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^