mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-05-30 04:08:04 +00:00
cbc4b25072
- CodeSelect/CodeSelectCol/EventSelect/DataSource 等复合字段在对比模式下 按索引对齐前后值，逐项展示新增/删除/修改高亮，并隐藏写操作按钮 - form 容器/列表/表格支持对比模式只读展示 - 新增「历史记录面板」指南文档，完善表单对比文档及 menu props 说明 - 补充相关单元测试 Co-authored-by: Cursor <cursoragent@cursor.com>
1.7 KiB
1.7 KiB
表单对比
tmagic-form可以支持两个版本的表单值对比，如果有容器嵌套，将在tab标签页展示对应tab下存在的差异数，便于在复杂嵌套表单场景下直观的看到差异情况
使用方法
在初始化表单时，开启对比模式 is-compare，并传入当前版本的表单值（init-values）、上一版本的表单值（last-values）以及表单配置，具体可参见Form Playground的demo演示。
<m-form
:config="config"
:is-compare="true"
:init-values="curValues"
:last-values="lastValues"
></m-form>
相关属性详见 Form 组件 props：
isCompare：是否开启对比模式；lastValues：需对比的上一版本表单值；showDiff：自定义「是否展示对比内容」的判断函数，用于规避语义相等但结构不同导致的误判。
对比模式下的字段行为
对比模式下，表单仅做只读展示：增删、复制、排序、导入、编辑等写操作按钮会被隐藏。对于由列表或嵌套子表单组成的复合字段（如 event-select、code-select、code-select-col），表单会按索引对齐前后值，逐项展示新增 / 删除 / 修改的高亮差异，而不会渲染出两套独立组件。
应用场景
编辑器的历史记录面板即基于该能力，对历史步骤的前后值做表单形式的差异对比。
效果展示
