jobsys-newbie
Version:
Enhanced component based on ant-design-vue
373 lines • 108 kB
HTML
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="VuePress 2.0.0-beta.67">
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html, body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true);
}
</script>
<title>NewbieForm | Newbie Component</title><meta name="description" content="Enhanced Vue components based on AntD.">
<link rel="preload" href="/docs/newbie/assets/style-398c75cc.css" as="style"><link rel="stylesheet" href="/docs/newbie/assets/style-398c75cc.css">
<link rel="modulepreload" href="/docs/newbie/assets/app-e5356031.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieForm.html-15d8c6f5.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieForm-c753634a.js"><link rel="modulepreload" href="/docs/newbie/assets/index-16cac109.js"><link rel="modulepreload" href="/docs/newbie/assets/compact-item-45f3d050.js"><link rel="modulepreload" href="/docs/newbie/assets/CloseCircleFilled-7d1a9da0.js"><link rel="modulepreload" href="/docs/newbie/assets/ExclamationCircleFilled-71949edd.js"><link rel="modulepreload" href="/docs/newbie/assets/FormItemContext-af84826a.js"><link rel="modulepreload" href="/docs/newbie/assets/useFlexGapSupport-e1acb751.js"><link rel="modulepreload" href="/docs/newbie/assets/styleChecker-8bbc1161.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieEditor-c8effb0f.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieProvider-45d73778.js"><link rel="modulepreload" href="/docs/newbie/assets/network-3dbc60ad.js"><link rel="modulepreload" href="/docs/newbie/assets/isString-dfb8fe43.js"><link rel="modulepreload" href="/docs/newbie/assets/index-b4cb0b96.js"><link rel="modulepreload" href="/docs/newbie/assets/isUndefined-aa0326a0.js"><link rel="modulepreload" href="/docs/newbie/assets/style-3dc3bceb.js"><link rel="modulepreload" href="/docs/newbie/assets/isNull-4293306c.js"><link rel="modulepreload" href="/docs/newbie/assets/utils-584bcbdb.js"><link rel="modulepreload" href="/docs/newbie/assets/useRefs-c46ab4e4.js"><link rel="modulepreload" href="/docs/newbie/assets/LeftOutlined-8f1bdfd3.js"><link rel="modulepreload" href="/docs/newbie/assets/pickAttrs-024293c9.js"><link rel="modulepreload" href="/docs/newbie/assets/vnode-8424d922.js"><link rel="modulepreload" href="/docs/newbie/assets/index-3761f557.js"><link rel="modulepreload" href="/docs/newbie/assets/statusUtils-41ec9e8f.js"><link rel="modulepreload" href="/docs/newbie/assets/omit-dc457db2.js"><link rel="modulepreload" href="/docs/newbie/assets/index-2bac9f50.js"><link rel="modulepreload" href="/docs/newbie/assets/index-54e202a8.js"><link rel="modulepreload" href="/docs/newbie/assets/EyeOutlined-9657ac6a.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieAddress-a35b35ae.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieUploader-0b6b5515.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieButton-00521913.js"><link rel="modulepreload" href="/docs/newbie/assets/index-4cb0cbae.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieModal-bbee8112.js"><link rel="modulepreload" href="/docs/newbie/assets/index-a79ee2a0.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieForm.html-b6dbee27.js"><link rel="prefetch" href="/docs/newbie/assets/hooks.html-00cc23c0.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/index.html-89f7cf72.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieAddress.html-47b67690.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieButton.html-b67253b4.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieEditor.html-5db09ee2.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieFormDesigner.html-bd1c3f71.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieList.html-ac7d0807.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieModal.html-c13f0bf7.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbiePassword.html-dbf4a28b.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieProvider.html-6128ffcc.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieSearch.html-6b6c26c0.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieTable.html-bc1b0a84.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieUploader.html-167fed4e.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/404.html-f9875e7b.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/hooks.html-adccea0a.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/index.html-3ebf1ebb.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieAddress.html-e037374a.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieButton.html-3aa8b13d.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieEditor.html-40504152.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieFormDesigner.html-bf519d6d.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieList.html-2d0e9567.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieModal.html-fa7e4778.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbiePassword.html-3086c803.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieProvider.html-3069b4d1.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieSearch.html-254febfb.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieTable.html-0807cb3d.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieUploader.html-bd5b6c5d.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/404.html-28bdd61b.js" as="script">
</head>
<body>
<div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/docs/newbie/" class=""><!----><span class="site-name">Newbie Component</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/docs/newbie/" class="" aria-label="首页"><!--[--><!--]--> 首页 <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="组件"><span class="title">组件</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="组件"><span class="title">组件</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/docs/newbie/components/address/NewbieAddress" class="" aria-label="NewbieAddress"><!--[--><!--]--> NewbieAddress <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/button/NewbieButton" class="" aria-label="NewbieButton"><!--[--><!--]--> NewbieButton <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/editor/NewbieEditor" class="" aria-label="NewbieEditor"><!--[--><!--]--> NewbieEditor <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/form/NewbieForm" class="router-link-active" aria-label="NewbieForm"><!--[--><!--]--> NewbieForm <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/form-designer/NewbieFormDesigner" class="" aria-label="NewbieFormDesigner"><!--[--><!--]--> NewbieFormDesigner <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/list/NewbieList" class="" aria-label="NewbieList"><!--[--><!--]--> NewbieList <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/modal/NewbieModal" class="" aria-label="NewbieModal"><!--[--><!--]--> NewbieModal <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/password/NewbiePassword" class="" aria-label="NewbiePassword"><!--[--><!--]--> NewbiePassword <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/provider/NewbieProvider" class="" aria-label="NewbieProvider"><!--[--><!--]--> NewbieProvider <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/search/NewbieSearch" class="" aria-label="NewbieSearch"><!--[--><!--]--> NewbieSearch <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/table/NewbieTable" class="" aria-label="NewbieTable"><!--[--><!--]--> NewbieTable <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/uploader/NewbieUploader" class="" aria-label="NewbieUploader"><!--[--><!--]--> NewbieUploader <!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a href="/docs/newbie/hooks" class="" aria-label="组合式 API"><!--[--><!--]--> 组合式 API <!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/docs/newbie/" class="" aria-label="首页"><!--[--><!--]--> 首页 <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="组件"><span class="title">组件</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="组件"><span class="title">组件</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/docs/newbie/components/address/NewbieAddress" class="" aria-label="NewbieAddress"><!--[--><!--]--> NewbieAddress <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/button/NewbieButton" class="" aria-label="NewbieButton"><!--[--><!--]--> NewbieButton <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/editor/NewbieEditor" class="" aria-label="NewbieEditor"><!--[--><!--]--> NewbieEditor <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/form/NewbieForm" class="router-link-active" aria-label="NewbieForm"><!--[--><!--]--> NewbieForm <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/form-designer/NewbieFormDesigner" class="" aria-label="NewbieFormDesigner"><!--[--><!--]--> NewbieFormDesigner <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/list/NewbieList" class="" aria-label="NewbieList"><!--[--><!--]--> NewbieList <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/modal/NewbieModal" class="" aria-label="NewbieModal"><!--[--><!--]--> NewbieModal <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/password/NewbiePassword" class="" aria-label="NewbiePassword"><!--[--><!--]--> NewbiePassword <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/provider/NewbieProvider" class="" aria-label="NewbieProvider"><!--[--><!--]--> NewbieProvider <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/search/NewbieSearch" class="" aria-label="NewbieSearch"><!--[--><!--]--> NewbieSearch <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/table/NewbieTable" class="" aria-label="NewbieTable"><!--[--><!--]--> NewbieTable <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/uploader/NewbieUploader" class="" aria-label="NewbieUploader"><!--[--><!--]--> NewbieUploader <!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a href="/docs/newbie/hooks" class="" aria-label="组合式 API"><!--[--><!--]--> 组合式 API <!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">NewbieForm <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#props" class="router-link-active router-link-exact-active sidebar-item" aria-label="Props"><!--[--><!--]--> Props <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#events" class="router-link-active router-link-exact-active sidebar-item" aria-label="Events"><!--[--><!--]--> Events <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#详细参数" class="router-link-active router-link-exact-active sidebar-item" aria-label="详细参数"><!--[--><!--]--> 详细参数 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#formitemconfig-表单项配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="FormItemConfig 表单项配置"><!--[--><!--]--> FormItemConfig 表单项配置 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#formitemconfig-type-支持组件类型" class="router-link-active router-link-exact-active sidebar-item" aria-label="FormItemConfig.type 支持组件类型"><!--[--><!--]--> FormItemConfig.type 支持组件类型 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#formitemconfig-type-remote-远程搜索特有参数" class="router-link-active router-link-exact-active sidebar-item" aria-label="FormItemConfig.type.remote 远程搜索特有参数"><!--[--><!--]--> FormItemConfig.type.remote 远程搜索特有参数 <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#方法" class="router-link-active router-link-exact-active sidebar-item" aria-label="方法"><!--[--><!--]--> 方法 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#provider" class="router-link-active router-link-exact-active sidebar-item" aria-label="Provider"><!--[--><!--]--> Provider <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#faq" class="router-link-active router-link-exact-active sidebar-item" aria-label="FAQ"><!--[--><!--]--> FAQ <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#如果需要表单使用自定义组件-如何配置" class="router-link-active router-link-exact-active sidebar-item" aria-label="如果需要表单使用自定义组件，如何配置？"><!--[--><!--]--> 如果需要表单使用自定义组件，如何配置？ <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#如何动态控制表单项是否可见-是否必填-是否禁用" class="router-link-active router-link-exact-active sidebar-item" aria-label="如何动态控制表单项是否可见/是否必填/是否禁用？"><!--[--><!--]--> 如何动态控制表单项是否可见/是否必填/是否禁用？ <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#group-数组组件如何使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="Group 数组组件如何使用？"><!--[--><!--]--> Group 数组组件如何使用？ <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#formitem-的-match-如何使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="FormItem 的 match 如何使用?"><!--[--><!--]--> FormItem 的 match 如何使用? <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#formitem-的-optional-如何使用" class="router-link-active router-link-exact-active sidebar-item" aria-label="FormItem 的 optional 如何使用?"><!--[--><!--]--> FormItem 的 optional 如何使用? <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#如何自定义-fromitem-的属性-slot" class="router-link-active router-link-exact-active sidebar-item" aria-label="如何自定义 FromItem 的属性/slot"><!--[--><!--]--> 如何自定义 FromItem 的属性/slot <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#示例" class="router-link-active router-link-exact-active sidebar-item" aria-label="示例"><!--[--><!--]--> 示例 <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#开发" class="router-link-active router-link-exact-active sidebar-item" aria-label="开发"><!--[--><!--]--> 开发 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/docs/newbie/components/form/NewbieForm.html#如何添加一个新的表单组件" class="router-link-active router-link-exact-active sidebar-item" aria-label="如何添加一个新的表单组件?"><!--[--><!--]--> 如何添加一个新的表单组件? <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="newbieform" tabindex="-1"><a class="header-anchor" href="#newbieform" aria-hidden="true">#</a> NewbieForm</h1><blockquote><p>表单组件</p></blockquote><p>通过 JSON 配置生成表单，并集成表单验证，获取数据，提交数据等功能。</p><p>Version: 1.0.0</p><h2 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> Props</h2><table><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>title</td><td>表单标题，Card 模式下生效</td><td>string</td><td>-</td><td>""</td></tr><tr><td>data</td><td>表单数据，用于初始化表单，并会进行 Watch</td><td>object|string</td><td>-</td><td>""</td></tr><tr><td>autoLoad</td><td>是否自动加载<br><code>true</code> 表示自动加载数据<br><code>Array,String</code> 表示会对 <code>extraData</code> 数据中的相关字段进行非空验证，不为空再加载数据</td><td>boolean|array|string</td><td>-</td><td>true</td></tr><tr><td>fetchUrl</td><td>获取表单数据的 URL</td><td>string</td><td>-</td><td>""</td></tr><tr><td>extraData</td><td>额外的数据，在提交时会合并到表单数据中并一起提交</td><td>object</td><td>-</td><td>{}</td></tr><tr><td>submitUrl</td><td>提交数据 URL</td><td>string</td><td>-</td><td>""</td></tr><tr><td>submitButtonText</td><td>提交按钮文字</td><td>string</td><td>-</td><td>"保存"</td></tr><tr><td>submitConfirmText</td><td>提交确认提示内容</td><td>string</td><td>-</td><td>""</td></tr><tr><td>closable</td><td>是否显示关闭按钮</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td>closeButtonText</td><td>关闭按钮文字</td><td>string</td><td>-</td><td>"关闭"</td></tr><tr><td>closeButtonFirst</td><td>是否将<code>关闭</code>按钮放在<code>提交</code>按钮前面</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>hideButtons</td><td>是否隐藏按钮</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>disabled</td><td>是否禁用表单</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>readonly</td><td>是否只读</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>submitDisabled</td><td>是否禁用提交按钮</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>dividerProps</td><td>当有分割线时，<a href="https://www.antdv.com/components/divider-cn" target="_blank" rel="noopener noreferrer">原生分割线配置<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></td><td>object</td><td>-</td><td>{}</td></tr><tr><td>columns</td><td>表单布局，默认为单列，当为多列时，按 24 栅格布局<br>如：columns: [12, 12]</td><td>array</td><td>-</td><td>[24]</td></tr><tr><td>fixedColumns</td><td>如有 fixed 列，默认 fixed 列的宽度为 6，可自定义</td><td>number</td><td>-</td><td>6</td></tr><tr><td>cardSize</td><td>Card 的大小</td><td>string</td><td><code>small</code>, <code>default</code></td><td>"small"</td></tr><tr><td>cardWrapper</td><td>是否用 <code>Card</code> 包裹</td><td>boolean</td><td>-</td><td>true</td></tr><tr><td>form</td><td>表单配置，<a href="#formitemconfig-%E8%A1%A8%E5%8D%95%E9%A1%B9%E9%85%8D%E7%BD%AE">见表单项配置</a></td><td>array|func</td><td>-</td><td>function() {<br> return []<br>}</td></tr><tr><td>afterFetched</td><td>fetch 返回数据处理函数<br><code>@return</code> {Object} 返回处理后的数据，将用于初始化表单</td><td>func</td><td>-</td><td>null</td></tr><tr><td>beforeSubmit</td><td><br><code>@typedef</code> {Object} ExposedFormData<br><code>@property</code> Format 后的表单数据<br><code>@property</code> 原生的表单数据<br><code>@params</code> undefined<br><code>@return</code> {Boolean|Object} return false 会阻止提交操作，return Object 会替换提交的数据</td><td>func</td><td>-</td><td>null</td></tr><tr><td>close</td><td>点击关闭时的动作</td><td>func</td><td>-</td><td>null</td></tr><tr><td>afterSubmit</td><td>提交成功后的回调</td><td>func</td><td>-</td><td>null</td></tr><tr><td>formProps</td><td>原生的 <a href="https://www.antdv.com/components/form-cn#api" target="_blank" rel="noopener noreferrer">From<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 配置</td><td>object</td><td>-</td><td>{}</td></tr></tbody></table><h2 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> Events</h2><table><thead><tr><th>Event name</th><th>Properties</th><th>Description</th></tr></thead><tbody><tr><td>success</td><td></td><td></td></tr></tbody></table><hr><h2 id="详细参数" tabindex="-1"><a class="header-anchor" href="#详细参数" aria-hidden="true">#</a> 详细参数</h2><h3 id="formitemconfig-表单项配置" tabindex="-1"><a class="header-anchor" href="#formitemconfig-表单项配置" aria-hidden="true">#</a> <code>FormItemConfig</code> 表单项配置</h3><table><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>key</td><td>数据库关联名称</td><td>string</td><td>-</td><td>""</td></tr><tr><td>title</td><td>显示的 Label 名字</td><td>string</td><td>-</td><td>""</td></tr><tr><td>type</td><td>支持的组件类型</td><td>string</td><td><a href="#formitem-type-%E6%94%AF%E6%8C%81%E7%BB%84%E4%BB%B6%E7%B1%BB%E5%9E%8B">见下表</a></td><td>"input"</td></tr><tr><td>options</td><td>组件选项</td><td>array | func</td><td>-</td><td>[]</td></tr><tr><td>placeholder</td><td>组件里的提示</td><td>string</td><td>-</td><td>""</td></tr><tr><td>help</td><td>form item 里的提示</td><td>string | func</td><td>-</td><td>""</td></tr><tr><td>width</td><td>组件宽度</td><td>string</td><td>-</td><td>""</td></tr><tr><td>style</td><td>样式</td><td>string</td><td>-</td><td>""</td></tr><tr><td>class</td><td>类名</td><td>string</td><td>-</td><td>""</td></tr><tr><td>init</td><td>初始化函数，用于初始化表单项的值: <code>init({ submitForm, value })</code></td><td>func</td><td>-</td><td>-</td></tr><tr><td>beforeSubmit</td><td>在提交前修改表单项的值，该函数会在 NewbieForm 的 beforeSubmit 之前调用: <code>beforeSubmit({ submitForm, value })</code></td><td>func</td><td>-</td><td>-</td></tr><tr><td>readonly</td><td>是否只读</td><td>boolean</td><td>-</td><td>false</td></tr><tr><td>required</td><td>是否必填, 函数用法见下方<a href="#faq">FAQ</a></td><td>boolean | func</td><td>-</td><td>false</td></tr><tr><td>disabled</td><td>组件不可编辑状态, 函数用法见下方<a href="#faq">FAQ</a></td><td>boolean | func</td><td>-</td><td>false</td></tr><tr><td>hidden</td><td>组件是否隐藏, 函数用法见下方<a href="#faq">FAQ</a></td><td>boolean | func</td><td>-</td><td>false</td></tr><tr><td>optional</td><td>表单项是否开启后才可以输入, 用法见下方<a href="#faq">FAQ</a></td><td>boolean | Array</td><td>-</td><td>false</td></tr><tr><td>match</td><td>支持根据条件返回不同的配置进行动态渲染, 用法见下方<a href="#faq">FAQ</a></td><td>Function</td><td>-</td><td>-</td></tr><tr><td>columnIndex</td><td>渲染在哪一列</td><td>number | string</td><td>-</td><td></td></tr><tr><td>break</td><td>是否新起一行，如果为 String 则以 Divider 分割</td><td>boolean | string</td><td>-</td><td>false</td></tr><tr><td>defaultProps</td><td>组件的配置</td><td>object</td><td>-</td><td>{}</td></tr><tr><td>formItemProps</td><td>同原生 <a href="https://www.antdv.com/components/form-cn#form-item" target="_blank" rel="noopener noreferrer">FormItem<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 配置, 并可以直接使用 <code>slots</code> 属性定义 FormItem 的 slot</td><td>object</td><td>-</td><td>{}</td></tr><tr><td>defaultValue</td><td>默认值</td><td>any</td><td>-</td><td>""</td></tr><tr><td>children</td><td>子组件配置</td><td>array<FormItemConfig></td><td>-</td><td>-</td></tr><tr><td>cellProps</td><td>子组件渲染的<a href="https://www.antdv.com/components/table-cn#column" target="_blank" rel="noopener noreferrer">单元格配置<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></td><td>object</td><td>-</td><td>-</td></tr><tr><td>customRender</td><td>自定义渲染函数</td><td>func</td><td>-</td><td>-</td></tr></tbody></table><h3 id="formitemconfig-type-支持组件类型" tabindex="-1"><a class="header-anchor" href="#formitemconfig-type-支持组件类型" aria-hidden="true">#</a> <code>FormItemConfig.type</code> 支持组件类型</h3><table><thead><tr><th>Type</th><th>Description</th></tr></thead><tbody><tr><td>input</td><td>输入框</td></tr><tr><td>select</td><td>选择框</td></tr><tr><td>remote</td><td>远程检索</td></tr><tr><td>tree-select</td><td>树状选择</td></tr><tr><td>date</td><td>日期选择</td></tr><tr><td>time</td><td>时间选择</td></tr><tr><td>switch</td><td>开关</td></tr><tr><td>radio</td><td>单选</td></tr><tr><td>checkbox</td><td>多选</td></tr><tr><td>tag</td><td>标签输入</td></tr><tr><td>address</td><td>地址选择</td></tr><tr><td>cascade</td><td>级联选择</td></tr><tr><td>number</td><td>数字</td></tr><tr><td>html</td><td>HTML 内容</td></tr><tr><td>uploader</td><td>文件上传</td></tr><tr><td>editor</td><td>富文本编辑</td></tr><tr><td>text</td><td>文本显示</td></tr><tr><td>group</td><td>数组组件，用法见示例</td></tr><tr><td>slot</td><td>自定义插槽</td></tr></tbody></table><h3 id="formitemconfig-type-remote-远程搜索特有参数" tabindex="-1"><a class="header-anchor" href="#formitemconfig-type-remote-远程搜索特有参数" aria-hidden="true">#</a> <code>FormItemConfig.type.remote</code> 远程搜索特有参数</h3><table><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>keyword</td><td>检索时的关键词</td><td>string</td><td>-</td><td>"keyword"</td></tr><tr><td>url</td><td>检索的 url</td><td>string</td><td>-</td><td>-</td></tr><tr><td>method</td><td>检索的方法</td><td>string</td><td><code>get</code>, <code>post</code></td><td>"get"</td></tr><tr><td>params</td><td>检索时的附带参数</td><td>object</td><td>-</td><td>{}</td></tr><tr><td>onSearch</td><td>服务器返回参数的处理函数</td><td>func</td><td>-</td><td>null</td></tr></tbody></table><h2 id="方法" tabindex="-1"><a class="header-anchor" href="#方法" aria-hidden="true">#</a> 方法</h2><table><thead><tr><th>名称</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td>isInitializing</td><td>(loading:boolean) => void</td><td>设置表单加载状态</td></tr><tr><td>reset</td><td>() => void</td><td>重置表单</td></tr><tr><td>getFormStandalone</td><td>() => Object</td><td>获取一份表单值的复制</td></tr><tr><td>getForm</td><td>() => Object</td><td>获取表单值</td></tr><tr><td>setForm</td><td>({key: value}) => void</td><td>设置表单一项或多项的值</td></tr><tr><td>isDirty</td><td>() => boolean</td><td>表单是否被污染</td></tr></tbody></table><h2 id="provider" tabindex="-1"><a class="header-anchor" href="#provider" aria-hidden="true">#</a> Provider</h2><table><thead><tr><th>名称</th><th>参数</th><th>说明</th></tr></thead><tbody><tr><td>format</td><td>Object</td><td>用于格式化提示的表单数据, 同<a href="/hooks.html#form-useformformat-form-format-%E2%87%92-object" target="_blank" rel="noopener noreferrer">useFormFormat<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></td></tr><tr><td>afterFetched(response) => Object</td><td>Function</td><td>表单数据获取数据后的回调函数, 参数为请求的 <code>response</code></td></tr></tbody></table><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieProvider</span> <span class="token attr-name">:form</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{format: {boolean: true, date: 'YYYY-MM-DD'}}<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="faq" tabindex="-1"><a class="header-anchor" href="#faq" aria-hidden="true">#</a> FAQ</h2><h3 id="如果需要表单使用自定义组件-如何配置" tabindex="-1"><a class="header-anchor" href="#如果需要表单使用自定义组件-如何配置" aria-hidden="true">#</a> 如果需要表单使用自定义组件，如何配置？</h3><p>使用 <code>formItem.type</code> 的 <code>slot</code> 或者是 <code>formItem.customRender</code> 进行自定义组件的渲染 ，示例如下：</p><ol><li>使用 <code>slot</code> 自定义组件</li></ol><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieForm</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#input</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>{submitForm}<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a-form-item</span><span class="token punctuation">></span></span>blabla<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a-form-item</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>NewbieForm</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"input"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"自定义组件"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"slot"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ol start="2"><li>使用 <code>customRender</code> 自定义组件</li></ol><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"input"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"自定义组件"</span><span class="token punctuation">,</span>
<span class="token function">customRender</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span>submitForm<span class="token punctuation">,</span> item<span class="token punctuation">}</span></span><span class="token punctuation">)</span><span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">"whatever you want"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="如何动态控制表单项是否可见-是否必填-是否禁用" tabindex="-1"><a class="header-anchor" href="#如何动态控制表单项是否可见-是否必填-是否禁用" aria-hidden="true">#</a> 如何动态控制表单项是否可见/是否必填/是否禁用？</h3><p>使用 <code>formItem.hidden</code>、<code>formItem.required</code>、<code>formItem.disabled</code> 控制表单项是否可见/是否必填/是否禁用，这三个参数均可直接传入一个 boolean 值，也可以传入一个函数，函数接收一个参数 <code>submitForm</code>，返回一个 boolean 值，示例如下：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"input"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"输入 Input"</span><span class="token punctuation">,</span>
<span class="token function-variable function">hidden</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">submitForm</span><span class="token punctuation">)</span> <span class="token operator">=></span> submitForm<span class="token punctuation">.</span>other_item <span class="token operator">===</span> <span class="token string">'make me hidden'</span><span class="token punctuation">,</span> <span class="token comment">//为 true 时当前表单项隐藏</span>
<span class="token function-variable function">required</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">submitForm</span><span class="token punctuation">)</span> <span class="token operator">=></span> submitForm<span class="token punctuation">.</span>other_item <span class="token operator">===</span><span class="token string">'make me required'</span><span class="token punctuation">,</span> <span class="token comment">//为 true 当前表单项必填</span>
<span class="token function-variable function">disabled</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">submitForm</span><span class="token punctuation">)</span> <span class="token operator">=></span> submitForm<span class="token punctuation">.</span>other_item <span class="token operator">===</span><span class="token string">'make me disabled'</span><span class="token punctuation">,</span> <span class="token comment">//为 true 当前表单项禁用</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="group-数组组件如何使用" tabindex="-1"><a class="header-anchor" href="#group-数组组件如何使用" aria-hidden="true">#</a> <code>Group</code> 数组组件如何使用？</h3><p><code>Group</code> 数组组件, 其 <code>type</code> 为 <code>group</code>, 并且使用 <code>children</code> 对象数组对子表单进行定义, 定义方式与普通表单项一致, 其 <code>value</code> 为一个对象数组, 组件内部自带基础的 <code>编辑</code>, <code>新增</code>, <code>删除</code>功能, 支持通过 <code>childrenOperations</code> 属性传入自定义操作, 示例如下：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"data_sources"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"数据源"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"group"</span><span class="token punctuation">,</span>
<span class="token literal-property property">childrenOperations</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"推荐"</span><span class="token punctuation">,</span>
<span class="token literal-property property">props</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token function">h</span><span class="token punctuation">(</span>LikeOutlined<span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token string">"small"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">action</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"数据"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"tree-select"</span><span class="token punctuation">,</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"category_id"</span><span class="token punctuation">,</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="formitem-的-match-如何使用" tabindex="-1"><a class="header-anchor" href="#formitem-的-match-如何使用" aria-hidden="true">#</a> FormItem 的 <code>match</code> 如何使用?</h3><p>当一个字段需要根据不同的条件进行动态渲染时，<code>match</code> 方法以 <code>submitForm</code> 为参数，返回一个选项配置, 该配置将与 <code>FormItem</code> 本身的属性进行合并后重新进行渲染, 也就是相同的属性可以直接定义在 <code>FormItem</code> 上, 而不需要再定义在 <code>match</code> 上, 相同属性将以 <code>match</code> 的配置为准 。示例：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"match"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"匹配 Match"</span><span class="token punctuation">,</span>
<span class="token literal-property property">columnIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token function">match</span><span class="token punctuation">(</span><span class="token parameter">submitForm</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>submitForm<span class="token punctuation">.</span>input <span class="token operator">===</span> <span class="token string">"1"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"input"</span><span class="token punctuation">,</span> <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">"这只能一句话"</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"textarea"</span><span class="token punctuation">,</span> <span class="token literal-property property">placeholder</span><span class="token operator">:</span> <span class="token string">"这里可以是一段话"</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="formitem-的-optional-如何使用" tabindex="-1"><a class="header-anchor" href="#formitem-的-optional-如何使用" aria-hidden="true">#</a> FormItem 的 <code>optional</code> 如何使用?</h3><p>有时候一些限制项, 譬如 <code>是否限制人数</code>, 需要先选择 <code>是</code> 与 <code>否</code>, 如果选择<code>是</code>之后再填写需要限制的具体人数, 如果 <code>optional</code> 为 <code>true</code>, 则会渲染一个 <code>Switch</code>, 当用户选择<code>是</code>以后, 才会展示定义的输入组件（本示例中为 <code>number</code>）, 可以填写具体的限制人数. <code>optional</code> 参数也可以传一个长度为 2 的数组, 如: <code>['限制', '不限制']</code>, 该参数将做为 <code>Switch</code> 的 <code>checkChildren</code> 与 <code>unCheckChildren</code></p><blockquote><p>注意: 如果 <code>optional</code> 搭配的输入组件为 <code>number</code>, 那不开启的时候, 该组件会将默认的 <code>value</code> 设置为 <code>0</code></p></blockquote><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"limit_num"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"限制人数"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"number"</span><span class="token punctuation">,</span>
<span class="token literal-property property">optional</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="如何自定义-fromitem-的属性-slot" tabindex="-1"><a class="header-anchor" href="#如何自定义-fromitem-的属性-slot" aria-hidden="true">#</a> 如何自定义 FromItem 的属性/slot</h3><p><code>FormItem</code> 中的 <code>fromItemProps</code> 与原生 <a href="https://www.antdv.com/components/form-cn#form-item" target="_blank" rel="noopener noreferrer">FormItem<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 的配置相同, 并支持直接传入 <code>slots</code> 对象, 用于自定义 <code>FormItem</code> 的 <code>slot</code>，示例如下：</p><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token punctuation">{</span>
<span class="token literal-property property">colon</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token literal-property property">slots</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">tooltip</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">h</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string">"whatever you want"</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例" aria-hidden="true">#</a> 示例</h2><hr><div class="ant-card css-1ugq3w3 ant-card-bordered ant-card-small"><div class="ant-card-head" style=""><div class="ant-card-head-wrapper"><div class="ant-card-head-title">测试表单</div><!----></div><!----></div><!----><div class="ant-card-body" style=""><!--[--><div class="ant-skeleton ant-skeleton-active css-1ugq3w3"><!----><div class="ant-skeleton-content"><h3 class="ant-skeleton-title" style="width:38%;"></h3><ul class="ant-skeleton-paragraph"><!--[--><li style=""></li><li style=""></li><li style=""></li><li style=""></li><li style=""></li><li style=""></li><li style=""></li><li style=""></li><li style=""></li><li style="width:61%;"></li><!--]--></ul></div></div><!--]--></div><!----></div><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieForm</span> <span class="token attr-name">:form</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>getForm()<span class="token punctuation">"</span></span> <span class="token attr-name">:columns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>[24]<span class="token punctuation">"</span></span> <span class="token attr-name">card-wrapper</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>测试表单<span class="token punctuation">"</span></span> <span class="token attr-name">:closable</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>false<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#prepend</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Prepend<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">#append</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Append<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>NewbieForm</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> h <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"vue"</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> NewbieForm <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"jobsys-newbie"</span>
<span class="token keyword">const</span> <span class="token function-variable function">getForm</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"limit_num"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"限制人数 Optional"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"number"</span><span class="token punctuation">,</span>
<span class="token literal-property property">optional</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"限制"</span><span class="token punctuation">,</span> <span class="token string">"不限制"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"address"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"地址 Address"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"address"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"text"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"文本 Text"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"text"</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token string">"默认值"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"input"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"输入 Input"</span><span class="token punctuation">,</span>
<span class="token literal-property property">columnIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"数据源"</span><span class="token punctuation">,</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"data_sources"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"group"</span><span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"数据"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"tree-select"</span><span class="token punctuation">,</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"category_id"</span><span class="token punctuation">,</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"test"</span><span class="token punctuation">,</span> <span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"child1"</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"test2"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaultProps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">multiple</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token literal-property property">treeNodeFilterProp</span><span class="token operator">:</span> <span class="token string">"name"</span><span class="token punctuation">,</span>
<span class="token literal-property property">fieldNames</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token string">"children"</span><span class="token punctuation">,</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"name"</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"id"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"是否分页"</span><span class="token punctuation">,</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"is_pagination_required"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"switch"</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"textarea"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"长文本 Textarea"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"textarea"</span><span class="token punctuation">,</span>
<span class="token keyword">break</span><span class="token operator">:</span> <span class="token string">"一个新的行"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"password"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"密码 Password"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"password"</span><span class="token punctuation">,</span>
<span class="token literal-property property">columnIndex</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"editor"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"富文本 Editor"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"editor"</span><span class="token punctuation">,</span>
<span class="token literal-property property">columnIndex</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"html"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"HTML"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"html"</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token string">"<p style='color: #ff0000; margin: 0;'>插播一条 HTML</p>"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"number"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"数字 Number"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"number"</span><span class="token punctuation">,</span>
<span class="token literal-property property">columnIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"radio"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"单选 Radio"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"radio"</span><span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"选项1"</span><span class="token punctuation">,</span> <span class="token string">"选项2"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token string">"选项1"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"checkbox"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"多选 Checkbox"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"Checkbox"</span><span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"选项1"</span><span class="token punctuation">,</span> <span class="token string">"选项2"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaultValue</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"选项1"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">columnIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"address"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"地址 Address"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"address"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"cascade"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"级联选择器 Cascader"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"cascade"</span><span class="token punctuation">,</span>
<span class="token literal-property property">columnIndex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"zhejiang"</span><span class="token punctuation">,</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"Zhejiang"</span><span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"hangzhou"</span><span class="token punctuation">,</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"Hangzhou"</span><span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"xihu"</span><span class="token punctuation">,</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"West Lake"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"jiangsu"</span><span class="token punctuation">,</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"Jiangsu"</span><span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"nanjing"</span><span class="token punctuation">,</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"Nanjing"</span><span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"zhonghuamen"</span><span class="token punctuation">,</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"Zhong Hua Men"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"switch"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"开关 switch"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"switch"</span><span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"开"</span><span class="token punctuation">,</span> <span class="token string">"关"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"date"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"日期 Date"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"date"</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaultProps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"time"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"时间 Time"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"time"</span><span class="token punctuation">,</span>
<span class="token literal-property property">defaultProps</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token function-variable function">onChange</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">val</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"tag"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"标签 Tag"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"tag"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"remote"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"远程检索 Remote"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"remote"</span><span class="token punctuation">,</span>
<span class="token literal-property property">url</span><span class="token operator">:</span> <span class="token string">"https://suggest.taobao.com/sug"</span><span class="token punctuation">,</span>
<span class="token literal-property property">keyword</span><span class="token operator">:</span> <span class="token string">"q"</span><span class="token punctuation">,</span>
<span class="token function-variable function">onSearch</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">res</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> res<span class="token punctuation">.</span>result<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token keyword">return</span> <span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"select"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"选择 Select"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"select"</span><span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"选项1"</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"选项2"</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"2"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">"tree-select"</span><span class="token punctuation">,</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"树型选择 TreeSelect"</span><span class="token punctuation">,</span>
<span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"tree-select"</span><span class="token punctuation">,</span>
<span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"parent"</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"parent"</span><span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"parent 1"</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"parent 1"</span><span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"parent 1-0"</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"parent 1-0"</span><span class="token punctuation">,</span>
<span class="token literal-property property">children</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"my leaf"</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"leaf1"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"your leaf"</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"leaf2"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"parent 1-1-1"</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"parent 1-1-1"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">"parent 1-1"</span><span class="token punctuation">,</span>
<span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token string">"parent 1-1"</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="开发" tabindex="-1"><a class="header-anchor" href="#开发" aria-hidden="true">#</a> 开发</h2><h3 id="如何添加一个新的表单组件" tabindex="-1"><a class="header-anchor" href="#如何添加一个新的表单组件" aria-hidden="true">#</a> 如何添加一个新的表单组件?</h3><ol><li>添加初始化值的处理 <code>form/utils/initItemDefaultValue</code></li><li>编写组件主体 <code>form/compeonnts/NewComponent.jsx</code></li><li>将组件添加到 <code>form/components/index.js</code></li><li>在 <code>FormItem</code> 中添加新的类型渲染 <code>form/components/FormItem.jsx</code></li></ol></div><!--[--><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">Last Updated: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: sinceow@163.com">sinceow</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
<script type="module" src="/docs/newbie/assets/app-e5356031.js" defer></script>
</body>
</html>