问题来源
一个项目里必然会有表单提交需求 表单里必定会有必填字段 那么点击"提交"按钮时 如果必填项未填 Modal弹出框是不能关闭的 但现在相反 弹窗关闭了 解决方案如下
<Modal v-model="employeeEntryInformationModel" title="添加入职信息'" @on-cancel="cancel('employeeEntryInformationForm')" @on-ok="submit('employeeEntryInformationForm')" :loading="loading" :mask-closable="false" width="900px" okText="提交" :styles="{top:'65px'}">
<Form ref="employeeEntryInformationForm" :model="employeeEntryInformationForm" :label-width="120" :rules="ruleValidate">
<!-- 员工 -->
<FormItem label="员工" prop="employeeId">
<Select v-model="employeeEntryInformationForm.employeeId" filterable :transfer="true" placeholder="">
<Option :value="item.id" v-for="item in employeeList" :key="item.id">{{item.name}}</Option>
</Select>
</FormItem>
</Form>
</Modal>
初始化参数
注意⚠️：loading初始化时为 true
data() {
return {
employeeEntryInformationModel: false,
loading: true,
employeeList:[],
employeeEntryInformationForm: {
employeeId:null
ruleValidate: {
employeeId: [
{required: true, message: '请选择员工', trigger: 'change', type: 'number'}
//全文关键语句
setTimeout(() => {
this.loading = true
}, 0)
submit: function (name) {
this.$refs[name].validate(valid => {
if (valid) {
let employeeEntryManagementDTO = {
"employeeId": this.employeeEntryInformationForm.employeeId
this.$api.employeeEntryManagement.update(employeeEntryManagementDTO)
.then(res => {
setTimeout(() => {
this.$refs[name].resetFields();
this.loading = false;
this.$nextTick(() => {
this.loading = true;
this.$Message.success('录入成功');
this.employeeEntryInformationModel = false;
}, 1000);
} else {
this.loading = false;
//全文关键语句
setTimeout(() => {
this.loading = true
}, 0)
this.$Message.error('录入失败');
问题来源一个项目里必然会有表单提交需求 表单里必定会有必填字段 那么点击"提交"按钮时 如果必填项未填 Modal弹出框是不能关闭的 但现在相反 弹窗关闭了 解决方案如下表单<Modal v-model="employeeEntryInformationModel" title="添加入职信息'" @on-cancel="cancel('employeeEntryInformationForm')" @on-ok="submit('employeeEntryInformationForm')"
vue项目中如果出现了接口嵌套的状况，外层的接口完成后loading效果就消失了，导致页面在请求到内部接口时没有任何效果
看了源码发现这个Spin组件销毁组件时延迟了500ms，所以嵌套的接口在内部接口开始调用Spin后马上就要执行销毁操作了。另一个重要的原因是请求接口封装的api的url是固定的导致queue队列中只有一条数据。
问题场景：
iview踩坑之modal模态框使用@on-ok事件后，即使校验失败也
会关闭模态框。
解决方案：使用中的自定义插槽slot来自定义写底部按钮，然后通过v-model控制模态框的显示与隐藏。
<Modal v-model="modifyImgModel">
<div slot="footer" align="center">
<Button class="btn" size="default" type="default" @click="cancel
vue+element-ui如何防止弹窗表单重复提交 button按钮设为不可用仍可调用点击事件表单重复提交原因解决方案错误方案正确方案总结
表单重复提交原因
当弹出dialog内容是需要提交的表单时，点击提交按钮，由于请求响应时间较长或网速原因导致用户多次点击提交按钮而导致表单重复提交。
网上解决方案主要有几种：
1、通过JS屏蔽提交按钮。
2、给数据库增加唯一键约束。
3、利用Session防止表单重复提交。
本文主要讲述通过JS控制提交按钮可用性来控制用户操作，尽管此
Uncaught ReferenceError: process is not defined 以及 “ERROR in ./node_modules/json-schema-ref-parser/“
ZHOU_HUA_:
