表单提交 · 弹窗模式

相关说明

表单提交页面或者组件多用于数据添加或修改，本节介绍弹窗形式的表单提交功能组件开发。

实现步骤

1. 触发按钮布局

在列表页码或者某个具体功页面添加新增或编辑按钮，并绑定打开窗口事件。

2. 弹窗组件编写

2.1 创建弹窗组件文件，如 : /views/Test/Submit.vue

2.2 编写弹窗组件相关代码

2.3 commonSubmit.js 介绍

commonSubmit.js 是 graceVueAdmin 为您提供的一个基础的、弹窗形式的表单提交组件的基础 api （ 简单地讲 : 它内置了很多属性和方法，开发时候基于它可以提高您的效率 ）。

封装的数据 :

封装的方法 :

2.4 完整代码

以上代码演示了添加数据，如果需要开发编辑数据功能，您可以添加一个编辑按钮触发弹窗并传递重要的参数 ：

然后在 submit 页面利用 api 获取默认值并赋值给表单数据作为默认值即可；

在执行提交时根据操作类型不同 ( add 或者 edit ) 设置不同的api接口地址完成不同的功能。