f0c66427b8
- form: MForm/Container 新增 showDiff prop，允许调用方自定义
'是否展示对比内容' 的判断逻辑，并在嵌套 Container 中自动透传；
不传时沿用默认的 isEqual 行为
- editor: CompareForm 利用该能力处理 code-select 字段中 '' 与
{ hookType: 'code', hookData: [] } 两种语义为空形态被 isEqual 误判为差异的问题
- docs: 补充 form-props.md 中 showDiff 的说明与示例
- test: 补充 Code 字段相关单测
4.6 KiB
Form组件属性 props
config
-
详情： 表单配置
-
默认值：
[] -
类型：
FormConfig::: details 查看 FormConfig 及关联类型定义 <<< @/../packages/form-schema/src/base.ts#FormConfig{ts}
<<< @/../packages/form-schema/src/base.ts#FormItemConfig{ts}
<<< @/../packages/form-schema/src/base.ts#ChildConfig{ts}
<<< @/../packages/form-schema/src/base.ts#DynamicTypeConfig{ts}
<<< @/../packages/form-schema/src/base.ts#FormItem{ts} :::
-
示例：
<template>
<m-form-dialog :config="config"></m-form-dialog>
</template>
<script setup>
import { ref } from "Vue";
const config = ref([
{
name: "text",
text: "文本",
},
{
name: "multiple",
text: "多行文本",
type: "switch",
},
]);
</script>
initValues
-
详情： 表单初始化值
-
默认值：
{} -
类型：
Object -
示例：
<template>
<m-form-dialog :init-values="initValues"></m-form-dialog>
</template>
<script setup>
import { ref } from 'Vue';
const initValues = ref([
text: 'text',
multiply: true,
]);
</script>
lastValues
-
详情： 需对比的值（开启对比模式时传入）
-
默认值：
{} -
类型：
Object
isCompare
-
详情： 是否开启对比模式
-
默认值：
false -
类型：
boolean
showDiff
-
详情：
自定义“是否展示对比内容”的判断函数（仅在
isCompare === true时生效）。- 不传：使用默认逻辑
!isEqual(curValue, lastValue)（基于 lodashisEqual）； - 传函数：完全以函数返回值为准，返回
true才展示前后两份对比内容。
该 prop 通过
formState透传到所有层级的 Container 中，调用方只需在 MForm 这一层传一次即可对整棵表单生效。典型场景：某些字段语义上相等但结构不同（例如
code-select字段中''与{ hookType: 'code', hookData: [] }应视为相等），调用方在此处显式声明，避免被isEqual误判为差异。 - 不传：使用默认逻辑
-
类型：
(data: { curValue: any; lastValue: any; config: FormItemConfig }) => boolean -
示例：
<template>
<m-form :config="config" :is-compare="true" :last-values="lastValues" :show-diff="showDiff"></m-form>
</template>
<script setup>
import { isEqual } from 'lodash-es';
const showDiff = ({ curValue, lastValue, config }) => {
if (config?.type === 'code-select') {
// 业务侧自定义：双方都是“空形态”视为相等，不展示对比
const isEmpty = (v) =>
v === '' || v === undefined || v === null ||
(typeof v === 'object' && v.hookType === 'code' && Array.isArray(v.hookData) && v.hookData.length === 0);
if (isEmpty(curValue) && isEmpty(lastValue)) return false;
}
return !isEqual(curValue, lastValue);
};
</script>
parentValues
-
详情： 父级表单值
-
默认值：
{} -
类型：
Object
labelWidth
- 详情：
表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto
-
默认值：
'200px' -
类型：
string
disabled
-
详情： 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效
-
默认值： false
-
类型：
boolean
height
-
详情： 表单容器的高度，会作为内联样式
height应用到表单根元素上 -
默认值：
'auto' -
类型：
string
stepActive
-
详情： 当表单包含 step 容器时，控制当前激活的步骤
-
默认值：
1 -
类型：
string | number
size
-
详情： 用于控制该表单内组件的尺寸
-
类型：
'small' | 'default' | 'large'
inline
-
详情： 行内表单模式
-
默认值： false
-
类型：
boolean
labelPosition
-
详情： 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性
-
默认值：
'right' -
类型：
string
keyProp
-
详情： 作为表单项的组件实例的key
-
默认值：
'__key' -
类型：
string
popperClass
-
详情： tooltip弹出层的class
-
类型：
string
preventSubmitDefault
-
详情： 是否阻止表单原生 submit 事件的默认行为
-
类型：
boolean
extendState
-
详情： 扩展 formState 的钩子函数，返回的对象会被合并到 formState 上
-
类型：
(state: FormState) => Record<string, any> | Promise<Record<string, any>>