feat: add updateSchema to form api (#4453)

* feat: add updateSchema to form api

* chore: typo

* chore: typo
This commit is contained in:
Vben
2024-09-21 11:26:14 +08:00
committed by GitHub
parent 68dbe04bef
commit 60cffb0dec
3 changed files with 138 additions and 6 deletions

View File

@@ -41,12 +41,25 @@ const [BaseForm, formApi] = useVbenForm({
label: 'field2',
},
{
component: 'Input',
component: 'Select',
componentProps: {
placeholder: '请输入',
allowClear: true,
filterOption: true,
options: [
{
label: '选项1',
value: '1',
},
{
label: '选项2',
value: '2',
},
],
placeholder: '请选择',
showSearch: true,
},
fieldName: 'field3',
label: 'field3',
fieldName: 'fieldOptions',
label: '下拉选',
},
],
// 大屏一行显示3个中屏一行显示2个小屏一行显示1个
@@ -75,9 +88,35 @@ function handleClick(
| 'showSubmitButton'
| 'updateActionAlign'
| 'updateResetButton'
| 'updateSchema'
| 'updateSubmitButton',
) {
switch (action) {
case 'updateSchema': {
formApi.updateSchema([
{
componentProps: {
options: [
{
label: '选项1',
value: '1',
},
{
label: '选项2',
value: '2',
},
{
label: '选项3',
value: '3',
},
],
},
fieldName: 'fieldOptions',
},
]);
break;
}
case 'labelWidth': {
formApi.setState({
commonConfig: {
@@ -181,6 +220,7 @@ function handleClick(
<template>
<Page description="表单组件api操作示例。" title="表单组件">
<Space class="mb-5 flex-wrap">
<Button @click="handleClick('updateSchema')">updateSchema</Button>
<Button @click="handleClick('labelWidth')">更改labelWidth</Button>
<Button @click="handleClick('resetLabelWidth')">还原labelWidth</Button>
<Button @click="handleClick('disabled')">禁用表单</Button>