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(`

表单对比 ​

tmagic-form可以支持两个版本的表单值对比，如果有容器嵌套，将在tab标签页展示对应tab下存在的差异数，便于在复杂嵌套表单场景下直观的看到差异情况

使用方法 ​

在初始化表单时，开启对比模式 is-compare，并传入当前版本的表单值（init-values）、上一版本的表单值（last-values）以及表单配置，具体可参见Form Playground的demo演示。

html
<m-form
  :config="config"
  :is-compare="true"
  :init-values="curValues"
  :last-values="lastValues"
></m-form>

相关属性详见 Form 组件 props：

对比模式下的字段行为 ​

对比模式下，表单仅做只读展示：增删、复制、排序、导入、编辑等写操作按钮会被隐藏。对于由列表或嵌套子表单组成的复合字段（如 event-select、code-select、code-select-col），表单会按索引对齐前后值，逐项展示新增 / 删除 / 修改的高亮差异，而不会渲染出两套独立组件。

应用场景 ​

编辑器的历史记录面板即基于该能力，对历史步骤的前后值做表单形式的差异对比。

效果展示 ​

表单对比`,13)])])}const m=i(l,[["render",r]]);export{k as __pageData,m as default};