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 () => {