JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-05-17 17:49:18 +08:00
Code Issues Projects Releases Wiki Activity

fix(form): 表单配置没有变化,初始值变化时,表单发生重绘

Browse Source
This commit is contained in:
roymondchen 2022-03-08 20:07:47 +08:00 committed by jia000
parent 4f4e81f27c
commit 979336c052
2 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/form/src/Form.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<ElForm <el-form
v-if="initialized && Array.isArray(config)"
class="m-form" class="m-form"
ref="elForm" ref="elForm"
:model="values" :model="values"
@ -10,7 +9,8 @@
:inline="inline" :inline="inline"
:label-position="labelPosition" :label-position="labelPosition"
> >
<MContainer <template v-if="initialized && Array.isArray(config)">
<m-form-container
v-for="(item, index) in config" v-for="(item, index) in config"
:key="item[keyProp] ?? index" :key="item[keyProp] ?? index"
:config="item" :config="item"
@ -19,16 +19,16 @@
:step-active="stepActive" :step-active="stepActive"
:size="size" :size="size"
@change="changeHandler" @change="changeHandler"
></MContainer> ></m-form-container>
</ElForm> </template>
</el-form>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, PropType, provide, reactive, ref, watchEffect } from 'vue'; import { defineComponent, PropType, provide, reactive, ref, toRaw, watch } from 'vue';
import { ElForm } from 'element-plus'; import { ElForm } from 'element-plus';
import { cloneDeep } from 'lodash-es'; import { cloneDeep, isEqual } from 'lodash-es';
import MContainer from './containers/Container.vue';
import { getConfig } from './utils/config'; import { getConfig } from './utils/config';
import { initValue } from './utils/form'; import { initValue } from './utils/form';
import { FormConfig, FormState, FormValue } from './schema'; import { FormConfig, FormState, FormValue } from './schema';
@ -45,8 +45,6 @@ export interface FieldErrorList {
export default defineComponent({ export default defineComponent({
name: 'm-form', name: 'm-form',
components: { ElForm, MContainer },
props: { props: {
// 表单初始化值 // 表单初始化值
initValues: { initValues: {
@ -140,8 +138,13 @@ export default defineComponent({
provide('mForm', formState); provide('mForm', formState);
watchEffect(() => { watch(
[() => props.config, () => props.initValues],
([config], [preConfig]) => {
if (!isEqual(toRaw(config), toRaw(preConfig))) {
initialized.value = false; initialized.value = false;
}
initValue(formState, { initValue(formState, {
initValues: props.initValues, initValues: props.initValues,
config: props.config, config: props.config,
@ -149,7 +152,9 @@ export default defineComponent({
values.value = value; values.value = value;
initialized.value = true; initialized.value = true;
}); });
}); },
{ immediate: true },
);
return { return {
initialized, initialized,

4
packages/form/src/containers/Tabs.vue
View File

@ -54,6 +54,10 @@ const getActive = (mForm: FormState | undefined, props: any, activeTabName: stri
const tabClickHandler = (mForm: FormState | undefined, tab: any, props: any) => { const tabClickHandler = (mForm: FormState | undefined, tab: any, props: any) => {
const { config, model, prop } = props; const { config, model, prop } = props;
// 兼容vue2的element-ui
tab.name = tab.paneName;
if (typeof config.onTabClick === 'function') { if (typeof config.onTabClick === 'function') {
config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop }); config.onTabClick(mForm, tab, { model, formValue: mForm?.values, prop });
} }