github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-02-07 13:05:38 +00:00
Code Issues Packages Projects Releases Wiki Activity
tmagic-editor/docs/form-config/fields/cascader.html
github-actions[bot] 687a43a9d2 Deploy to GitHub pages
2026-02-02 11:13:56 +00:00

444 lines
81 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>Cascader 级联选择器 | tmagic-editor</title>
<meta name="description" content="页面可视化平台">
<meta name="generator" content="VitePress v1.6.4">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.CZrNMGLM.css" as="style">
<link rel="preload stylesheet" href="/tmagic-editor/docs/vp-icons.css" as="style">
<script type="module" src="/tmagic-editor/docs/assets/app.BtykRwLu.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.EqJIyyjh.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.DkLJC2NO.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/form-config_fields_cascader.md.C0c0NFLI.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-36591270><!--[--><!--]--><!--[--><span tabindex="-1" data-v-5856d2bc></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-5856d2bc>Skip to content</a><!--]--><!----><header class="VPNav" data-v-36591270 data-v-fcf6b202><div class="VPNavBar" data-v-fcf6b202 data-v-d86d8915><div class="wrapper" data-v-d86d8915><div class="container" data-v-d86d8915><div class="title" data-v-d86d8915><div class="VPNavBarTitle has-sidebar" data-v-d86d8915 data-v-4e485ca3><a class="title" href="/tmagic-editor/docs/" data-v-4e485ca3><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-d597c09a><!--]--><span data-v-4e485ca3>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-d86d8915><div class="content-body" data-v-d86d8915><!--[--><!--]--><div class="VPNavBarSearch search" data-v-d86d8915><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-d86d8915 data-v-ff5533c3><span id="main-nav-aria-label" class="visually-hidden" data-v-ff5533c3> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/guide/" tabindex="0" data-v-ff5533c3 data-v-67fc5a8e><!--[--><span data-v-67fc5a8e>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" tabindex="0" data-v-ff5533c3 data-v-67fc5a8e><!--[--><span data-v-67fc5a8e>Editor API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/runtime-api/core/app.html" tabindex="0" data-v-ff5533c3 data-v-67fc5a8e><!--[--><span data-v-67fc5a8e>Runtime API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tmagic-editor/docs/form-config/fields/text.html" tabindex="0" data-v-ff5533c3 data-v-67fc5a8e><!--[--><span data-v-67fc5a8e>表单配置</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" target="_blank" rel="noreferrer" tabindex="0" data-v-ff5533c3 data-v-67fc5a8e><!--[--><span data-v-67fc5a8e>更新日志</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" target="_blank" rel="noreferrer" tabindex="0" data-v-ff5533c3 data-v-67fc5a8e><!--[--><span data-v-67fc5a8e>Playground</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-d86d8915 data-v-b495c88f><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-b495c88f data-v-2736d437 data-v-6c1c63e9><span class="check" data-v-6c1c63e9><span class="icon" data-v-6c1c63e9><!--[--><span class="vpi-sun sun" data-v-2736d437></span><span class="vpi-moon moon" data-v-2736d437></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-d86d8915 data-v-c0c31a4e data-v-98e6c5f3><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="noopener" data-v-98e6c5f3 data-v-af4e3f83><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-d86d8915 data-v-a0fb53fe data-v-55d61167><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-55d61167><span class="vpi-more-horizontal icon" data-v-55d61167></span></button><div class="menu" data-v-55d61167><div class="VPMenu" data-v-55d61167 data-v-d54e0581><!----><!--[--><!--[--><!----><div class="group" data-v-a0fb53fe><div class="item appearance" data-v-a0fb53fe><p class="label" data-v-a0fb53fe>Appearance</p><div class="appearance-action" data-v-a0fb53fe><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-a0fb53fe data-v-2736d437 data-v-6c1c63e9><span class="check" data-v-6c1c63e9><span class="icon" data-v-6c1c63e9><!--[--><span class="vpi-sun sun" data-v-2736d437></span><span class="vpi-moon moon" data-v-2736d437></span><!--]--></span></span></button></div></div></div><div class="group" data-v-a0fb53fe><div class="item social-links" data-v-a0fb53fe><div class="VPSocialLinks social-links-list" data-v-a0fb53fe data-v-98e6c5f3><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="noopener" data-v-98e6c5f3 data-v-af4e3f83><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-d86d8915 data-v-fe6041d6><span class="container" data-v-fe6041d6><span class="top" data-v-fe6041d6></span><span class="middle" data-v-fe6041d6></span><span class="bottom" data-v-fe6041d6></span></span></button></div></div></div></div><div class="divider" data-v-d86d8915><div class="divider-line" data-v-d86d8915></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-36591270 data-v-cf58124c><div class="container" data-v-cf58124c><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-cf58124c><span class="vpi-align-left menu-icon" data-v-cf58124c></span><span class="menu-text" data-v-cf58124c>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-cf58124c data-v-b834c8bc><button data-v-b834c8bc>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-36591270 data-v-5ef8d95b><div class="curtain" data-v-5ef8d95b></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-5ef8d95b><span class="visually-hidden" id="sidebar-aria-label" data-v-5ef8d95b> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-0aa5b47f><section class="VPSidebarItem level-0 has-active" data-v-0aa5b47f data-v-169b0f8b><div class="item" role="button" tabindex="0" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><h2 class="text" data-v-169b0f8b>基础配置</h2><!----></div><div class="items" data-v-169b0f8b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/text.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Input输入框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/textarea.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Textarea文本域</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/number.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>InputNumber计数器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/number-range.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>NumberRange数字范围</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/display.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Display只读文本</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/hidden.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Hidden隐藏域</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/link.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Link链接</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/checkbox.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Checkbox多选框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/radio.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Radio单选框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/switch.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Switch开关</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/select.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Select选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/cascader.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Cascader级联选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/color-picker.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>ColorPicker颜色选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/date-picker.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DatePick日期选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/daterange-picker.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DateRangePick日期范围选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/datetime-picker.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DatetimePick日期时间选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/time-picker.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>TimePick时间选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/timerange-picker.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>TimeRangePick时间范围选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/fields/dynamic-field.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DynamicField动态表单</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0aa5b47f><section class="VPSidebarItem level-0" data-v-0aa5b47f data-v-169b0f8b><div class="item" role="button" tabindex="0" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><h2 class="text" data-v-169b0f8b>编辑器中可用配置</h2><!----></div><div class="items" data-v-169b0f8b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>Code代码编辑器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code-link.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>CodeLink代码链接</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code-select.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>CodeSelect代码块选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/code-select-col.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>CodeSelectCol代码块选择列</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-select.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DataSourceSelect数据源选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-field-select.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DataSourceFieldSelect数据源字段选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-method-select.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DataSourceMethodSelect数据源方法选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-fields.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DataSourceFields数据源字段配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-input.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DataSourceInput数据源输入框</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-methods.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DataSourceMethods数据源方法配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/data-source-mocks.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DataSourceMocks数据源Mock配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/ui-select.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>UISelect组件选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/key-value.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>KeyValue键值对</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/page-fragment-select.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>PageFragmentSelect页面片选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/event-select.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>EventSelect事件选择器</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/display-conds.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>DisplayConds显示条件配置</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/editor-fields/cond-op-select.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>CondOpSelect条件操作选择器</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0aa5b47f><section class="VPSidebarItem level-0" data-v-0aa5b47f data-v-169b0f8b><div class="item" role="button" tabindex="0" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><h2 class="text" data-v-169b0f8b>布局配置</h2><!----></div><div class="items" data-v-169b0f8b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/layout.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>布局</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0aa5b47f><section class="VPSidebarItem level-0" data-v-0aa5b47f data-v-169b0f8b><div class="item" role="button" tabindex="0" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><h2 class="text" data-v-169b0f8b>联动配置</h2><!----></div><div class="items" data-v-169b0f8b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/relate.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>联动</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0aa5b47f><section class="VPSidebarItem level-0" data-v-0aa5b47f data-v-169b0f8b><div class="item" role="button" tabindex="0" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><h2 class="text" data-v-169b0f8b>表单对比</h2><!----></div><div class="items" data-v-169b0f8b><!--[--><div class="VPSidebarItem level-1 is-link" data-v-169b0f8b data-v-169b0f8b><div class="item" data-v-169b0f8b><div class="indicator" data-v-169b0f8b></div><a class="VPLink link link" href="/tmagic-editor/docs/form-config/compare.html" data-v-169b0f8b><!--[--><p class="text" data-v-169b0f8b>表单对比</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-36591270 data-v-1a7b61fc><div class="VPDoc has-sidebar has-aside" data-v-1a7b61fc data-v-42ea4fcb><!--[--><!--]--><div class="container" data-v-42ea4fcb><div class="aside" data-v-42ea4fcb><div class="aside-curtain" data-v-42ea4fcb></div><div class="aside-container" data-v-42ea4fcb><div class="aside-content" data-v-42ea4fcb><div class="VPDocAside" data-v-42ea4fcb data-v-1d34bb44><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-1d34bb44 data-v-dcee81d9><div class="content" data-v-dcee81d9><div class="outline-marker" data-v-dcee81d9></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-dcee81d9>On this page</div><ul class="VPDocOutlineItem root" data-v-dcee81d9 data-v-f877905d><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-1d34bb44></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-42ea4fcb><div class="content-container" data-v-42ea4fcb><!--[--><!--]--><main class="main" data-v-42ea4fcb><div style="position:relative;" class="vp-doc _tmagic-editor_docs_form-config_fields_cascader" data-v-42ea4fcb><div><h1 id="cascader-级联选择器" tabindex="-1">Cascader 级联选择器 <a class="header-anchor" href="#cascader-级联选择器" aria-label="Permalink to &quot;Cascader 级联选择器&quot;">​</a></h1><p>当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><p>有两种触发子菜单的方式</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p>type为&#39;cascader&#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;cascader&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;cascader&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">value</span>: <span class="hljs-string">&quot;zhinan&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;指南&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;shejiyuanze&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;设计原则&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;yizhi&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;一致&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;fankui&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;反馈&quot;</span>
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;daohang&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;导航&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;cexiangdaohang&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;侧向导航&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;dingbudaohang&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;顶部导航&quot;</span>
}
]
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;zujian&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;组件&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;basic&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Basic&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;layout&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Layout 布局&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;color&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Color 色彩&quot;</span>
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;form&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Form&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;checkbox&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Checkbox 多选框&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;input&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Input 输入框&quot;</span>
}
]
}
]
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay el-modal-dialog" style="z-index:2001;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-7938-2" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="禁用选项" tabindex="-1">禁用选项 <a class="header-anchor" href="#禁用选项" aria-label="Permalink to &quot;禁用选项&quot;">​</a></h2><p>通过在数据源中设置 disabled 字段来声明该选项是禁用的</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 本例中，options 指定的数组中的第一个元素含有 disabled: true 键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的 disabled 字段是否为 true ，如果你的数据中表示禁用含义的字段名不为 disabled ，可以通过 disabled 属性来指定（详见下方 API 表格）。当然， value 、 label 和 children 这三个字段名也可以通过同样的方式指定。 </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;cascader&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;cascader&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">type</span>: <span class="hljs-string">&quot;cascader&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;cascader1&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项2&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">value</span>: <span class="hljs-string">&quot;zhinan&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;指南&quot;</span>,
<span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;shejiyuanze&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;设计原则&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;yizhi&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;一致&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;fankui&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;反馈&quot;</span>
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;daohang&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;导航&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;cexiangdaohang&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;侧向导航&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;dingbudaohang&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;顶部导航&quot;</span>
}
]
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;zujian&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;组件&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;basic&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Basic&quot;</span>,
<span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;layout&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Layout 布局&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;color&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Color 色彩&quot;</span>
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;form&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Form&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;checkbox&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Checkbox 多选框&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;input&quot;</span>,
<span class="hljs-attr">disabled</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Input 输入框&quot;</span>
}
]
}
]
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay el-modal-dialog" style="z-index:2002;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-7938-5" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="多选" tabindex="-1">多选 <a class="header-anchor" href="#多选" aria-label="Permalink to &quot;多选&quot;">​</a></h2><p>可通过 <code>multiple = true</code> 来开启多选模式</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag </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;cascader&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;cascader&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项&quot;</span>,
<span class="hljs-attr">multiple</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">placeholder</span>: <span class="hljs-string">&quot;请选择&quot;</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;zhinan&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;指南&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;shejiyuanze&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;设计原则&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;yizhi&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;一致&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;fankui&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;反馈&quot;</span>
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;daohang&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;导航&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;cexiangdaohang&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;侧向导航&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;dingbudaohang&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;顶部导航&quot;</span>
}
]
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;zujian&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;组件&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;basic&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Basic&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;layout&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Layout 布局&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;color&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Color 色彩&quot;</span>
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;form&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Form&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;checkbox&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Checkbox 多选框&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;input&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Input 输入框&quot;</span>
}
]
}
]
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay el-modal-dialog" style="z-index:2003;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-7938-8" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="任意一级可选" tabindex="-1">任意一级可选 <a class="header-anchor" href="#任意一级可选" aria-label="Permalink to &quot;任意一级可选&quot;">​</a></h2><p>在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。</p><p>可通过 <code>checkStrictly = true</code> 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 配置 checkStrictly 为 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;cascader&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;cascader&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">checkStrictly</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;zhinan&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;指南&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;shejiyuanze&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;设计原则&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;yizhi&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;一致&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;fankui&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;反馈&quot;</span>
}
]
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;zujian&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;组件&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;basic&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Basic&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;layout&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Layout 布局&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;color&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Color 色彩&quot;</span>
}
]
}
]
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay el-modal-dialog" style="z-index:2004;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-7938-11" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="仅返回选中节点的值" tabindex="-1">仅返回选中节点的值 <a class="header-anchor" href="#仅返回选中节点的值" aria-label="Permalink to &quot;仅返回选中节点的值&quot;">​</a></h2><p>在选中节点改变时，默认返回由该节点所在的各级菜单的值所组成的数组。可通过 <code>emitPath = false</code> 设置仅返回该节点的值。</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 配置 emitPath 为 false，仅返回选中节点的值，而非完整路径数组 </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;cascader&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;cascader&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">emitPath</span>: <span class="hljs-literal">false</span>,
<span class="hljs-attr">checkStrictly</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;zhinan&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;指南&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;shejiyuanze&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;设计原则&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;yizhi&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;一致&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;fankui&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;反馈&quot;</span>
}
]
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;zujian&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;组件&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;basic&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Basic&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;layout&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Layout 布局&quot;</span>
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;color&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Color 色彩&quot;</span>
}
]
}
]
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay el-modal-dialog" style="z-index:2005;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-7938-14" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="值分隔符" tabindex="-1">值分隔符 <a class="header-anchor" href="#值分隔符" aria-label="Permalink to &quot;值分隔符&quot;">​</a></h2><p>当需要将选中值以字符串形式存储时，可通过 <code>valueSeparator</code> 指定分隔符，组件会自动将数组转换为字符串存储，读取时也会自动还原。</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 配置 valueSeparator 为 &#39;/&#39;，选中值将以 &#39;zhinan/shejiyuanze/yizhi&#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;cascader&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;cascader&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">valueSeparator</span>: <span class="hljs-string">&quot;/&quot;</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;zhinan&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;指南&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;shejiyuanze&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;设计原则&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;yizhi&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;一致&quot;</span>
}
]
}
]
},
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;zujian&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;组件&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;basic&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Basic&quot;</span>,
<span class="hljs-attr">children</span>: [
{
<span class="hljs-attr">value</span>: <span class="hljs-string">&quot;layout&quot;</span>,
<span class="hljs-attr">label</span>: <span class="hljs-string">&quot;Layout 布局&quot;</span>
}
]
}
]
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay el-modal-dialog" style="z-index:2006;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-7938-17" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><h2 id="远程选项" tabindex="-1">远程选项 <a class="header-anchor" href="#远程选项" aria-label="Permalink to &quot;远程选项&quot;">​</a></h2><p>通过接口请求获取选项列表</p><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><p> 配置 remote 为 true，然后配置 option 对象，而不是 options 数组 </p><!--]--><form class="el-form el-form--default el-form--label-right tmagic-design-form m-form" style="height:auto;"><!--[--><!--]--></form></div><div class="meta"><div class="description"><pre><code lass="language-javascript hljs">[
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;cascader&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;cascader&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;cascader/remote&quot;</span>,
<span class="hljs-attr">root</span>: <span class="hljs-string">&quot;data&quot;</span>,
<span class="hljs-attr">cache</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">timeout</span>: <span class="hljs-number">5000</span>,
<span class="hljs-attr">body</span>: {
<span class="hljs-attr">query</span>: <span class="hljs-string">&quot;&quot;</span>
},
<span class="hljs-attr">item</span>: <span class="hljs-function">(<span class="hljs-params">data</span>) =&gt;</span> data
}
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay el-modal-dialog" style="z-index:2007;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-7938-20" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div><p>同时在 <code>src/main.ts</code> 中需要自定义实现请求：</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MagicForm, {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> request</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 自定义请求实现</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><h2 id="动态选项" tabindex="-1">动态选项 <a class="header-anchor" href="#动态选项" aria-label="Permalink to &quot;动态选项&quot;">​</a></h2><p>options 支持传入函数，可根据表单其他字段动态生成选项列表</p><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</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;cascader&#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;cascader&#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 style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">mForm</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">formValue</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 根据表单值动态返回选项</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;a&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;选项A&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, children: [] }</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>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="cascader-attributes" tabindex="-1">Cascader Attributes <a class="header-anchor" href="#cascader-attributes" aria-label="Permalink to &quot;Cascader Attributes&quot;">​</a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>绑定值</td><td>string</td><td>—</td><td>—</td></tr><tr><td>text</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>disabled</td><td>是否禁用</td><td>boolean / <a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts" target="_blank" rel="noreferrer">FilterFunction</a></td><td>—</td><td>false</td></tr><tr><td>multiple</td><td>是否多选</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>emitPath</td><td>在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值</td><td>boolean</td><td>—</td><td>true</td></tr><tr><td>checkStrictly</td><td>是否严格的遵守父子节点不互相关联</td><td>boolean / <a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts" target="_blank" rel="noreferrer">FilterFunction</a></td><td>—</td><td>false</td></tr><tr><td>valueSeparator</td><td>合并成字符串时的分隔符</td><td>string / <a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts" target="_blank" rel="noreferrer">FilterFunction</a></td><td>—</td><td>—</td></tr><tr><td>popperClass</td><td>弹出内容的自定义类名</td><td>string</td><td>—</td><td>—</td></tr><tr><td>remote</td><td>是否为远程搜索</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>options</td><td>选项数据源</td><td>Array / Function</td><td>—</td><td>—</td></tr><tr><td>option</td><td>远程选项配置</td><td>Object</td><td>—</td><td>—</td></tr><tr><td>onChange</td><td>值变化时触发的函数</td><td><a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts" target="_blank" rel="noreferrer">OnChangeHandler</a></td><td>—</td><td>—</td></tr></tbody></table><h2 id="options-item" tabindex="-1">options item <a class="header-anchor" href="#options-item" aria-label="Permalink to &quot;options item&quot;">​</a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>value</td><td>选项的值</td><td>any</td><td>—</td><td>—</td></tr><tr><td>label</td><td>选项的标签</td><td>string</td><td>—</td><td>—</td></tr><tr><td>children</td><td>子选项</td><td>Array</td><td>—</td><td>—</td></tr></tbody></table><h2 id="option-远程配置" tabindex="-1">option（远程配置） <a class="header-anchor" href="#option-远程配置" aria-label="Permalink to &quot;option（远程配置）&quot;">​</a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>url</td><td>请求地址</td><td>string</td><td>—</td><td>—</td></tr><tr><td>root</td><td>响应数据的根路径</td><td>string</td><td>—</td><td>—</td></tr><tr><td>cache</td><td>是否缓存请求结果</td><td>boolean</td><td>—</td><td>false</td></tr><tr><td>timeout</td><td>请求超时时间（毫秒）</td><td>number</td><td>—</td><td>—</td></tr><tr><td>body</td><td>请求体</td><td>Object / Function</td><td>—</td><td>—</td></tr><tr><td>item</td><td>数据转换函数，将响应数据转换为选项格式</td><td>Function</td><td>—</td><td>—</td></tr></tbody></table></div></div></main><footer class="VPDocFooter" data-v-42ea4fcb data-v-8365344e><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-8365344e><span class="visually-hidden" id="doc-footer-aria-label" data-v-8365344e>Pager</span><div class="pager" data-v-8365344e><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/form-config/fields/select.html" data-v-8365344e><!--[--><span class="desc" data-v-8365344e>Previous page</span><span class="title" data-v-8365344e>Select选择器</span><!--]--></a></div><div class="pager" data-v-8365344e><a class="VPLink link pager-link next" href="/tmagic-editor/docs/form-config/fields/color-picker.html" data-v-8365344e><!--[--><span class="desc" data-v-8365344e>Next page</span><span class="title" data-v-8365344e>ColorPicker颜色选择器</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-36591270 data-v-a79f70ae><div class="container" data-v-a79f70ae><p class="message" data-v-a79f70ae>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-a79f70ae>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_editor_codeblockservicemethods.md\":\"BX3_siEm\",\"api_editor_componentlistservicemethods.md\":\"CaiU5OMF\",\"api_editor_datasourceservicemethods.md\":\"CAoPyiGv\",\"api_editor_editorserviceevents.md\":\"gcFs85FS\",\"api_editor_editorservicemethods.md\":\"DKiiyoPz\",\"api_editor_events.md\":\"BykK47dJ\",\"api_editor_eventsservicemethods.md\":\"CQxboHVr\",\"api_editor_historyserviceevents.md\":\"B7KupcqD\",\"api_editor_historyservicemethods.md\":\"B4obX-T3\",\"api_editor_props.md\":\"DWCwb77u\",\"api_editor_propsserviceevents.md\":\"Bhooxxnn\",\"api_editor_propsservicemethods.md\":\"Bz1ljBiU\",\"api_editor_slots.md\":\"ChfXa7kw\",\"api_editor_storageservicemethods.md\":\"DDiOwi5a\",\"api_editor_uiservicemethods.md\":\"CpPtl7oI\",\"api_form_form-dialog-events.md\":\"BQrVPpPK\",\"api_form_form-dialog-methods.md\":\"DEL0Eh3K\",\"api_form_form-dialog-props.md\":\"BlahsoDf\",\"api_form_form-events.md\":\"CgPQ3xhz\",\"api_form_form-methods.md\":\"DVzlGQIE\",\"api_form_form-props.md\":\"B_-pPs7j\",\"api_stage_coreevents.md\":\"BJgI_eWC\",\"api_stage_coremethods.md\":\"cDBiJupB\",\"api_table_events.md\":\"uY2Q6YZ2\",\"api_table_methods.md\":\"QkOCzJ6I\",\"api_table_props.md\":\"_WrWithq\",\"form-config_compare.md\":\"CxuguNFe\",\"form-config_editor-fields_code-link.md\":\"BKQqDQ-o\",\"form-config_editor-fields_code-select-col.md\":\"CAXo8Gdo\",\"form-config_editor-fields_code-select.md\":\"CYk7LEMU\",\"form-config_editor-fields_code.md\":\"DGnHcYO9\",\"form-config_editor-fields_cond-op-select.md\":\"DRTJ6abx\",\"form-config_editor-fields_data-source-field-select.md\":\"DR1kwf8H\",\"form-config_editor-fields_data-source-fields.md\":\"CnEqKG3I\",\"form-config_editor-fields_data-source-input.md\":\"YD9_hjaD\",\"form-config_editor-fields_data-source-method-select.md\":\"CsGjsRpB\",\"form-config_editor-fields_data-source-methods.md\":\"DA7qZPCv\",\"form-config_editor-fields_data-source-mocks.md\":\"C_py-HVd\",\"form-config_editor-fields_data-source-select.md\":\"0BjjDcvd\",\"form-config_editor-fields_display-conds.md\":\"DAg2DaL-\",\"form-config_editor-fields_event-select.md\":\"BV3lJb_r\",\"form-config_editor-fields_key-value.md\":\"COo3lmAD\",\"form-config_editor-fields_page-fragment-select.md\":\"BCMgnfOv\",\"form-config_editor-fields_ui-select.md\":\"D0tX04T2\",\"form-config_fields_cascader.md\":\"C0c0NFLI\",\"form-config_fields_checkbox.md\":\"BLrH5nrH\",\"form-config_fields_color-picker.md\":\"bjDdQpvY\",\"form-config_fields_date-picker.md\":\"CPNFs5b5\",\"form-config_fields_daterange-picker.md\":\"Db24ADad\",\"form-config_fields_datetime-picker.md\":\"Cx2bLmNB\",\"form-config_fields_display.md\":\"BaiQUX7K\",\"form-config_fields_dynamic-field.md\":\"pj2jVJDM\",\"form-config_fields_hidden.md\":\"CY0o0qcd\",\"form-config_fields_link.md\":\"BO3PrLPD\",\"form-config_fields_number-range.md\":\"BjTrt9wC\",\"form-config_fields_number.md\":\"c76O_OEh\",\"form-config_fields_radio.md\":\"DDDbGnrf\",\"form-config_fields_select.md\":\"D-hxYaPx\",\"form-config_fields_switch.md\":\"DRJauj9b\",\"form-config_fields_text.md\":\"nfBZO4U6\",\"form-config_fields_textarea.md\":\"BytSbPPK\",\"form-config_fields_time-picker.md\":\"Cqzj5cz_\",\"form-config_fields_timerange-picker.md\":\"Bjottjin\",\"form-config_layout.md\":\"DgWujzt6\",\"form-config_relate.md\":\"D4BEna2n\",\"guide_advanced_code-block.md\":\"B8iGTN8d\",\"guide_advanced_coupling.md\":\"Ch5QsuoK\",\"guide_advanced_data-source.md\":\"DG0DsdJV\",\"guide_advanced_js-schema.md\":\"HvE43RGl\",\"guide_advanced_layout.md\":\"B3q7H8Pu\",\"guide_advanced_page.md\":\"Db2dMbH0\",\"guide_advanced_tmagic-form.md\":\"Ctv1XIF5\",\"guide_advanced_tmagic-ui.md\":\"BKuDBLIF\",\"guide_component.md\":\"9ynlkeYM\",\"guide_conception.md\":\"BPjbVwPx\",\"guide_editor-expand.md\":\"hu4ukQA2\",\"guide_index.md\":\"SziXfziI\",\"guide_introduction.md\":\"CTlEAu5R\",\"guide_migration.md\":\"DF5WlNCT\",\"guide_publish.md\":\"BxM8UPuD\",\"guide_runtime.md\":\"BGV1Aw8_\",\"guide_tutorial_hello-world.md\":\"BwBB0sLQ\",\"guide_tutorial_index.md\":\"DeQI3m9W\",\"guide_tutorial_render.md\":\"CmB0S1C1\",\"guide_tutorial_runtime.md\":\"DZf5WVK6\",\"index.md\":\"_vBFVjCB\",\"runtime-api_core_app.md\":\"DqL_SMIi\",\"runtime-api_core_devtoolapi.md\":\"CNtmpnLO\",\"runtime-api_core_env.md\":\"DqthtvNq\",\"runtime-api_core_eventhelper.md\":\"DSOQlxIA\",\"runtime-api_core_flowstate.md\":\"DKodDYkQ\",\"runtime-api_core_iteratorcontainer.md\":\"yxAfk3wp\",\"runtime-api_core_node.md\":\"DfHI9knW\",\"runtime-api_core_page.md\":\"DbP_ghoD\",\"runtime-api_core_utils.md\":\"D61lvGXB\",\"runtime-api_data-source_datasource.md\":\"D_vEMdmL\",\"runtime-api_data-source_datasourcemanager.md\":\"B7SYphFJ\",\"runtime-api_data-source_httpdatasource.md\":\"Db7JVpGX\",\"runtime-api_data-source_observeddata.md\":\"gzo1dIjG\",\"runtime-api_data-source_utils.md\":\"DeJn6r5b\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"tmagic-editor\",\"description\":\"页面可视化平台\",\"base\":\"/tmagic-editor/docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"./favicon.png\",\"search\":{\"provider\":\"local\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/Tencent/tmagic-editor\"}],\"footer\":{\"message\":\"Powered by 腾讯视频会员平台技术中心\",\"copyright\":\"Copyright (C) 2025 Tencent.\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"Editor API\",\"link\":\"/api/editor/props\",\"activeMatch\":\"/api/\"},{\"text\":\"Runtime API\",\"link\":\"/runtime-api/core/app\",\"activeMatch\":\"/runtime-api/\"},{\"text\":\"表单配置\",\"link\":\"/form-config/fields/text\",\"activeMatch\":\"/form-config/\"},{\"text\":\"更新日志\",\"link\":\"https://github.com/Tencent/tmagic-editor/releases\"},{\"text\":\"Playground\",\"link\":\"https://tencent.github.io/tmagic-editor/playground/index.html\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"文档\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction.md\"},{\"text\":\"快速开始\",\"link\":\"/guide/\"},{\"text\":\"RUNTIME\",\"link\":\"/guide/runtime.md\"},{\"text\":\"组件开发\",\"link\":\"/guide/component.md\"},{\"text\":\"基础概念\",\"link\":\"/guide/conception.md\"},{\"text\":\"页面发布\",\"link\":\"/guide/publish.md\"},{\"text\":\"编辑器扩展\",\"link\":\"/guide/editor-expand.md\"},{\"text\":\"升级到1.5.x\",\"link\":\"/guide/migration.md\"}]},{\"text\":\"进阶指南\",\"items\":[{\"text\":\"JS Schema\",\"link\":\"/guide/advanced/js-schema.md\"},{\"text\":\"布局原理\",\"link\":\"/guide/advanced/layout.md\"},{\"text\":\"页面渲染\",\"link\":\"/guide/advanced/page.md\"},{\"text\":\"联动原理\",\"link\":\"/guide/advanced/coupling.md\"},{\"text\":\"代码块\",\"link\":\"/guide/advanced/code-block.md\"},{\"text\":\"数据源\",\"link\":\"/guide/advanced/data-source.md\"},{\"text\":\"@tmagic/ui\",\"link\":\"/guide/advanced/tmagic-ui.md\"},{\"text\":\"@tmagic/form\",\"link\":\"/guide/advanced/tmagic-form.md\"}]},{\"text\":\"教程\",\"items\":[{\"text\":\"写在前面\",\"link\":\"/guide/tutorial/\"},{\"text\":\"1.Hello World\",\"link\":\"/guide/tutorial/hello-world.md\"},{\"text\":\"2.Runtime\",\"link\":\"/guide/tutorial/runtime.md\"},{\"text\":\"3.DSL解析渲染\",\"link\":\"/guide/tutorial/render.md\"}]}],\"/api/\":[{\"text\":\"编辑器\",\"items\":[{\"text\":\"Editor组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/editor/props.md\"},{\"text\":\"slots\",\"link\":\"/api/editor/slots.md\"},{\"text\":\"events\",\"link\":\"/api/editor/events.md\"}]},{\"text\":\"editorService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/editorServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/editorServiceEvents.md\"}]},{\"text\":\"propsService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/propsServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/propsServiceEvents.md\"}]},{\"text\":\"historyService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/historyServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/historyServiceEvents.md\"}]},{\"text\":\"eventsService\",\"link\":\"/api/editor/eventsServiceMethods.md\"},{\"text\":\"uiService\",\"link\":\"/api/editor/uiServiceMethods.md\"},{\"text\":\"codeBlockService\",\"link\":\"/api/editor/codeBlockServiceMethods.md\"},{\"text\":\"componentListService\",\"link\":\"/api/editor/componentListServiceMethods.md\"},{\"text\":\"storageService\",\"link\":\"/api/editor/storageServiceMethods.md\"}]},{\"text\":\"表单\",\"items\":[{\"text\":\"Form组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/form/form-props\"},{\"text\":\"methods\",\"link\":\"/api/form/form-methods\"},{\"text\":\"events\",\"link\":\"/api/form/form-events\"}]},{\"text\":\"FormDialog组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/form/form-dialog-props\"},{\"text\":\"methods\",\"link\":\"/api/form/form-dialog-methods\"},{\"text\":\"events\",\"link\":\"/api/form/form-dialog-events\"}]}]},{\"text\":\"表格\",\"items\":[{\"text\":\"Table组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/table/props\"},{\"text\":\"methods\",\"link\":\"/api/table/methods\"},{\"text\":\"events\",\"link\":\"/api/table/events\"}]}]},{\"text\":\"stage\",\"items\":[{\"text\":\"StageCore\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/stage/coreMethods\"},{\"text\":\"事件\",\"link\":\"/api/stage/coreEvents\"}]}]}],\"/form-config/\":[{\"text\":\"基础配置\",\"items\":[{\"text\":\"Input输入框\",\"link\":\"/form-config/fields/text.md\"},{\"text\":\"Textarea文本域\",\"link\":\"/form-config/fields/textarea.md\"},{\"text\":\"InputNumber计数器\",\"link\":\"/form-config/fields/number.md\"},{\"text\":\"NumberRange数字范围\",\"link\":\"/form-config/fields/number-range.md\"},{\"text\":\"Display只读文本\",\"link\":\"/form-config/fields/display.md\"},{\"text\":\"Hidden隐藏域\",\"link\":\"/form-config/fields/hidden.md\"},{\"text\":\"Link链接\",\"link\":\"/form-config/fields/link.md\"},{\"text\":\"Checkbox多选框\",\"link\":\"/form-config/fields/checkbox.md\"},{\"text\":\"Radio单选框\",\"link\":\"/form-config/fields/radio.md\"},{\"text\":\"Switch开关\",\"link\":\"/form-config/fields/switch.md\"},{\"text\":\"Select选择器\",\"link\":\"/form-config/fields/select.md\"},{\"text\":\"Cascader级联选择器\",\"link\":\"/form-config/fields/cascader.md\"},{\"text\":\"ColorPicker颜色选择器\",\"link\":\"/form-config/fields/color-picker.md\"},{\"text\":\"DatePick日期选择器\",\"link\":\"/form-config/fields/date-picker.md\"},{\"text\":\"DateRangePick日期范围选择器\",\"link\":\"/form-config/fields/daterange-picker.md\"},{\"text\":\"DatetimePick日期时间选择器\",\"link\":\"/form-config/fields/datetime-picker.md\"},{\"text\":\"TimePick时间选择器\",\"link\":\"/form-config/fields/time-picker.md\"},{\"text\":\"TimeRangePick时间范围选择器\",\"link\":\"/form-config/fields/timerange-picker.md\"},{\"text\":\"DynamicField动态表单\",\"link\":\"/form-config/fields/dynamic-field.md\"}]},{\"text\":\"编辑器中可用配置\",\"items\":[{\"text\":\"Code代码编辑器\",\"link\":\"/form-config/editor-fields/code.md\"},{\"text\":\"CodeLink代码链接\",\"link\":\"/form-config/editor-fields/code-link.md\"},{\"text\":\"CodeSelect代码块选择器\",\"link\":\"/form-config/editor-fields/code-select.md\"},{\"text\":\"CodeSelectCol代码块选择列\",\"link\":\"/form-config/editor-fields/code-select-col.md\"},{\"text\":\"DataSourceSelect数据源选择器\",\"link\":\"/form-config/editor-fields/data-source-select.md\"},{\"text\":\"DataSourceFieldSelect数据源字段选择器\",\"link\":\"/form-config/editor-fields/data-source-field-select.md\"},{\"text\":\"DataSourceMethodSelect数据源方法选择器\",\"link\":\"/form-config/editor-fields/data-source-method-select.md\"},{\"text\":\"DataSourceFields数据源字段配置\",\"link\":\"/form-config/editor-fields/data-source-fields.md\"},{\"text\":\"DataSourceInput数据源输入框\",\"link\":\"/form-config/editor-fields/data-source-input.md\"},{\"text\":\"DataSourceMethods数据源方法配置\",\"link\":\"/form-config/editor-fields/data-source-methods.md\"},{\"text\":\"DataSourceMocks数据源Mock配置\",\"link\":\"/form-config/editor-fields/data-source-mocks.md\"},{\"text\":\"UISelect组件选择器\",\"link\":\"/form-config/editor-fields/ui-select.md\"},{\"text\":\"KeyValue键值对\",\"link\":\"/form-config/editor-fields/key-value.md\"},{\"text\":\"PageFragmentSelect页面片选择器\",\"link\":\"/form-config/editor-fields/page-fragment-select.md\"},{\"text\":\"EventSelect事件选择器\",\"link\":\"/form-config/editor-fields/event-select.md\"},{\"text\":\"DisplayConds显示条件配置\",\"link\":\"/form-config/editor-fields/display-conds.md\"},{\"text\":\"CondOpSelect条件操作选择器\",\"link\":\"/form-config/editor-fields/cond-op-select.md\"}]},{\"text\":\"布局配置\",\"items\":[{\"text\":\"布局\",\"link\":\"/form-config/layout.md\"}]},{\"text\":\"联动配置\",\"items\":[{\"text\":\"联动\",\"link\":\"/form-config/relate.md\"}]},{\"text\":\"表单对比\",\"items\":[{\"text\":\"表单对比\",\"link\":\"/form-config/compare.md\"}]}],\"/runtime-api/\":[{\"text\":\"@tmagic/core\",\"items\":[{\"text\":\"App\",\"link\":\"/runtime-api/core/app\"},{\"text\":\"Node\",\"link\":\"/runtime-api/core/node\"},{\"text\":\"Page\",\"link\":\"/runtime-api/core/page\"},{\"text\":\"EventHelper\",\"link\":\"/runtime-api/core/eventHelper\"},{\"text\":\"Env\",\"link\":\"/runtime-api/core/env\"},{\"text\":\"IteratorContainer\",\"link\":\"/runtime-api/core/iteratorContainer\"},{\"text\":\"FlowState\",\"link\":\"/runtime-api/core/flowState\"},{\"text\":\"DevtoolApi\",\"link\":\"/runtime-api/core/devtoolApi\"},{\"text\":\"工具函数\",\"link\":\"/runtime-api/core/utils\"}]},{\"text\":\"@tmagic/data-source\",\"items\":[{\"text\":\"DataSourceManager\",\"link\":\"/runtime-api/data-source/dataSourceManager\"},{\"text\":\"DataSource\",\"link\":\"/runtime-api/data-source/dataSource\"},{\"text\":\"HttpDataSource\",\"link\":\"/runtime-api/data-source/httpDataSource\"},{\"text\":\"观察者数据类\",\"link\":\"/runtime-api/data-source/observedData\"},{\"text\":\"工具函数\",\"link\":\"/runtime-api/data-source/utils\"}]}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink