feat(form): fieldset legend 支持函数动态生成标题

This commit is contained in:
roymondchen 2026-06-02 14:24:09 +08:00
parent 8612311db1
commit 35fc394199
4 changed files with 34 additions and 3 deletions

View File

@ -135,6 +135,18 @@
}] }]
}]"></demo-block> }]"></demo-block>
`legend` 除了支持字符串,也支持函数,函数返回值作为标题展示,可根据表单数据动态生成:
<demo-block type="form" :config="[{
type: 'fieldset',
labelWidth: '100px',
legend: (mForm, { formValue }) => `当前值:${formValue.text || '空'}`,
items: [{
name: 'text',
text: '配置1',
}]
}]"></demo-block>
### panel ### panel
<demo-block type="form" :config="[{ <demo-block type="form" :config="[{

View File

@ -754,7 +754,7 @@ export interface FieldsetConfig<T = never> extends FormItem, ContainerCommonConf
falseValue?: string | number; falseValue?: string | number;
}; };
expand?: boolean; expand?: boolean;
legend?: string; legend?: string | FilterFunction<string>;
schematic?: string; schematic?: string;
} }
// #endregion FieldsetConfig // #endregion FieldsetConfig

View File

@ -7,11 +7,11 @@
:true-value="checkboxTrueValue" :true-value="checkboxTrueValue"
:false-value="checkboxFalseValue" :false-value="checkboxFalseValue"
@update:modelValue="valueChangeHandler" @update:modelValue="valueChangeHandler"
><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span ><span v-html="legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
></TMagicCheckbox> ></TMagicCheckbox>
</component> </component>
<legend v-else> <legend v-else>
<span v-html="config.legend"></span> <span v-html="legend"></span>
<span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span> <span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
</legend> </legend>
@ -63,6 +63,7 @@ import { computed, inject } from 'vue';
import { TMagicCheckbox } from '@tmagic/design'; import { TMagicCheckbox } from '@tmagic/design';
import { ContainerChangeEventData, FieldsetConfig, FormState } from '../schema'; import { ContainerChangeEventData, FieldsetConfig, FormState } from '../schema';
import { filterFunction } from '../utils/form';
import Container from './Container.vue'; import Container from './Container.vue';
@ -99,6 +100,8 @@ const mForm = inject<FormState | undefined>('mForm');
const name = computed(() => props.config.name || ''); const name = computed(() => props.config.name || '');
const legend = computed(() => filterFunction<string>(mForm, props.config.legend, props));
const checkboxName = computed(() => { const checkboxName = computed(() => {
if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.name === 'string') { if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.name === 'string') {
return props.config.checkbox.name; return props.config.checkbox.name;

View File

@ -58,6 +58,22 @@ describe('Panel container', () => {
); );
await nextTick(); await nextTick();
expect(wrapper.exists()).toBe(true); 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 () => { test('flex-layout 容器渲染', async () => {