feat(form): form-dialog重新打开是form重新渲染

This commit is contained in:
roymondchen 2022-09-23 19:56:10 +08:00 committed by jia000
parent 1c3565035c
commit 6cf1f8636c

View File

@ -1,53 +1,55 @@
<template> <template>
<teleport to="body"> <el-dialog
<div class="m-form-dialog" v-show="dialogVisible"> v-model="dialogVisible"
<el-dialog class="m-form-dialog"
v-model="dialogVisible" top="20px"
top="20px" append-to-body
:title="title" :title="title"
:width="width" :width="width"
:fullscreen="fullscreen" :fullscreen="fullscreen"
:close-on-click-modal="false" :close-on-click-modal="false"
@close="closeHandler" @close="closeHandler"
> >
<div class="m-dialog-body" :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`"> <div
<m-form v-if="dialogVisible"
v-model="stepActive" class="m-dialog-body"
ref="form" :style="`max-height: ${bodyHeight}; overflow-y: auto; overflow-x: hidden;`"
:size="size" >
:config="config" <m-form
:init-values="values" v-model="stepActive"
:parent-values="parentValues" ref="form"
:label-width="labelWidth" :size="size"
@change="changeHandler" :config="config"
></m-form> :init-values="values"
<slot></slot> :parent-values="parentValues"
</div> :label-width="labelWidth"
@change="changeHandler"
<template #footer> ></m-form>
<el-row class="dialog-footer"> <slot></slot>
<el-col :span="12" style="text-align: left">
<div style="min-height: 1px">
<slot name="left"></slot>
</div>
</el-col>
<el-col :span="12">
<slot name="footer">
<el-button @click="cancel" size="small"> </el-button>
<el-button v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep">上一步</el-button>
<el-button v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
>下一步</el-button
>
<el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
confirmText
}}</el-button>
</slot>
</el-col>
</el-row>
</template>
</el-dialog>
</div> </div>
</teleport>
<template #footer>
<el-row class="dialog-footer">
<el-col :span="12" style="text-align: left">
<div style="min-height: 1px">
<slot name="left"></slot>
</div>
</el-col>
<el-col :span="12">
<slot name="footer">
<el-button @click="cancel" size="small"> </el-button>
<el-button v-if="hasStep && stepActive > 1" type="info" size="small" @click="preStep">上一步</el-button>
<el-button v-if="hasStep && stepCount > stepActive" type="info" size="small" @click="nextStep"
>下一步</el-button
>
<el-button v-else type="primary" size="small" :loading="saveFetch" @click="save">{{
confirmText
}}</el-button>
</slot>
</el-col>
</el-row>
</template>
</el-dialog>
</template> </template>
<script lang="ts"> <script lang="ts">