今天使用 Modal 对话框 调用 FormModel 表单怎么也获取不到表单的数据，以为是对话框的问题，搞了半天，最后发现是加了prop校验字段，但是点保存时没有校验表单，直接console.log输出得不到表单数据，也不报错，真是吐血！
首先看下 Modal 对话框的使用，为了方便使用封装了一下。
<template>
<div>
<a-modal
:zIndex="config.zIndex || 1001"
:width="config.width || 520"
:title="config.title"
:visible="visible"
:confirm-loading="confirmLoading"
@ok="handleOk"
@cancel="close"
class="xm-modal"
:footer="config.hideFooter ? null : undefined"
>
<a-skeleton active v-if="contentLoading" />
<slot v-else></slot>
</a-modal>
</div>
</template>
<script>
export default {
props: {
config: {
type: Object,
required: true,
},
},
data() {
return {
confirmLoading: false,
contentLoading: false,
visible: false,
};
},
watch: {
visible() {
if (this.visible) {
this.handleOpen();
}
}
},
methods: {
show() {
this.visible = true;
},
close() {
this.visible = false;
if (this.config.onClose) this.config.onClose();
},
async handleOk() {
try {
this.confirmLoading = true;
if (this.config.onConfirm) await this.config.onConfirm();
this.close();
this.confirmLoading = false;
} catch (error) {
console.error(error);
this.confirmLoading = false;
}
},
async handleOpen() {
this.contentLoading = true;
if (this.config.onOpen) await this.config.onOpen();
this.contentLoading = false;
},
},
};
</script>
<style scoped>
.xm-modal {
.ant-modal-body {
padding: 15px;
}
}
</style>然后直接在 Modal 里调用自定义的 FormModel 表单，
