diff --git a/docs/form-config/layout.md b/docs/form-config/layout.md index 4825fa6c..581c6dc2 100644 --- a/docs/form-config/layout.md +++ b/docs/form-config/layout.md @@ -135,6 +135,18 @@ }] }]"> +`legend` 除了支持字符串,也支持函数,函数返回值作为标题展示,可根据表单数据动态生成: + + + ### panel - + @@ -63,6 +63,7 @@ import { computed, inject } from 'vue'; import { TMagicCheckbox } from '@tmagic/design'; import { ContainerChangeEventData, FieldsetConfig, FormState } from '../schema'; +import { filterFunction } from '../utils/form'; import Container from './Container.vue'; @@ -99,6 +100,8 @@ const mForm = inject('mForm'); const name = computed(() => props.config.name || ''); +const legend = computed(() => filterFunction(mForm, props.config.legend, props)); + const checkboxName = computed(() => { if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.name === 'string') { return props.config.checkbox.name; diff --git a/packages/form/tests/unit/containers/Panel.spec.ts b/packages/form/tests/unit/containers/Panel.spec.ts index 5648b715..e7d8b2e1 100644 --- a/packages/form/tests/unit/containers/Panel.spec.ts +++ b/packages/form/tests/unit/containers/Panel.spec.ts @@ -58,6 +58,22 @@ describe('Panel container', () => { ); await nextTick(); expect(wrapper.exists()).toBe(true); + expect(wrapper.find('legend').text()).toContain('fs'); + }); + + test('fieldset legend 支持函数', async () => { + const wrapper = mountForm( + [ + { + type: 'fieldset', + legend: (mForm: any, { formValue }: any) => `legend-${formValue.text}`, + items: [{ name: 'text', type: 'text', text: 'text' }], + }, + ], + { text: 'fn' }, + ); + await nextTick(); + expect(wrapper.find('legend').text()).toContain('legend-fn'); }); test('flex-layout 容器渲染', async () => {