JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-04-06 03:57:56 +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

61
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,25 +9,26 @@
:inline="inline" :inline="inline"
:label-position="labelPosition" :label-position="labelPosition"
> >
<MContainer <template v-if="initialized && Array.isArray(config)">
v-for="(item, index) in config" <m-form-container
:key="item[keyProp] ?? index" v-for="(item, index) in config"
:config="item" :key="item[keyProp] ?? index"
:model="values" :config="item"
:label-width="item.labelWidth || labelWidth" :model="values"
:step-active="stepActive" :label-width="item.labelWidth || labelWidth"
:size="size" :step-active="stepActive"
@change="changeHandler" :size="size"
></MContainer> @change="changeHandler"
</ElForm> ></m-form-container>
</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,16 +138,23 @@ export default defineComponent({
provide('mForm', formState); provide('mForm', formState);
watchEffect(() => { watch(
initialized.value = false; [() => props.config, () => props.initValues],
initValue(formState, { ([config], [preConfig]) => {
initValues: props.initValues, if (!isEqual(toRaw(config), toRaw(preConfig))) {
config: props.config, initialized.value = false;
}).then((value) => { }
values.value = value;
initialized.value = true; initValue(formState, {
}); initValues: props.initValues,
}); config: props.config,
}).then((value) => {
values.value = value;
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 });
} }