tmagic-editor/docs/assets/api_form_form-events.md.C8SsDKZ6.js

import{ax as i,z as e,A as a,b5 as n}from"./chunks/framework.V2ssSR2R.js";const g=JSON.parse('{"title":"Form组件 events","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-events.md","filePath":"api/form/form-events.md"}'),t={name:"api/form/form-events.md"};function l(r,s,o,h,d,p){return a(),e("div",null,[...s[0]||(s[0]=[n(`<h1 id="form组件-events" tabindex="-1">Form组件 events <a class="header-anchor" href="#form组件-events" aria-label="Permalink to “Form组件 events”">​</a></h1><h2 id="change" tabindex="-1">change <a class="header-anchor" href="#change" aria-label="Permalink to “change”">​</a></h2><ul><li><p><strong>详情：</strong> 表单中任何值发生变化</p></li><li><p><strong>事件回调函数：</strong> <code>(values: any, eventData: ContainerChangeEventData) =&gt; void</code></p><p>其中 <code>ContainerChangeEventData</code> 定义如下：</p><div class="language-ts"><button title="Copy Code" 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:#D73A49;--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:#E36209;--shiki-dark:#FFAB70;">  propPath</span><span style="--shiki-light:#D73A49;--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:#E36209;--shiki-dark:#FFAB70;">  value</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>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ContainerChangeEventData</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  modifyKey</span><span style="--shiki-light:#D73A49;--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:#E36209;--shiki-dark:#FFAB70;">  changeRecords</span><span style="--shiki-light:#D73A49;--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:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></li></ul><h2 id="error" tabindex="-1">error <a class="header-anchor" href="#error" aria-label="Permalink to “error”">​</a></h2><ul><li><p><strong>详情：</strong> 表单校验失败时触发。回调收到的是 element-plus <code>validate</code> 返回的 <code>invalidFields</code> 结构（按字段名分组的校验失败项），而<strong>不是</strong> <code>Error</code> 实例</p></li><li><p><strong>事件回调函数：</strong> <code>(invalidFields: Record&lt;string, { message: string; field: string }[]&gt;) =&gt; void</code></p></li></ul><h2 id="field-input" tabindex="-1">field-input <a class="header-anchor" href="#field-input" aria-label="Permalink to “field-input”">​</a></h2><ul><li><p><strong>详情：</strong> 表单项 input 事件触发时由内部表单项向上派发，用于监听单个字段的输入</p></li><li><p><strong>事件回调函数：</strong> <code>(prop: string, value: any) =&gt; void</code></p></li></ul><h2 id="field-change" tabindex="-1">field-change <a class="header-anchor" href="#field-change" aria-label="Permalink to “field-change”">​</a></h2><ul><li><p><strong>详情：</strong> 表单项 change 事件触发时由内部表单项向上派发，用于监听单个字段的变更</p></li><li><p><strong>事件回调函数：</strong> 存在两种派发形式，监听时需注意区分：</p><ul><li>大多数表单项（如 <code>Tabs</code>、<code>useImport</code> 等）派发的是 <code>(prop: string, value: any) =&gt; void</code>；</li><li>表格类容器（<code>useSortable</code>、<code>useTableColumns</code> 等）会<strong>只派发整行/整批数据</strong>：<code>(newData: any) =&gt; void</code>。</li></ul><p>如果只关心字段维度，可在回调里通过 <code>arguments.length === 1</code> 区分，或在表格类场景额外监听上层的 <code>change</code> 事件。</p></li></ul><h2 id="update-stepactive" tabindex="-1">update:stepActive <a class="header-anchor" href="#update-stepactive" aria-label="Permalink to “update:stepActive”">​</a></h2><ul><li><p><strong>详情：</strong> 当内部 step 容器切换步骤时触发。<code>Step.vue</code> 在点击步骤时派发的是 <code>index + 1</code>（<code>number</code>），文档类型保留 <code>string | number</code> 兼容父级初始传入</p></li><li><p><strong>事件回调函数：</strong> <code>(active: string | number) =&gt; void</code></p></li></ul>`,11)])])}const k=i(t,[["render",l]]);export{g as __pageData,k as default};