2026-10-19 11:33:16 +00:00

317 lines
99 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 v2.0.0-alpha.20">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.xjqBjHKn.css" as="style">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/vp-icons.139f4833.css" as="style">
<script type="module" src="/tmagic-editor/docs/assets/chunks/metadata.90e584c8.js"></script>
<script type="module" src="/tmagic-editor/docs/assets/app.ek4dLOl2.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.q5rAVC0E.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.CGxorDDM.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.DDIL1KmX.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/form-config_fields_select.md.Gr_dZTLZ.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t: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><!--teleport start anchor--><!--teleport anchor--><!--teleport start anchor--><!--teleport anchor--><!--teleport start anchor--><!--teleport anchor--><!--teleport start anchor--><!--teleport anchor--><!--teleport start anchor--><!--teleport anchor--><!--teleport start anchor--><!--teleport anchor--><!--teleport start anchor--><!--teleport anchor-->
<div id="app"><div class="Layout" data-v-440dbbdf><!--[--><!--]--><!--[--><span tabindex="-1" data-v-c779725a></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-c779725a>Skip to content</a><!--]--><!----><header class="VPNav" data-v-440dbbdf data-v-156bfb0e><div class="VPNavBar has-sidebar top" data-v-156bfb0e data-v-5d7186a2><div class="wrapper" data-v-5d7186a2><div class="container" data-v-5d7186a2><div class="title" data-v-5d7186a2><div class="VPNavBarTitle has-sidebar" data-v-5d7186a2 data-v-510de9a3><a class="title" href="/tmagic-editor/docs/" title="tmagic-editor" data-v-510de9a3><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-784e8c02><!--]--><span data-v-510de9a3>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-5d7186a2><div class="content-body" data-v-5d7186a2><!--[--><!--]--><div class="VPNavBarSearch search" data-v-5d7186a2 data-v-4b977777><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-4b977777 data-v-75cee97a><span class="vpi-search" aria-hidden="true" data-v-75cee97a></span><span class="text" data-v-75cee97a>Search</span><span class="keys" aria-hidden="true" data-v-75cee97a><kbd class="key-mod" data-v-75cee97a></kbd><kbd class="key-k" data-v-75cee97a></kbd></span></button><!----><!--]--></div><nav aria-label="Main Navigation" class="VPNavMenu VPNavBarMenu menu" data-v-5d7186a2 data-v-1a26812e><ul class="list" data-v-1a26812e><!--[--><li class="" data-v-1a26812e><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/guide/" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>文档</span><!--]--></a></li><li class="" data-v-1a26812e><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>Editor API</span><!--]--></a></li><li class="" data-v-1a26812e><a class="VPLink link VPNavMenuLink VPNavBarMenuLink" href="/tmagic-editor/docs/runtime-api/core/app.html" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>Runtime API</span><!--]--></a></li><li class="" data-v-1a26812e><a class="VPLink link VPNavMenuLink VPNavBarMenuLink active" href="/tmagic-editor/docs/form-config/fields/text.html" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>表单配置</span><!--]--></a></li><li class="" data-v-1a26812e><a class="VPLink link vp-external-link-icon VPNavMenuLink VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" target="_blank" rel="noreferrer" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>更新日志</span><!--]--></a></li><li class="" data-v-1a26812e><a class="VPLink link vp-external-link-icon VPNavMenuLink VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" target="_blank" rel="noreferrer" data-v-1a26812e data-v-cb5ee893><!--[--><span data-v-cb5ee893>Playground</span><!--]--></a></li><!--]--></ul></nav><!----><div class="VPNavAppearance VPNavBarAppearance appearance" data-v-5d7186a2 data-v-680326c7><!----><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-label="Appearance" aria-checked="false" data-v-680326c7 data-v-ca894290 data-v-ef764d20><span class="check" data-v-ef764d20><span class="icon" data-v-ef764d20><!--[--><span class="vpi-sun sun" aria-hidden="true" data-v-ca894290></span><span class="vpi-moon moon" aria-hidden="true" data-v-ca894290></span><!--]--></span></span></button></div><ul class="VPSocialLinks VPNavSocialLinks VPNavBarSocialLinks social-links" data-v-5d7186a2 data-v-84222131 data-v-72c755c2><!--[--><li data-v-72c755c2><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-72c755c2 data-v-121898e4><span class="vpi-simple-icons-github" data-v-121898e4 data-v-0ee3818a></span></a></li><!--]--></ul><!----><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="Menu" aria-expanded="false" data-v-5d7186a2 data-v-4d4764b1><span class="container" aria-hidden="true" data-v-4d4764b1><span class="top" data-v-4d4764b1></span><span class="middle" data-v-4d4764b1></span><span class="bottom" data-v-4d4764b1></span></span></button></div></div></div></div><div class="divider" data-v-5d7186a2><div class="divider-line" data-v-5d7186a2></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-440dbbdf data-v-9af4a020><div class="container" data-v-9af4a020><button type="button" class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-9af4a020><span class="vpi-align-left menu-icon" aria-hidden="true" data-v-9af4a020></span><span class="menu-text" data-v-9af4a020>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-allow-mismatch="style" data-v-9af4a020 data-v-67af6a22><button type="button" data-v-67af6a22>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-440dbbdf data-v-661d8e09><div class="curtain" data-v-661d8e09></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-661d8e09><span class="visually-hidden" id="sidebar-aria-label" data-v-661d8e09> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-e65c073a><section class="VPSidebarItem level-0 has-active" data-v-e65c073a data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><h2 class="text" data-v-cab05059>基础配置</h2><!----></div><ul class="items" data-v-cab05059><li data-v-cab05059><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/text.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Input输入框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/textarea.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Textarea文本域</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/number.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>InputNumber计数器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/number-range.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>NumberRange数字范围</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/display.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Display只读文本</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/hidden.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Hidden隐藏域</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/link.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Link链接</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/checkbox.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Checkbox多选框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/radio.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Radio单选框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/switch.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Switch开关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/select.html" aria-current="page" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Select选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/cascader.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Cascader级联选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/color-picker.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>ColorPicker颜色选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/date-picker.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DatePick日期选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/daterange-picker.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DateRangePick日期范围选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/datetime-picker.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DatetimePick日期时间选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/time-picker.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>TimePick时间选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/timerange-picker.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>TimeRangePick时间范围选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/dynamic-field.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DynamicField动态表单</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-e65c073a><section class="VPSidebarItem level-0" data-v-e65c073a data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><h2 class="text" data-v-cab05059>编辑器中可用配置</h2><!----></div><ul class="items" data-v-cab05059><li data-v-cab05059><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>Code代码编辑器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code-link.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>CodeLink代码链接</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code-select.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>CodeSelect代码块选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code-select-col.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>CodeSelectCol代码块选择列</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-select.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DataSourceSelect数据源选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-field-select.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DataSourceFieldSelect数据源字段选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-method-select.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DataSourceMethodSelect数据源方法选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-fields.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DataSourceFields数据源字段配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-input.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DataSourceInput数据源输入框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-methods.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DataSourceMethods数据源方法配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-mocks.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DataSourceMocks数据源Mock配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/ui-select.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>UISelect组件选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/key-value.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>KeyValue键值对</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/page-fragment-select.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>PageFragmentSelect页面片选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/event-select.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>EventSelect事件选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/display-conds.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>DisplayConds显示条件配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/cond-op-select.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>CondOpSelect条件操作选择器</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-e65c073a><section class="VPSidebarItem level-0" data-v-e65c073a data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><h2 class="text" data-v-cab05059>布局配置</h2><!----></div><ul class="items" data-v-cab05059><li data-v-cab05059><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/layout.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>布局</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-e65c073a><section class="VPSidebarItem level-0" data-v-e65c073a data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><h2 class="text" data-v-cab05059>联动配置</h2><!----></div><ul class="items" data-v-cab05059><li data-v-cab05059><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/relate.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>联动</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-e65c073a><section class="VPSidebarItem level-0" data-v-e65c073a data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><h2 class="text" data-v-cab05059>表单校验</h2><!----></div><ul class="items" data-v-cab05059><li data-v-cab05059><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/rules.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>表单校验</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><div class="no-transition group" data-v-e65c073a><section class="VPSidebarItem level-0" data-v-e65c073a data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><h2 class="text" data-v-cab05059>表单对比</h2><!----></div><ul class="items" data-v-cab05059><li data-v-cab05059><!--[--><div class="VPSidebarItem level-1 is-link" data-v-cab05059><div class="item" data-v-cab05059><div class="indicator" data-v-cab05059></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/compare.html" data-v-cab05059><!--[--><p class="text" data-v-cab05059>表单对比</p><!--]--></a><!----></div><!----></div><!--]--></li></ul></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-440dbbdf data-v-9677ef77><div class="VPDoc has-sidebar has-aside" data-v-9677ef77 data-v-5a9131ba><!--[--><!--]--><div class="container" data-v-5a9131ba><div class="aside" data-v-5a9131ba><div class="aside-curtain" data-v-5a9131ba></div><div class="aside-container" data-v-5a9131ba><div class="aside-content" data-v-5a9131ba><div class="VPDocAside" data-v-5a9131ba data-v-94896f55><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-94896f55 data-v-8d793e1b><div class="content" data-v-8d793e1b><div class="outline-marker" data-v-8d793e1b></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-8d793e1b>On this page</div><ul class="VPDocOutlineItem root" data-v-8d793e1b data-v-c684cb5d><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-94896f55></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-5a9131ba><div class="content-container" data-v-5a9131ba><!--[--><!--]--><main class="main" data-v-5a9131ba><div style="position:relative;" class="vp-doc _tmagic-editor_docs_form-config_fields_select" data-v-5a9131ba><div><h1 id="select-选择器" tabindex="-1">Select 选择器 <a class="header-anchor" href="#select-选择器" aria-label="Permalink to “Select 选择器”">​</a></h1><p>当选项过多时,使用下拉菜单展示并选择内容。</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to “基础用法”">​</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><!--teleport start--><div class="el-overlay el-modal-dialog" style="z-index:2040;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-2085-119" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--teleport end--></div><h2 id="选项值校验" tabindex="-1">选项值校验 <a class="header-anchor" href="#选项值校验" aria-label="Permalink to “选项值校验”">​</a></h2><p>可在 <code>rules</code> 中开启 <code>typeMatch</code>,校验当前值是否落在 <code>options</code> 中(<code>multiple</code> 时校验数组元素)。详见<a href="/tmagic-editor/docs/form-config/rules.html">表单校验</a>。</p><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;select&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;status&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;状态&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;启用&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;禁用&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> rules</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { required: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;请选择状态&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { typeMatch: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, message: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;状态值不合法&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</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><h2 id="有禁用选项" tabindex="-1">有禁用选项 <a class="header-anchor" href="#有禁用选项" aria-label="Permalink to “有禁用选项”">​</a></h2><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 在 options 选项配置中,设定 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><!--teleport start--><div class="el-overlay el-modal-dialog" style="z-index:2041;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-2085-122" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--teleport end--></div><h2 id="禁用状态" tabindex="-1">禁用状态 <a class="header-anchor" href="#禁用状态" aria-label="Permalink to “禁用状态”">​</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><!--teleport start--><div class="el-overlay el-modal-dialog" style="z-index:2042;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-2085-125" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--teleport end--></div><h2 id="基础多选" tabindex="-1">基础多选 <a class="header-anchor" href="#基础多选" aria-label="Permalink to “基础多选”">​</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><!--teleport start--><div class="el-overlay el-modal-dialog" style="z-index:2043;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-2085-128" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--teleport end--></div><h2 id="分组" tabindex="-1">分组 <a class="header-anchor" href="#分组" aria-label="Permalink to “分组”">​</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><!--teleport start--><div class="el-overlay el-modal-dialog" style="z-index:2044;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-2085-131" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--teleport end--></div><h2 id="创建条目" tabindex="-1">创建条目 <a class="header-anchor" href="#创建条目" aria-label="Permalink to “创建条目”">​</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><!--teleport start--><div class="el-overlay el-modal-dialog" style="z-index:2045;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-2085-134" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--teleport end--></div><h2 id="远程选项" tabindex="-1">远程选项 <a class="header-anchor" href="#远程选项" aria-label="Permalink to “远程选项”">​</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><!--teleport start--><div class="el-overlay el-modal-dialog" style="z-index:2046;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-2085-137" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--teleport end--></div><p>同时在 <code>src/main.ts</code> 中需要自定义实现请求</p><div class="language-typescript"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><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:#c62739;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">options</span><span style="--shiki-light:#c62739;--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:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // 自定义请求实现</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 custom-block-title-default">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 “Select Attributes”">​</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 / <code>FilterFunction</code></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><code>OnChangeHandler</code></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><details class="details custom-block"><summary>查看 FilterFunction / OnChangeHandler 及关联类型定义</summary><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FilterFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">T</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> mForm</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormState</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> data</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> model</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> values</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> parent</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> formValue</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 与 `formValue` 相同,对齐 Select.vue / SelectOptionFunction 的 `formValues` 别名 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> formValues</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> prop</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> config</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> index</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> getFormValue</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">prop</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</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 style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> T</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> OnChangeHandler</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">mForm</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormState</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#c62739;--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:#c13617;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> OnChangeHandlerData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span></code></pre></div><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> OnChangeHandlerData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> model</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> values</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> parent</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> formValue</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> config</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Readonly</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> prop</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> changeRecords</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ChangeRecord</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[];</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setModel</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">prop</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#c62739;--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:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setFormValue</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">prop</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">value</span><span style="--shiki-light:#c62739;--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:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> void</span><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="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ChangeRecord</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> propPath</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> value</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><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="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormValue</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span></code></pre></div></details><h2 id="配置类型" tabindex="-1">配置类型 <a class="header-anchor" href="#配置类型" aria-label="Permalink to “配置类型”">​</a></h2><details class="details custom-block"><summary>查看 SelectConfig 配置类型定义</summary><div class="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SelectConfig</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> type</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;select&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> clearable</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> multiple</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> valueKey</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> allowCreate</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> filterable</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> group</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> options</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SelectConfigOption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SelectConfigGroupOption</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[] </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SelectOptionFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> remote</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> option</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> url</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ((</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">mForm</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormState</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">model</span><span style="--shiki-light:#c62739;--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:#c13617;--shiki-dark:#FFAB70;">formValue</span><span style="--shiki-light:#c62739;--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:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> initUrl</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ((</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">mForm</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormState</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">data</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">model</span><span style="--shiki-light:#c62739;--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:#c13617;--shiki-dark:#FFAB70;">formValue</span><span style="--shiki-light:#c62739;--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:#c62739;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> method</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;jsonp&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> cache</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> timeout</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> mode</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> headers</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">key</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> };</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> json</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> false</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> body</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RemoteSelectOptionBodyFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> initBody</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt; </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RemoteSelectOptionBodyFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> jsonpCallback</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;callback&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> afterRequest</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RemoteSelectOptionAfterRequestFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> afterInitRequest</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RemoteSelectOptionAfterRequestFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> beforeRequest</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RemoteSelectOptionBeforeRequestFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> beforeInitRequest</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RemoteSelectOptionBeforeRequestFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> root</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> totalKey</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> initRoot</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> item</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> RemoteSelectOptionItemFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> value</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SelectOptionValueFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> text</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SelectOptionTextFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</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="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** vnode的key值,默认是遍历数组时的index */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> __key</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 表单域标签的的宽度,例如 &#39;50px&#39;。支持 auto。 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> labelWidth</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** label 标签的title属性 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> labelTitle</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> className</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 字段名 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> name</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 额外的提示信息,和 help 类似,当提示文案同时出现时,可以使用这个。 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> extra</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FilterFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 额外的提示信息,和 extra 类似,着重强调时用这个显示,优先级高于extra*/</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> extraTips</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 配置提示信息 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> tooltip</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ToolTipConfigType</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FilterFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">ToolTipConfigType</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否置灰 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> disabled</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FilterFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 使用表单中的值作为key,例如配置了text,则使用model.text作为key */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> key</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否显示 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> display</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;expand&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FilterFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">boolean</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;expand&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 值发生改变时调用的方法 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> onChange</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> OnChangeHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** label 标签的文本 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> text</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FilterFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 右侧感叹号 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> tip</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> filter</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;number&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> OnChangeHandler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否去除首尾空格 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> trim</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 默认值 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> defaultValue</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> DefaultValueFunction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 标题下方的额外提示信息 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> titleExtra</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 表单验证规则 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> rules</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Rule</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">[];</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> extensible</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> dynamicKey</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 是否需要显示`展开更多配置` */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> expand</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> style</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> fieldStyle</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Record</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">string</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> labelPosition</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;top&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;left&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;right&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> flat</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> fixed</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;left&#39;</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;right&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> operateColWidth</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><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="language-ts"><button title="Copy code" data-copied="Copied" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Input</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> /** 输入框没有内容时显示的文案 */</span></span>
<span class="line"><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;"> placeholder</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">?:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span><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></details><h2 id="options-item" tabindex="-1">options item <a class="header-anchor" href="#options-item" aria-label="Permalink to “options item”">​</a></h2><p>| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | -------- | ---------- | -------------------- | ------ | --- | | text | | 选项的标签 | string/number/object | — | — | | value | 选项的值 | string | — | — | | disabled | 是否禁用 | boolean | — | false | | label | string | — | — | — | | options | Array | — | — | — |</p><h2 id="option" tabindex="-1">option <a class="header-anchor" href="#option" aria-label="Permalink to “option”">​</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-5a9131ba data-v-0e42eeea><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-0e42eeea><span class="visually-hidden" id="doc-footer-aria-label" data-v-0e42eeea>Pager</span><div class="pager" data-v-0e42eeea><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/form-config/fields/switch.html" data-v-0e42eeea><!--[--><span class="desc" data-v-0e42eeea>Previous page</span><span class="title" data-v-0e42eeea>Switch开关</span><!--]--></a></div><div class="pager" data-v-0e42eeea><a class="VPLink link pager-link next" href="/tmagic-editor/docs/form-config/fields/cascader.html" data-v-0e42eeea><!--[--><span class="desc" data-v-0e42eeea>Next page</span><span class="title" data-v-0e42eeea>Cascader级联选择器</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-440dbbdf data-v-2daa7712><div class="container" data-v-2daa7712><p class="message" data-v-2daa7712>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-2daa7712>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
</body>
</html>