jobsys-newbie
Version:
Enhanced component based on ant-design-vue
341 lines • 91.7 kB
JavaScript
import{N as c}from"./NewbieForm-c753634a.js";import{_ as i,e as u,o as d,c as k,b as n,f as t,d as s,w as l,u as v,a as p}from"./app-e5356031.js";import"./index-16cac109.js";import"./compact-item-45f3d050.js";import"./CloseCircleFilled-7d1a9da0.js";import"./ExclamationCircleFilled-71949edd.js";import"./FormItemContext-af84826a.js";import"./useFlexGapSupport-e1acb751.js";import"./styleChecker-8bbc1161.js";import"./NewbieEditor-c8effb0f.js";import"./NewbieProvider-45d73778.js";import"./network-3dbc60ad.js";import"./isString-dfb8fe43.js";import"./index-b4cb0b96.js";import"./isUndefined-aa0326a0.js";import"./style-3dc3bceb.js";import"./isNull-4293306c.js";import"./utils-584bcbdb.js";import"./useRefs-c46ab4e4.js";import"./LeftOutlined-8f1bdfd3.js";import"./pickAttrs-024293c9.js";import"./vnode-8424d922.js";import"./index-3761f557.js";import"./statusUtils-41ec9e8f.js";import"./omit-dc457db2.js";import"./index-2bac9f50.js";import"./index-54e202a8.js";import"./EyeOutlined-9657ac6a.js";import"./NewbieAddress-a35b35ae.js";import"./NewbieUploader-0b6b5515.js";import"./NewbieButton-00521913.js";import"./index-4cb0cbae.js";import"./NewbieModal-bbee8112.js";import"./index-a79ee2a0.js";const m=n("h1",{id:"newbieform",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#newbieform","aria-hidden":"true"},"#"),t(" NewbieForm")],-1),b=n("blockquote",null,[n("p",null,"表单组件")],-1),y=n("p",null,"通过 JSON 配置生成表单，并集成表单验证，获取数据，提交数据等功能。",-1),h=n("p",null,"Version: 1.0.0",-1),g=n("h2",{id:"props",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#props","aria-hidden":"true"},"#"),t(" Props")],-1),q=n("thead",null,[n("tr",null,[n("th",null,"Prop name"),n("th",null,"Description"),n("th",null,"Type"),n("th",null,"Values"),n("th",null,"Default")])],-1),_=n("tr",null,[n("td",null,"title"),n("td",null,"表单标题，Card 模式下生效"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),f=n("tr",null,[n("td",null,"data"),n("td",null,"表单数据，用于初始化表单，并会进行 Watch"),n("td",null,"object|string"),n("td",null,"-"),n("td",null,'""')],-1),x=n("tr",null,[n("td",null,"autoLoad"),n("td",null,[t("是否自动加载"),n("br"),n("code",null,"true"),t(" 表示自动加载数据"),n("br"),n("code",null,"Array,String"),t(" 表示会对 "),n("code",null,"extraData"),t(" 数据中的相关字段进行非空验证，不为空再加载数据")]),n("td",null,"boolean|array|string"),n("td",null,"-"),n("td",null,"true")],-1),w=n("tr",null,[n("td",null,"fetchUrl"),n("td",null,"获取表单数据的 URL"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),F=n("tr",null,[n("td",null,"extraData"),n("td",null,"额外的数据，在提交时会合并到表单数据中并一起提交"),n("td",null,"object"),n("td",null,"-"),n("td",null,"{}")],-1),j=n("tr",null,[n("td",null,"submitUrl"),n("td",null,"提交数据 URL"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),I=n("tr",null,[n("td",null,"submitButtonText"),n("td",null,"提交按钮文字"),n("td",null,"string"),n("td",null,"-"),n("td",null,'"保存"')],-1),N=n("tr",null,[n("td",null,"submitConfirmText"),n("td",null,"提交确认提示内容"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),C=n("tr",null,[n("td",null,"closable"),n("td",null,"是否显示关闭按钮"),n("td",null,"boolean"),n("td",null,"-"),n("td",null,"true")],-1),P=n("tr",null,[n("td",null,"closeButtonText"),n("td",null,"关闭按钮文字"),n("td",null,"string"),n("td",null,"-"),n("td",null,'"关闭"')],-1),T=n("tr",null,[n("td",null,"closeButtonFirst"),n("td",null,[t("是否将"),n("code",null,"关闭"),t("按钮放在"),n("code",null,"提交"),t("按钮前面")]),n("td",null,"boolean"),n("td",null,"-"),n("td",null,"false")],-1),D=n("tr",null,[n("td",null,"hideButtons"),n("td",null,"是否隐藏按钮"),n("td",null,"boolean"),n("td",null,"-"),n("td",null,"false")],-1),E=n("tr",null,[n("td",null,"disabled"),n("td",null,"是否禁用表单"),n("td",null,"boolean"),n("td",null,"-"),n("td",null,"false")],-1),S=n("tr",null,[n("td",null,"readonly"),n("td",null,"是否只读"),n("td",null,"boolean"),n("td",null,"-"),n("td",null,"false")],-1),V=n("tr",null,[n("td",null,"submitDisabled"),n("td",null,"是否禁用提交按钮"),n("td",null,"boolean"),n("td",null,"-"),n("td",null,"false")],-1),A=n("td",null,"dividerProps",-1),B={href:"https://www.antdv.com/components/divider-cn",target:"_blank",rel:"noopener noreferrer"},L=n("td",null,"object",-1),O=n("td",null,"-",-1),z=n("td",null,"{}",-1),M=n("tr",null,[n("td",null,"columns"),n("td",null,[t("表单布局，默认为单列，当为多列时，按 24 栅格布局"),n("br"),t("如：columns: [12, 12]")]),n("td",null,"array"),n("td",null,"-"),n("td",null,"[24]")],-1),R=n("tr",null,[n("td",null,"fixedColumns"),n("td",null,"如有 fixed 列，默认 fixed 列的宽度为 6，可自定义"),n("td",null,"number"),n("td",null,"-"),n("td",null,"6")],-1),H=n("tr",null,[n("td",null,"cardSize"),n("td",null,"Card 的大小"),n("td",null,"string"),n("td",null,[n("code",null,"small"),t(", "),n("code",null,"default")]),n("td",null,'"small"')],-1),Q=n("tr",null,[n("td",null,"cardWrapper"),n("td",null,[t("是否用 "),n("code",null,"Card"),t(" 包裹")]),n("td",null,"boolean"),n("td",null,"-"),n("td",null,"true")],-1),U=n("tr",null,[n("td",null,"form"),n("td",null,[t("表单配置，"),n("a",{href:"#formitemconfig-%E8%A1%A8%E5%8D%95%E9%A1%B9%E9%85%8D%E7%BD%AE"},"见表单项配置")]),n("td",null,"array|func"),n("td",null,"-"),n("td",null,[t("function() {"),n("br"),t(" return []"),n("br"),t("}")])],-1),W=n("tr",null,[n("td",null,"afterFetched"),n("td",null,[t("fetch 返回数据处理函数"),n("br"),n("code",null,"@return"),t(" {Object} 返回处理后的数据，将用于初始化表单")]),n("td",null,"func"),n("td",null,"-"),n("td",null,"null")],-1),Y=n("tr",null,[n("td",null,"beforeSubmit"),n("td",null,[n("br"),n("code",null,"@typedef"),t(" {Object} ExposedFormData"),n("br"),n("code",null,"@property"),t(" Format 后的表单数据"),n("br"),n("code",null,"@property"),t(" 原生的表单数据"),n("br"),n("code",null,"@params"),t(" undefined"),n("br"),n("code",null,"@return"),t(" {Boolean|Object} return false 会阻止提交操作，return Object 会替换提交的数据")]),n("td",null,"func"),n("td",null,"-"),n("td",null,"null")],-1),Z=n("tr",null,[n("td",null,"close"),n("td",null,"点击关闭时的动作"),n("td",null,"func"),n("td",null,"-"),n("td",null,"null")],-1),J=n("tr",null,[n("td",null,"afterSubmit"),n("td",null,"提交成功后的回调"),n("td",null,"func"),n("td",null,"-"),n("td",null,"null")],-1),G=n("td",null,"formProps",-1),K={href:"https://www.antdv.com/components/form-cn#api",target:"_blank",rel:"noopener noreferrer"},X=n("td",null,"object",-1),$=n("td",null,"-",-1),nn=n("td",null,"{}",-1),tn=p('<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>',5),sn=n("thead",null,[n("tr",null,[n("th",null,"Prop name"),n("th",null,"Description"),n("th",null,"Type"),n("th",null,"Values"),n("th",null,"Default")])],-1),an=n("tr",null,[n("td",null,"key"),n("td",null,"数据库关联名称"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),en=n("tr",null,[n("td",null,"title"),n("td",null,"显示的 Label 名字"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),pn=n("tr",null,[n("td",null,"type"),n("td",null,"支持的组件类型"),n("td",null,"string"),n("td",null,[n("a",{href:"#formitem-type-%E6%94%AF%E6%8C%81%E7%BB%84%E4%BB%B6%E7%B1%BB%E5%9E%8B"},"见下表")]),n("td",null,'"input"')],-1),on=n("tr",null,[n("td",null,"options"),n("td",null,"组件选项"),n("td",null,"array | func"),n("td",null,"-"),n("td",null,"[]")],-1),ln=n("tr",null,[n("td",null,"placeholder"),n("td",null,"组件里的提示"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),rn=n("tr",null,[n("td",null,"help"),n("td",null,"form item 里的提示"),n("td",null,"string | func"),n("td",null,"-"),n("td",null,'""')],-1),cn=n("tr",null,[n("td",null,"width"),n("td",null,"组件宽度"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),un=n("tr",null,[n("td",null,"style"),n("td",null,"样式"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),dn=n("tr",null,[n("td",null,"class"),n("td",null,"类名"),n("td",null,"string"),n("td",null,"-"),n("td",null,'""')],-1),kn=n("tr",null,[n("td",null,"init"),n("td",null,[t("初始化函数，用于初始化表单项的值: "),n("code",null,"init({ submitForm, value })")]),n("td",null,"func"),n("td",null,"-"),n("td",null,"-")],-1),vn=n("tr",null,[n("td",null,"beforeSubmit"),n("td",null,[t("在提交前修改表单项的值，该函数会在 NewbieForm 的 beforeSubmit 之前调用: "),n("code",null,"beforeSubmit({ submitForm, value })")]),n("td",null,"func"),n("td",null,"-"),n("td",null,"-")],-1),mn=n("tr",null,[n("td",null,"readonly"),n("td",null,"是否只读"),n("td",null,"boolean"),n("td",null,"-"),n("td",null,"false")],-1),bn=n("tr",null,[n("td",null,"required"),n("td",null,[t("是否必填, 函数用法见下方"),n("a",{href:"#faq"},"FAQ")]),n("td",null,"boolean | func"),n("td",null,"-"),n("td",null,"false")],-1),yn=n("tr",null,[n("td",null,"disabled"),n("td",null,[t("组件不可编辑状态, 函数用法见下方"),n("a",{href:"#faq"},"FAQ")]),n("td",null,"boolean | func"),n("td",null,"-"),n("td",null,"false")],-1),hn=n("tr",null,[n("td",null,"hidden"),n("td",null,[t("组件是否隐藏, 函数用法见下方"),n("a",{href:"#faq"},"FAQ")]),n("td",null,"boolean | func"),n("td",null,"-"),n("td",null,"false")],-1),gn=n("tr",null,[n("td",null,"optional"),n("td",null,[t("表单项是否开启后才可以输入, 用法见下方"),n("a",{href:"#faq"},"FAQ")]),n("td",null,"boolean | Array"),n("td",null,"-"),n("td",null,"false")],-1),qn=n("tr",null,[n("td",null,"match"),n("td",null,[t("支持根据条件返回不同的配置进行动态渲染, 用法见下方"),n("a",{href:"#faq"},"FAQ")]),n("td",null,"Function"),n("td",null,"-"),n("td",null,"-")],-1),_n=n("tr",null,[n("td",null,"columnIndex"),n("td",null,"渲染在哪一列"),n("td",null,"number | string"),n("td",null,"-"),n("td")],-1),fn=n("tr",null,[n("td",null,"break"),n("td",null,"是否新起一行，如果为 String 则以 Divider 分割"),n("td",null,"boolean | string"),n("td",null,"-"),n("td",null,"false")],-1),xn=n("tr",null,[n("td",null,"defaultProps"),n("td",null,"组件的配置"),n("td",null,"object"),n("td",null,"-"),n("td",null,"{}")],-1),wn=n("td",null,"formItemProps",-1),Fn={href:"https://www.antdv.com/components/form-cn#form-item",target:"_blank",rel:"noopener noreferrer"},jn=n("code",null,"slots",-1),In=n("td",null,"object",-1),Nn=n("td",null,"-",-1),Cn=n("td",null,"{}",-1),Pn=n("tr",null,[n("td",null,"defaultValue"),n("td",null,"默认值"),n("td",null,"any"),n("td",null,"-"),n("td",null,'""')],-1),Tn=n("tr",null,[n("td",null,"children"),n("td",null,"子组件配置"),n("td",null,"array<FormItemConfig>"),n("td",null,"-"),n("td",null,"-")],-1),Dn=n("td",null,"cellProps",-1),En={href:"https://www.antdv.com/components/table-cn#column",target:"_blank",rel:"noopener noreferrer"},Sn=n("td",null,"object",-1),Vn=n("td",null,"-",-1),An=n("td",null,"-",-1),Bn=n("tr",null,[n("td",null,"customRender"),n("td",null,"自定义渲染函数"),n("td",null,"func"),n("td",null,"-"),n("td",null,"-")],-1),Ln=p('<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>',7),On=n("thead",null,[n("tr",null,[n("th",null,"名称"),n("th",null,"参数"),n("th",null,"说明")])],-1),zn=n("td",null,"format",-1),Mn=n("td",null,"Object",-1),Rn={href:"/hooks.html#form-useformformat-form-format-%E2%87%92-object",target:"_blank",rel:"noopener noreferrer"},Hn=n("tr",null,[n("td",null,"afterFetched(response) => Object"),n("td",null,"Function"),n("td",null,[t("表单数据获取数据后的回调函数, 参数为请求的 "),n("code",null,"response")])],-1),Qn=p(`<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>`,23),Un=n("code",null,"FormItem",-1),Wn=n("code",null,"fromItemProps",-1),Yn={href:"https://www.antdv.com/components/form-cn#form-item",target:"_blank",rel:"noopener noreferrer"},Zn=n("code",null,"slots",-1),Jn=n("code",null,"FormItem",-1),Gn=n("code",null,"slot",-1),Kn=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>`,3),Xn=n("p",null,"Prepend",-1),$n=n("p",null,"Append",-1),nt=p(`<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>`,4),tt={__name:"NewbieForm.html",setup(st){const r=()=>[{key:"limit_num",title:"限制人数 Optional",type:"number",optional:["限制","不限制"]},{key:"address",title:"地址 Address",type:"address"},{key:"text",title:"文本 Text",type:"text",defaultValue:"默认值"},{key:"input",title:"输入 Input",columnIndex:1},{title:"数据源",key:"data_sources",type:"group",children:[{title:"数据",type:"tree-select",key:"category_id",width:300,options:[{id:1,name:"test",children:[{id:2,name:"child1"}]},{id:3,name:"test2"}],defaultProps:{multiple:!0,treeNodeFilterProp:"name",fieldNames:{children:"children",label:"name",value:"id"}}},{title:"是否分页",key:"is_pagination_required",type:"switch",width:200,defaultValue:!0}]},{key:"textarea",title:"长文本 Textarea",type:"textarea",break:"一个新的行"},{key:"password",title:"密码 Password",type:"password",columnIndex:3},{key:"editor",title:"富文本 Editor",type:"editor",columnIndex:[0,1]},{key:"html",title:"HTML",type:"html",defaultValue:"<p style='color: #ff0000; margin: 0;'>插播一条 HTML</p>"},{key:"number",title:"数字 Number",type:"number",columnIndex:1},{key:"radio",title:"单选 Radio",type:"radio",options:["选项1","选项2"],defaultValue:"选项1"},{key:"checkbox",title:"多选 Checkbox",type:"Checkbox",options:["选项1","选项2"],defaultValue:["选项1"],columnIndex:1},{key:"address",title:"地址 Address",type:"address"},{key:"cascade",title:"级联选择器 Cascader",type:"cascade",columnIndex:1,options:[{value:"zhejiang",label:"Zhejiang",children:[{value:"hangzhou",label:"Hangzhou",children:[{value:"xihu",label:"West Lake"}]}]},{value:"jiangsu",label:"Jiangsu",children:[{value:"nanjing",label:"Nanjing",children:[{value:"zhonghuamen",label:"Zhong Hua Men"}]}]}]},{key:"switch",title:"开关 switch",type:"switch",options:["开","关"]},{key:"date",title:"日期 Date",type:"date",defaultProps:{onChange:a=>{console.log(a)}}},{key:"time",title:"时间 Time",type:"time",defaultProps:{onChange:a=>{console.log(a)}}},{key:"tag",title:"标签 Tag",type:"tag"},{key:"remote",title:"远程检索 Remote",type:"remote",url:"https://suggest.taobao.com/sug",keyword:"q",onSearch:a=>a.result.map(o=>({label:o[0],value:o[1]}))},{key:"select",title:"选择 Select",type:"select",options:[{label:"选项1",value:"1"},{label:"选项2",value:"2"}]},{key:"tree-select",title:"树型选择 TreeSelect",type:"tree-select",options:[{label:"parent",value:"parent",children:[{label:"parent 1",value:"parent 1",children:[{label:"parent 1-0",value:"parent 1-0",children:[{label:"my leaf",value:"leaf1"},{label:"your leaf",value:"leaf2"}]},{label:"parent 1-1-1",value:"parent 1-1-1"}]},{label:"parent 1-1",value:"parent 1-1"}]}]}];return(a,o)=>{const e=u("ExternalLinkIcon");return d(),k("div",null,[m,b,y,h,g,n("table",null,[q,n("tbody",null,[_,f,x,w,F,j,I,N,C,P,T,D,E,S,V,n("tr",null,[A,n("td",null,[t("当有分割线时，"),n("a",B,[t("原生分割线配置"),s(e)])]),L,O,z]),M,R,H,Q,U,W,Y,Z,J,n("tr",null,[G,n("td",null,[t("原生的 "),n("a",K,[t("From"),s(e)]),t(" 配置")]),X,$,nn])])]),tn,n("table",null,[sn,n("tbody",null,[an,en,pn,on,ln,rn,cn,un,dn,kn,vn,mn,bn,yn,hn,gn,qn,_n,fn,xn,n("tr",null,[wn,n("td",null,[t("同原生 "),n("a",Fn,[t("FormItem"),s(e)]),t(" 配置, 并可以直接使用 "),jn,t(" 属性定义 FormItem 的 slot")]),In,Nn,Cn]),Pn,Tn,n("tr",null,[Dn,n("td",null,[t("子组件渲染的"),n("a",En,[t("单元格配置"),s(e)])]),Sn,Vn,An]),Bn])]),Ln,n("table",null,[On,n("tbody",null,[n("tr",null,[zn,Mn,n("td",null,[t("用于格式化提示的表单数据, 同"),n("a",Rn,[t("useFormFormat"),s(e)])])]),Hn])]),Qn,n("p",null,[Un,t(" 中的 "),Wn,t(" 与原生 "),n("a",Yn,[t("FormItem"),s(e)]),t(" 的配置相同, 并支持直接传入 "),Zn,t(" 对象, 用于自定义 "),Jn,t(" 的 "),Gn,t("，示例如下：")]),Kn,s(v(c),{form:r(),columns:[24],"card-wrapper":"",title:"测试表单",closable:!1},{prepend:l(()=>[Xn]),append:l(()=>[$n]),_:1},8,["form"]),nt])}}},Bt=i(tt,[["__file","NewbieForm.html.vue"]]);export{Bt as default};