2025-06-20 12:18:00 +00:00

191 lines
48 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Select 选择器 | tmagic-editor</title>
<meta name="description" content="页面可视化平台">
<meta name="generator" content="VitePress v1.6.3">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.lMKN2Kes.css" as="style">
<link rel="preload stylesheet" href="/tmagic-editor/docs/vp-icons.css" as="style">
<script type="module" src="/tmagic-editor/docs/assets/app.CWa64OAG.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.Dzly5dNA.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.D8kQE4ce.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/form-config_fields_select.md.bmjRx7ef.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-2e27fc2e><!--[--><!--]--><!--[--><span tabindex="-1" data-v-7a8a9394></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-7a8a9394>Skip to content</a><!--]--><!----><header class="VPNav" data-v-2e27fc2e data-v-e8d2bdf3><div class="VPNavBar" data-v-e8d2bdf3 data-v-1eee9a4f><div class="wrapper" data-v-1eee9a4f><div class="container" data-v-1eee9a4f><div class="title" data-v-1eee9a4f><div class="VPNavBarTitle has-sidebar" data-v-1eee9a4f data-v-9e69c7a2><a class="title" href="/tmagic-editor/docs/" data-v-9e69c7a2><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-1f61fa10><!--]--><span data-v-9e69c7a2>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-1eee9a4f><div class="content-body" data-v-1eee9a4f><!--[--><!--]--><div class="VPNavBarSearch search" data-v-1eee9a4f><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-1eee9a4f data-v-61c67699><span id="main-nav-aria-label" class="visually-hidden" data-v-61c67699> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/guide/" tabindex="0" data-v-61c67699 data-v-a00ae531><!--[--><span data-v-a00ae531>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" tabindex="0" data-v-61c67699 data-v-a00ae531><!--[--><span data-v-a00ae531>API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tmagic-editor/docs/form-config/fields/text.html" tabindex="0" data-v-61c67699 data-v-a00ae531><!--[--><span data-v-a00ae531>表单配置</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" target="_blank" rel="noreferrer" tabindex="0" data-v-61c67699 data-v-a00ae531><!--[--><span data-v-a00ae531>更新日志</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" target="_blank" rel="noreferrer" tabindex="0" data-v-61c67699 data-v-a00ae531><!--[--><span data-v-a00ae531>Playground</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-1eee9a4f data-v-a607c9b4><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-a607c9b4 data-v-cb9e6457 data-v-d300b1bd><span class="check" data-v-d300b1bd><span class="icon" data-v-d300b1bd><!--[--><span class="vpi-sun sun" data-v-cb9e6457></span><span class="vpi-moon moon" data-v-cb9e6457></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-1eee9a4f data-v-30c88d22 data-v-a6c87319><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="noopener" data-v-a6c87319 data-v-1be90a4b><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-1eee9a4f data-v-97fba102 data-v-f08cfc08><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-f08cfc08><span class="vpi-more-horizontal icon" data-v-f08cfc08></span></button><div class="menu" data-v-f08cfc08><div class="VPMenu" data-v-f08cfc08 data-v-b1adf76f><!----><!--[--><!--[--><!----><div class="group" data-v-97fba102><div class="item appearance" data-v-97fba102><p class="label" data-v-97fba102>Appearance</p><div class="appearance-action" data-v-97fba102><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-97fba102 data-v-cb9e6457 data-v-d300b1bd><span class="check" data-v-d300b1bd><span class="icon" data-v-d300b1bd><!--[--><span class="vpi-sun sun" data-v-cb9e6457></span><span class="vpi-moon moon" data-v-cb9e6457></span><!--]--></span></span></button></div></div></div><div class="group" data-v-97fba102><div class="item social-links" data-v-97fba102><div class="VPSocialLinks social-links-list" data-v-97fba102 data-v-a6c87319><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="noopener" data-v-a6c87319 data-v-1be90a4b><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-1eee9a4f data-v-eb5ae84d><span class="container" data-v-eb5ae84d><span class="top" data-v-eb5ae84d></span><span class="middle" data-v-eb5ae84d></span><span class="bottom" data-v-eb5ae84d></span></span></button></div></div></div></div><div class="divider" data-v-1eee9a4f><div class="divider-line" data-v-1eee9a4f></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-2e27fc2e data-v-75d802d0><div class="container" data-v-75d802d0><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-75d802d0><span class="vpi-align-left menu-icon" data-v-75d802d0></span><span class="menu-text" data-v-75d802d0>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-75d802d0 data-v-bf8154bc><button data-v-bf8154bc>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-2e27fc2e data-v-dafe8ef2><div class="curtain" data-v-dafe8ef2></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-dafe8ef2><span class="visually-hidden" id="sidebar-aria-label" data-v-dafe8ef2> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-53037f60><section class="VPSidebarItem level-0 has-active" data-v-53037f60 data-v-cc7055ca><div class="item" role="button" tabindex="0" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><h2 class="text" data-v-cc7055ca>基础配置</h2><!----></div><div class="items" data-v-cc7055ca><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/text.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>Input输入框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/textarea.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>Textarea文本域</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/number.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>InputNumber计数器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/display.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>Display只读文本</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/hidden.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>Hidden隐藏域</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/link.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>Link链接</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/checkbox.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>Checkbox多选框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/radio.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>Radio单选框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/switch.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>Switch开关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/select.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>Select选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/cascader.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>Cascader级联选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/color-picker.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>ColorPicker颜色选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/date-picker.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>DatePick日期选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/datetime-picker.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>DatetimePick日期时间选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/time-picker.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>TimePick时间选择器</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-53037f60><section class="VPSidebarItem level-0" data-v-53037f60 data-v-cc7055ca><div class="item" role="button" tabindex="0" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><h2 class="text" data-v-cc7055ca>布局配置</h2><!----></div><div class="items" data-v-cc7055ca><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/layout.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>布局</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-53037f60><section class="VPSidebarItem level-0" data-v-53037f60 data-v-cc7055ca><div class="item" role="button" tabindex="0" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><h2 class="text" data-v-cc7055ca>联动配置</h2><!----></div><div class="items" data-v-cc7055ca><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/relate.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>联动</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-53037f60><section class="VPSidebarItem level-0" data-v-53037f60 data-v-cc7055ca><div class="item" role="button" tabindex="0" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><h2 class="text" data-v-cc7055ca>表单对比</h2><!----></div><div class="items" data-v-cc7055ca><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cc7055ca data-v-cc7055ca><div class="item" data-v-cc7055ca><div class="indicator" data-v-cc7055ca></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/compare.html" data-v-cc7055ca><!--[--><p class="text" data-v-cc7055ca>表单对比</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-2e27fc2e data-v-224ea2e0><div class="VPDoc has-sidebar has-aside" data-v-224ea2e0 data-v-3724a15d><!--[--><!--]--><div class="container" data-v-3724a15d><div class="aside" data-v-3724a15d><div class="aside-curtain" data-v-3724a15d></div><div class="aside-container" data-v-3724a15d><div class="aside-content" data-v-3724a15d><div class="VPDocAside" data-v-3724a15d data-v-096673de><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-096673de data-v-5e8f60aa><div class="content" data-v-5e8f60aa><div class="outline-marker" data-v-5e8f60aa></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-5e8f60aa>On this page</div><ul class="VPDocOutlineItem root" data-v-5e8f60aa data-v-b4ac6eb4><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-096673de></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-3724a15d><div class="content-container" data-v-3724a15d><!--[--><!--]--><main class="main" data-v-3724a15d><div style="position:relative;" class="vp-doc _tmagic-editor_docs_form-config_fields_select" data-v-3724a15d><div><h1 id="select-选择器" tabindex="-1">Select 选择器 <a class="header-anchor" href="#select-选择器" aria-label="Permalink to &quot;Select 选择器&quot;"></a></h1><p>当选项过多时,使用下拉菜单展示并选择内容。</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;"></a></h2><p>适用广泛的基础单选</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> type为&#39;select&#39; </p><!--]--><form class="el-form el-form--default el-form--label-right tmagic-design-form m-form" style="height:auto;"><!--[--><!--]--></form></div><div class="meta"><div class="description"><pre><code lass="language-javascript hljs">[
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项&quot;</span>,
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">&quot;请选择&quot;</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项1&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">1</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项2&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">2</span>
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay" style="z-index:2021;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-5538-62" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="有禁用选项" tabindex="-1">有禁用选项 <a class="header-anchor" href="#有禁用选项" aria-label="Permalink to &quot;有禁用选项&quot;"></a></h2><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 在 opitons 选项配置中,设定 disabled 值为 true即可禁用该选项 </p><!--]--><form class="el-form el-form--default el-form--label-right tmagic-design-form m-form" style="height:auto;"><!--[--><!--]--></form></div><div class="meta"><div class="description"><pre><code lass="language-javascript hljs">[
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项&quot;</span>,
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">&quot;请选择&quot;</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项1&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">1</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项2&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">2</span>,
<span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay" style="z-index:2022;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-5538-65" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="禁用状态" tabindex="-1">禁用状态 <a class="header-anchor" href="#禁用状态" aria-label="Permalink to &quot;禁用状态&quot;"></a></h2><p>选择器不可用状态</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 为 el-select 设置 disabled 属性,则整个选择器不可用 </p><!--]--><form class="el-form el-form--default el-form--label-right tmagic-design-form m-form" style="height:auto;"><!--[--><!--]--></form></div><div class="meta"><div class="description"><pre><code lass="language-javascript hljs">[
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项&quot;</span>,
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">&quot;请选择&quot;</span>,
<span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项1&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">1</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项2&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">2</span>
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay" style="z-index:2023;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-5538-68" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="基础多选" tabindex="-1">基础多选 <a class="header-anchor" href="#基础多选" aria-label="Permalink to &quot;基础多选&quot;"></a></h2><p>适用性较广的基础多选,用 Tag 展示已选项</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><!--]--><form class="el-form el-form--default el-form--label-right tmagic-design-form m-form" style="height:auto;"><!--[--><!--]--></form></div><div class="meta"><div class="description"><pre><code lass="language-javascript hljs">[
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项&quot;</span>,
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">&quot;请选择&quot;</span>,
<span class="hljs-attr">multiple</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项1&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">1</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项2&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">2</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项3&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">3</span>
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay" style="z-index:2024;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-5538-71" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="分组" tabindex="-1">分组 <a class="header-anchor" href="#分组" aria-label="Permalink to &quot;分组&quot;"></a></h2><p>备选项进行分组展示</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 配置group为true </p><!--]--><form class="el-form el-form--default el-form--label-right tmagic-design-form m-form" style="height:auto;"><!--[--><!--]--></form></div><div class="meta"><div class="description"><pre><code lass="language-javascript hljs">[
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项&quot;</span>,
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">&quot;请选择&quot;</span>,
<span class="hljs-attr">group</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;group1&quot;</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项1&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">1</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项2&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">2</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项3&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">3</span>
}
],
<span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>
},
{
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;group2&quot;</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项4&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">4</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项5&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">5</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项6&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">6</span>
}
]
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay" style="z-index:2025;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-5538-74" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="创建条目" tabindex="-1">创建条目 <a class="header-anchor" href="#创建条目" aria-label="Permalink to &quot;创建条目&quot;"></a></h2><p>可以创建并选中选项中不存在的条目</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><!--]--><form class="el-form el-form--default el-form--label-right tmagic-design-form m-form" style="height:auto;"><!--[--><!--]--></form></div><div class="meta"><div class="description"><pre><code lass="language-javascript hljs">[
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项&quot;</span>,
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">&quot;请选择&quot;</span>,
<span class="hljs-attr">allowCreate</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项1&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">1</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项2&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">2</span>
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay" style="z-index:2026;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-5538-77" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="远程选项" tabindex="-1">远程选项 <a class="header-anchor" href="#远程选项" aria-label="Permalink to &quot;远程选项&quot;"></a></h2><p>通过接口请求获取选项列表</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 配置remote为true然后配置option而不是options </p><!--]--><form class="el-form el-form--default el-form--label-right tmagic-design-form m-form" style="height:auto;"><!--[--><!--]--></form></div><div class="meta"><div class="description"><pre><code lass="language-javascript hljs">[
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项&quot;</span>,
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">&quot;请选择&quot;</span>,
<span class="hljs-attr">remote</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">option</span>: {
<span class="hljs-attr">url</span>: <span class="hljs-string">&quot;select/remote&quot;</span>,
<span class="hljs-attr">root</span>: <span class="hljs-string">&quot;data&quot;</span>,
<span class="hljs-attr">method</span>: <span class="hljs-string">&quot;post&quot;</span>,
<span class="hljs-attr">mode</span>: <span class="hljs-string">&quot;cors&quot;</span>,
<span class="hljs-attr">headers</span>: {
<span class="hljs-string">&quot;Content-Type&quot;</span>: <span class="hljs-string">&quot;application/json&quot;</span>
},
<span class="hljs-attr">body</span>: {
<span class="hljs-attr">query</span>: <span class="hljs-string">&quot;&quot;</span>
},
<span class="hljs-attr">json</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">text</span>: <span class="hljs-function">(<span class="hljs-params">option</span>) =&gt;</span> <span class="hljs-string">`<span class="hljs-subst">${option.name}</span>`</span>,
<span class="hljs-attr">value</span>: <span class="hljs-function">(<span class="hljs-params">option</span>) =&gt;</span> <span class="hljs-string">`<span class="hljs-subst">${option.id}</span>`</span>
}
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay" style="z-index:2027;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-5538-80" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><p>同时在 <code>src/main.ts</code> 中需要自定义实现请求</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MagicForm, {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> request</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 自定义请求实现</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>如果 Select 的绑定值为对象类型,请务必指定 valueKey 作为它的唯一性标识。</p></div><h2 id="select-attributes" tabindex="-1">Select Attributes <a class="header-anchor" href="#select-attributes" aria-label="Permalink to &quot;Select Attributes&quot;"></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>绑定值</td><td>string</td><td></td><td></td></tr><tr><td>placeholder</td><td>输入框占位文本</td><td>string</td><td></td><td></td></tr><tr><td>text</td><td>表单标签</td><td>string</td><td></td><td></td></tr><tr><td>disabled</td><td>是否禁用</td><td>boolean / <a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts" target="_blank" rel="noreferrer">FilterFunction</a></td><td></td><td>false</td></tr><tr><td>multiple</td><td>是否多选</td><td>boolean</td><td></td><td>false</td></tr><tr><td>valueKey</td><td>作为 value 唯一标识的键名,绑定值为对象类型时必填</td><td>string</td><td></td><td>value</td></tr><tr><td>allowCreate</td><td>是否允许用户创建新条目</td><td>boolean</td><td></td><td>false</td></tr><tr><td>remote</td><td>是否为远程搜索</td><td>boolean</td><td></td><td>false</td></tr><tr><td>group</td><td>是否选择分组</td><td>boolean</td><td></td><td>false</td></tr><tr><td>onChange</td><td>值变化时触发的函数</td><td><a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts" target="_blank" rel="noreferrer">OnChangeHandler </a></td><td></td><td>-</td></tr><tr><td>options</td><td>选项</td><td>Array</td><td></td><td>-</td></tr><tr><td>option</td><td>选项</td><td>Object</td><td></td><td>-</td></tr></tbody></table><h2 id="options-item" tabindex="-1">options item <a class="header-anchor" href="#options-item" aria-label="Permalink to &quot;options item&quot;"></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>text</td><td></td><td>选项的标签</td><td>string/number/object</td><td></td></tr><tr><td>value</td><td>选项的值</td><td>string</td><td></td><td></td></tr><tr><td>disabled</td><td>是否禁用</td><td>boolean</td><td></td><td>false</td></tr><tr><td>label</td><td>string</td><td></td><td></td><td></td></tr><tr><td>options</td><td>Array</td><td></td><td></td><td></td></tr></tbody></table><h2 id="option" tabindex="-1">option <a class="header-anchor" href="#option" aria-label="Permalink to &quot;option&quot;"></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>url</td><td>string</td><td></td><td></td><td></td></tr><tr><td>root</td><td>string</td><td></td><td></td><td></td></tr><tr><td>text</td><td>string / Function</td><td></td><td></td><td></td></tr><tr><td>value</td><td>string / Function</td><td></td><td></td><td></td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-3724a15d data-v-21b1887e><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-21b1887e><span class="visually-hidden" id="doc-footer-aria-label" data-v-21b1887e>Pager</span><div class="pager" data-v-21b1887e><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/form-config/fields/switch.html" data-v-21b1887e><!--[--><span class="desc" data-v-21b1887e>Previous page</span><span class="title" data-v-21b1887e>Switch开关</span><!--]--></a></div><div class="pager" data-v-21b1887e><a class="VPLink link pager-link next" href="/tmagic-editor/docs/form-config/fields/cascader.html" data-v-21b1887e><!--[--><span class="desc" data-v-21b1887e>Next page</span><span class="title" data-v-21b1887e>Cascader级联选择器</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-2e27fc2e data-v-91e4effb><div class="container" data-v-91e4effb><p class="message" data-v-91e4effb>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-91e4effb>Copyright (C) 2023 THL A29 Limited, a Tencent company.</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_editor_codeblockservicemethods.md\":\"ClqY7VZE\",\"api_editor_componentlistservicemethods.md\":\"BjjnnfcN\",\"api_editor_datasourceservicemethods.md\":\"DrhUu8L1\",\"api_editor_editorserviceevents.md\":\"spquRn08\",\"api_editor_editorservicemethods.md\":\"BVr1ez68\",\"api_editor_events.md\":\"GJ-6v-fw\",\"api_editor_eventsservicemethods.md\":\"9c-idhKF\",\"api_editor_historyserviceevents.md\":\"C1j3FNrL\",\"api_editor_historyservicemethods.md\":\"BP_I7MRX\",\"api_editor_props.md\":\"CXj8VW7P\",\"api_editor_propsserviceevents.md\":\"Dz0B4JXZ\",\"api_editor_propsservicemethods.md\":\"CJ_NvRBi\",\"api_editor_slots.md\":\"D-3bLOUN\",\"api_editor_storageservicemethods.md\":\"D8qukPYe\",\"api_editor_uiservicemethods.md\":\"Bv6jNS1s\",\"api_form_form-dialog-events.md\":\"BXIz9eUm\",\"api_form_form-dialog-methods.md\":\"CYqGAOmg\",\"api_form_form-dialog-props.md\":\"ChzB8mz7\",\"api_form_form-events.md\":\"DkcuTMhm\",\"api_form_form-methods.md\":\"CMUa01DK\",\"api_form_form-props.md\":\"CkdWUJ8V\",\"api_stage_coreevents.md\":\"CraIFiKZ\",\"api_stage_coremethods.md\":\"LNSV1Rpj\",\"api_table_events.md\":\"Cwr1d31N\",\"api_table_methods.md\":\"_73pycDT\",\"api_table_props.md\":\"fVyiJNMo\",\"form-config_compare.md\":\"-RsWmaIJ\",\"form-config_fields_cascader.md\":\"UibWQyqW\",\"form-config_fields_checkbox.md\":\"Ct3eqs5u\",\"form-config_fields_color-picker.md\":\"BwX-p0Lj\",\"form-config_fields_date-picker.md\":\"CkzdTR7n\",\"form-config_fields_datetime-picker.md\":\"BelCIMiI\",\"form-config_fields_display.md\":\"YhTUrY5N\",\"form-config_fields_hidden.md\":\"D4e3V4lt\",\"form-config_fields_link.md\":\"wtj8BElO\",\"form-config_fields_number.md\":\"DyE8ZMVv\",\"form-config_fields_radio.md\":\"DiPCqCy8\",\"form-config_fields_select.md\":\"bmjRx7ef\",\"form-config_fields_switch.md\":\"CUe2JBDQ\",\"form-config_fields_text.md\":\"BvhlkRTF\",\"form-config_fields_textarea.md\":\"D6auPE2J\",\"form-config_fields_time-picker.md\":\"BIDp5tPz\",\"form-config_layout.md\":\"BI3kMtj2\",\"form-config_relate.md\":\"DPAT11ms\",\"guide_advanced_code-block.md\":\"CEghZb4w\",\"guide_advanced_coupling.md\":\"CbwjpmSS\",\"guide_advanced_data-source.md\":\"D1eOXpTy\",\"guide_advanced_js-schema.md\":\"Czn7QzS4\",\"guide_advanced_layout.md\":\"CY2LiPJM\",\"guide_advanced_page.md\":\"B7qVzBDZ\",\"guide_advanced_tmagic-form.md\":\"DuCsNujZ\",\"guide_advanced_tmagic-ui.md\":\"DAvfkziV\",\"guide_component.md\":\"f24GDBqd\",\"guide_conception.md\":\"B6WwYhK4\",\"guide_editor-expand.md\":\"C2eq5fij\",\"guide_index.md\":\"D7FTyvtM\",\"guide_introduction.md\":\"0zivEtmP\",\"guide_migration.md\":\"Hu6v1yB1\",\"guide_publish.md\":\"B0J9y2WB\",\"guide_runtime.md\":\"oIKYDNRS\",\"guide_tutorial_hello-world.md\":\"B2NbBdBN\",\"guide_tutorial_index.md\":\"DKdj5fTF\",\"guide_tutorial_render.md\":\"B9LC5Lsc\",\"guide_tutorial_runtime.md\":\"yakt7gYu\",\"index.md\":\"D_nOcYGz\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"tmagic-editor\",\"description\":\"页面可视化平台\",\"base\":\"/tmagic-editor/docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"./favicon.png\",\"search\":{\"provider\":\"local\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/Tencent/tmagic-editor\"}],\"footer\":{\"message\":\"Powered by 腾讯视频会员平台技术中心\",\"copyright\":\"Copyright (C) 2023 THL A29 Limited, a Tencent company.\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"API\",\"link\":\"/api/editor/props\",\"activeMatch\":\"/api/\"},{\"text\":\"表单配置\",\"link\":\"/form-config/fields/text\",\"activeMatch\":\"/form-config/\"},{\"text\":\"更新日志\",\"link\":\"https://github.com/Tencent/tmagic-editor/releases\"},{\"text\":\"Playground\",\"link\":\"https://tencent.github.io/tmagic-editor/playground/index.html\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"文档\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction.md\"},{\"text\":\"快速开始\",\"link\":\"/guide/\"},{\"text\":\"基础概念\",\"link\":\"/guide/conception.md\"},{\"text\":\"页面发布\",\"link\":\"/guide/publish.md\"},{\"text\":\"RUNTIME\",\"link\":\"/guide/runtime.md\"},{\"text\":\"组件开发\",\"link\":\"/guide/component.md\"},{\"text\":\"编辑器扩展\",\"link\":\"/guide/editor-expand.md\"},{\"text\":\"升级到1.5.x\",\"link\":\"/guide/migration.md\"}]},{\"text\":\"进阶指南\",\"items\":[{\"text\":\"JS Schema\",\"link\":\"/guide/advanced/js-schema.md\"},{\"text\":\"布局原理\",\"link\":\"/guide/advanced/layout.md\"},{\"text\":\"页面渲染\",\"link\":\"/guide/advanced/page.md\"},{\"text\":\"联动原理\",\"link\":\"/guide/advanced/coupling.md\"},{\"text\":\"代码块\",\"link\":\"/guide/advanced/code-block.md\"},{\"text\":\"数据源\",\"link\":\"/guide/advanced/data-source.md\"},{\"text\":\"@tmagic/ui\",\"link\":\"/guide/advanced/tmagic-ui.md\"},{\"text\":\"@tmagic/form\",\"link\":\"/guide/advanced/tmagic-form.md\"}]},{\"text\":\"教程\",\"items\":[{\"text\":\"写在前面\",\"link\":\"/guide/tutorial/\"},{\"text\":\"1.Hello World\",\"link\":\"/guide/tutorial/hello-world.md\"},{\"text\":\"2.Runtime\",\"link\":\"/guide/tutorial/runtime.md\"},{\"text\":\"3.DSL解析渲染\",\"link\":\"/guide/tutorial/render.md\"}]}],\"/api/\":[{\"text\":\"编辑器\",\"items\":[{\"text\":\"Editor组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/editor/props.md\"},{\"text\":\"slots\",\"link\":\"/api/editor/slots.md\"},{\"text\":\"events\",\"link\":\"/api/editor/events.md\"}]},{\"text\":\"editorService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/editorServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/editorServiceEvents.md\"}]},{\"text\":\"propsService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/propsServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/propsServiceEvents.md\"}]},{\"text\":\"historyService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/historyServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/historyServiceEvents.md\"}]},{\"text\":\"eventsService\",\"link\":\"/api/editor/eventsServiceMethods.md\"},{\"text\":\"uiService\",\"link\":\"/api/editor/uiServiceMethods.md\"},{\"text\":\"codeBlockService\",\"link\":\"/api/editor/codeBlockServiceMethods.md\"},{\"text\":\"componentListService\",\"link\":\"/api/editor/componentListServiceMethods.md\"},{\"text\":\"storageService\",\"link\":\"/api/editor/storageServiceMethods.md\"}]},{\"text\":\"表单\",\"items\":[{\"text\":\"Form组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/form/form-props\"},{\"text\":\"methods\",\"link\":\"/api/form/form-methods\"},{\"text\":\"events\",\"link\":\"/api/form/form-events\"}]},{\"text\":\"FormDialog组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/form/form-dialog-props\"},{\"text\":\"methods\",\"link\":\"/api/form/form-dialog-methods\"},{\"text\":\"events\",\"link\":\"/api/form/form-dialog-events\"}]}]},{\"text\":\"表格\",\"items\":[{\"text\":\"Table组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/table/props\"},{\"text\":\"methods\",\"link\":\"/api/table/methods\"},{\"text\":\"events\",\"link\":\"/api/table/events\"}]}]},{\"text\":\"stage\",\"items\":[{\"text\":\"StageCore\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/stage/coreMethods\"},{\"text\":\"事件\",\"link\":\"/api/stage/coreEvents\"}]}]}],\"/form-config/\":[{\"text\":\"基础配置\",\"items\":[{\"text\":\"Input输入框\",\"link\":\"/form-config/fields/text.md\"},{\"text\":\"Textarea文本域\",\"link\":\"/form-config/fields/textarea.md\"},{\"text\":\"InputNumber计数器\",\"link\":\"/form-config/fields/number.md\"},{\"text\":\"Display只读文本\",\"link\":\"/form-config/fields/display.md\"},{\"text\":\"Hidden隐藏域\",\"link\":\"/form-config/fields/hidden.md\"},{\"text\":\"Link链接\",\"link\":\"/form-config/fields/link.md\"},{\"text\":\"Checkbox多选框\",\"link\":\"/form-config/fields/checkbox.md\"},{\"text\":\"Radio单选框\",\"link\":\"/form-config/fields/radio.md\"},{\"text\":\"Switch开关\",\"link\":\"/form-config/fields/switch.md\"},{\"text\":\"Select选择器\",\"link\":\"/form-config/fields/select.md\"},{\"text\":\"Cascader级联选择器\",\"link\":\"/form-config/fields/cascader.md\"},{\"text\":\"ColorPicker颜色选择器\",\"link\":\"/form-config/fields/color-picker.md\"},{\"text\":\"DatePick日期选择器\",\"link\":\"/form-config/fields/date-picker.md\"},{\"text\":\"DatetimePick日期时间选择器\",\"link\":\"/form-config/fields/datetime-picker.md\"},{\"text\":\"TimePick时间选择器\",\"link\":\"/form-config/fields/time-picker.md\"}]},{\"text\":\"布局配置\",\"items\":[{\"text\":\"布局\",\"link\":\"/form-config/layout.md\"}]},{\"text\":\"联动配置\",\"items\":[{\"text\":\"联动\",\"link\":\"/form-config/relate.md\"}]},{\"text\":\"表单对比\",\"items\":[{\"text\":\"表单对比\",\"link\":\"/form-config/compare.md\"}]}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>