diff --git a/docs/developer-guide/form-schema.md b/docs/developer-guide/form-schema.md index c805a16..63af3d3 100644 --- a/docs/developer-guide/form-schema.md +++ b/docs/developer-guide/form-schema.md @@ -211,9 +211,13 @@ fieldSelector: `${requestOption.fieldSelectorKey}=(value1,value2,value3)` 列表类型的输入组件,支持动态添加、删除数据项。 +:::tip +`list` 组件与 [array](#array) 组件功能类似,但它们的用途不同。`list` 组件适合展示基本类型的数据,而 `array` 组件更适合于展示复杂类型的数据。 +::: + #### 参数 -- `item-type`:数据项的数据类型,用于初始化数据。可选参数 `string`, `number`, `boolean`, `object`,默认为 `string` +- `item-type`:数据项的数据类型,用于初始化数据。可选参数 `string`, `number`, `boolean`,默认为 `string` - `min`:数组最小要求数量,默认为 `0` - `max`:数组最大容量,默认为 `Infinity`,即无限制 - `addButton`:是否显示添加按钮 @@ -240,7 +244,7 @@ fieldSelector: `${requestOption.fieldSelectorKey}=(value1,value2,value3)` ``` :::tip -`list` 组件有且只有一个子节点,并且必须为子节点传递 `index` 属性。若想提供多个字段,则建议使用 `group` 组件包裹,并将 itemType 改为 object。 +`list` 组件有且只有一个子节点,并且必须为子节点传递 `index` 属性。若想提供多个字段组成对象,则建议改为使用 [array](#array) 组件。 ::: 最终保存表单之后得到的值为以下形式: @@ -331,7 +335,11 @@ UI 效果: -### repeater +### ~~repeater~~(已过时) + +:::warning +`repeater` 组件已不再推荐使用,请使用 [array](#array) 组件代替。 +::: #### 描述 @@ -627,3 +635,83 @@ UI 效果:

+ +### array + +一组重复的输入组件,展示为列表形式,可以用于定义一组数据。最终得到的数据为一个对象的数组,方便使用者对此数组进行增加、删除、排序等操作。 + +参数 + +- `min`:数组最小要求数量,默认为 `0` +- `max`:数组最大容量,默认为 `Infinity`,即无限制 +- `removeControl`:是否允许移除元素 +- `addButton`:是否显示添加按钮 +- `addLabel`:添加按钮上显示的文本 +- `addAttrs`:添加按钮的额外属性 +- `emptyText`: 当数组为空时显示的文本 +- `itemLabels`: 列表元素上显示的内容,数据类型为 `{ type: "image" | "text"; label: string }[]` + +:::tip +强烈建议为 `array` 设置 `itemLabels` 属性,以便于更直观的展示元素内容,设置的元素内容将按照设置顺序展示在列表元素上。 + +在 `itemLabels` 中定义 `label` 时,可以使用 `$value` 来指向当前项的值。 +::: + +#### 示例 + +```yaml +- $formkit: array + name: socials + label: 社交账号 + value: [] + max: 5 + min: 1 + itemLabels: + - type: image + label: $value.logo + - type: text + label: $value.name + children: + - $formkit: attachment + name: logo + label: 图标 + value: "" + - $formkit: text + name: name + label: 名称 + value: "" + - $formkit: text + name: url + label: 地址 + value: "" +``` + +:::warning +由于目前无法通过单个 `itemLabels` 定义涵盖所有子项变动的情况,因此在 `itemLabels` 中使用 `$value` ,无法获取到具有 `if` 属性的组件值。 + +例如: + +```yaml +- $formkit: array + name: socials + label: 社交账号 + value: [] + itemLabels: + - type: text + # 这里无法获取到具有 if 属性的组件值,因此也就无法展示在列表元素上。 + label: $value.name + children: + - $formkit: select + name: enabled + label: 是否启用 + options: + - label: 是 + value: true + - label: 否 + value: false + - $formkit: text + if: "$value.enabled === true", + label: $value.name +``` + +::: diff --git a/docs/developer-guide/plugin/api-changelog.md b/docs/developer-guide/plugin/api-changelog.md index 8bd1127..87e0fa3 100644 --- a/docs/developer-guide/plugin/api-changelog.md +++ b/docs/developer-guide/plugin/api-changelog.md @@ -49,3 +49,7 @@ pnpm install @halo-dev/ui-shared ### 表单定义 > 新增 Iconify 图标选择器 在 2.22.0 中,我们为 FormKit 表单提供了通用的图标选择器,基于 [Iconify](https://icon-sets.iconify.design/),详细文档可查阅:[表单定义#Iconify](../../developer-guide/form-schema.md#iconify) + +### 表单定义 > 新增 `array` 组件 + +在 2.22.0 中,我们为 FormKit 表单新增了 `array` 组件,用于定义一组数据,并计划使用 `array` 组件替换原有的 `repeater` 组件。详细文档可查阅:[表单定义#array](../../developer-guide/form-schema.md#array) diff --git a/docs/developer-guide/theme/api-changelog.md b/docs/developer-guide/theme/api-changelog.md index cd6946a..3fb6df8 100644 --- a/docs/developer-guide/theme/api-changelog.md +++ b/docs/developer-guide/theme/api-changelog.md @@ -8,3 +8,7 @@ description: 记录每一个版本的主题 API 变更记录,方便开发者 ### 表单定义 > 新增 Iconify 图标选择器 在 2.22.0 中,我们为 FormKit 表单提供了通用的图标选择器,基于 [Iconify](https://icon-sets.iconify.design/),详细文档可查阅:[表单定义#Iconify](../../developer-guide/form-schema.md#iconify) + +### 表单定义 > 新增 `array` 组件 + +在 2.22.0 中,我们为 FormKit 表单新增了 `array` 组件,用于定义一组数据,并计划使用 `array` 组件替换原有的 `repeater` 组件。详细文档可查阅:[表单定义#array](../../developer-guide/form-schema.md#array)