表单标签页
表单支持使用Tab组件分页、分组，Tab分页适用于表单数据较多且有相似项目可以分组时。支持分组多个页面，方便用户操作。
基础使用
tab组件的对象属性嵌套类似于 simple-flat，每个标签页访问同级对象。
- 使用
custom-tab声明一个标签组件。 - 使用
custom-tab-page声明一个标签页，标签页必须处于标签组件的子级。
下一个标签页按钮
- 使用
base-next-tab-button可以声明一个下一个标签页按钮，按钮必须处于标签页组件的子级。 - 点击按钮会切换到下一个标签页。
- 如果当前标签页是最后一个标签页，则点击按钮会切换至第一个标签页。
设置当前标签页
你可以通过向表单项发送下面的事件来跳转下一页或者设置当前标签页：
MESSAGE_TAB_NEXT：切换到下一个标签页。MESSAGE_TAB_PREV：切换到上一个标签页。MESSAGE_TAB_ACTIVE：设置当前标签页。
例如：
js
// 切换到下一个标签页
formRef.dispatchMessage(MESSAGE_TAB_NEXT);
// 切换到上一个标签页
formRef.dispatchMessage(MESSAGE_TAB_PREV);
// 设置当前标签页为 page2
formRef.dispatchMessage(MESSAGE_TAB_ACTIVE, 'page2');自定义Tab组件
TIP
还可以使用第三方的组件Tab组件和TabPage组件，以 ArcoDesign 为例，注册其Tab组件。
ts
import { Tabs, TabPane } from "@arco-design/web-vue";
configDefaultDynamicFormOptions({
internalWidgets: {
//...省略
Tab: {
component: markRaw(Tabs),
propsMap: {
activeKey: 'activeKey',
defaultActiveKey: 'defaultActiveKey',
},
},
TabPage: {
component: markRaw(TabPane),
propsMap: {
title: 'title',
disabled: 'disabled',
},
},
},
formLabelCol: { span: 8 },
formWrapperCol: { span: 16 },
//...省略
formItems: [],
} as IDynamicFormOptions);