mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-06-04 10:58:33 +08:00
7 lines
4.7 KiB
JavaScript
7 lines
4.7 KiB
JavaScript
import{ax as i,z as s,A as e,b5 as t}from"./chunks/framework.V2ssSR2R.js";const k=JSON.parse('{"title":"表单对比","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/compare.md","filePath":"form-config/compare.md"}'),l={name:"form-config/compare.md"};function r(o,a,n,h,p,d){return e(),s("div",null,[...a[0]||(a[0]=[t(`<h1 id="表单对比" tabindex="-1">表单对比 <a class="header-anchor" href="#表单对比" aria-label="Permalink to “表单对比”"></a></h1><p>tmagic-form可以支持两个版本的表单值对比，如果有容器嵌套，将在tab标签页展示对应tab下存在的差异数，便于在复杂嵌套表单场景下直观的看到差异情况</p><h2 id="使用方法" tabindex="-1">使用方法 <a class="header-anchor" href="#使用方法" aria-label="Permalink to “使用方法”"></a></h2><p>在初始化表单时，开启对比模式 <code>is-compare</code>，并传入当前版本的表单值（<code>init-values</code>）、上一版本的表单值（<code>last-values</code>）以及表单配置，具体可参见<a href="https://tencent.github.io/tmagic-editor/playground/index.html#/form" target="_blank" rel="noreferrer">Form Playground</a>的demo演示。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</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 style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"config"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :is-compare</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"true"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :init-values</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"curValues"</span></span>
|
||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :last-values</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"lastValues"</span></span>
|
||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><p>相关属性详见 Form 组件 props：</p><ul><li><a href="/tmagic-editor/docs/api/form/form-props.html#iscompare"><code>isCompare</code></a>：是否开启对比模式；</li><li><a href="/tmagic-editor/docs/api/form/form-props.html#lastvalues"><code>lastValues</code></a>：需对比的上一版本表单值；</li><li><a href="/tmagic-editor/docs/api/form/form-props.html#showdiff"><code>showDiff</code></a>：自定义「是否展示对比内容」的判断函数，用于规避语义相等但结构不同导致的误判。</li></ul><h2 id="对比模式下的字段行为" tabindex="-1">对比模式下的字段行为 <a class="header-anchor" href="#对比模式下的字段行为" aria-label="Permalink to “对比模式下的字段行为”"></a></h2><p>对比模式下，表单仅做只读展示：增删、复制、排序、导入、编辑等写操作按钮会被隐藏。对于由列表或嵌套子表单组成的复合字段（如 <code>event-select</code>、<code>code-select</code>、<code>code-select-col</code>），表单会按索引对齐前后值，逐项展示新增 / 删除 / 修改的高亮差异，而不会渲染出两套独立组件。</p><h2 id="应用场景" tabindex="-1">应用场景 <a class="header-anchor" href="#应用场景" aria-label="Permalink to “应用场景”"></a></h2><p>编辑器的<a href="/tmagic-editor/docs/guide/advanced/history-list.html">历史记录面板</a>即基于该能力，对历史步骤的前后值做表单形式的差异对比。</p><h2 id="效果展示" tabindex="-1">效果展示 <a class="header-anchor" href="#效果展示" aria-label="Permalink to “效果展示”"></a></h2><img src="https://vip.image.video.qpic.cn/vupload/20230301/c626071677661813135.png" alt="表单对比">`,13)])])}const m=i(l,[["render",r]]);export{k as __pageData,m as default};
|