|
|
|
@ -76,7 +76,7 @@ const schema: VbenFormSchema[] = [ |
|
|
|
数组字段名。假设为 `contacts`,第 1 行子字段 `name` 会被转换成: |
|
|
|
|
|
|
|
```ts |
|
|
|
contacts[0].name |
|
|
|
contacts[0].name; |
|
|
|
``` |
|
|
|
|
|
|
|
### `children` |
|
|
|
@ -102,22 +102,22 @@ contacts[0].name |
|
|
|
|
|
|
|
传给数组编辑器的配置: |
|
|
|
|
|
|
|
| 字段 | 说明 | |
|
|
|
| --- | --- | |
|
|
|
| `addButtonText` | 新增按钮文案 | |
|
|
|
| `actionText` | 操作列表头文案 | |
|
|
|
| `emptyText` | 空数据文案 | |
|
|
|
| `min` | 最少行数,达到后禁用删除 | |
|
|
|
| `max` | 最多行数,达到后禁用新增 | |
|
|
|
| `showIndex` | 是否显示序号 | |
|
|
|
| `createRow` | 新增行时生成默认数据 | |
|
|
|
| 字段 | 说明 | |
|
|
|
| --------------- | ------------------------ | |
|
|
|
| `addButtonText` | 新增按钮文案 | |
|
|
|
| `actionText` | 操作列表头文案 | |
|
|
|
| `emptyText` | 空数据文案 | |
|
|
|
| `min` | 最少行数,达到后禁用删除 | |
|
|
|
| `max` | 最多行数,达到后禁用新增 | |
|
|
|
| `showIndex` | 是否显示序号 | |
|
|
|
| `createRow` | 新增行时生成默认数据 | |
|
|
|
|
|
|
|
## 校验建议 |
|
|
|
|
|
|
|
数组父级 `rules` 建议只写数组级规则,例如至少一行: |
|
|
|
|
|
|
|
```ts |
|
|
|
rules: z.array(z.any()).min(1, '请至少添加一个联系人') |
|
|
|
rules: z.array(z.any()).min(1, '请至少添加一个联系人'); |
|
|
|
``` |
|
|
|
|
|
|
|
每个子字段的必填、长度、格式校验写在 children 自己的 `rules`: |
|
|
|
@ -156,20 +156,20 @@ children 里的 `dependencies.triggerFields` 默认是“当前行相对路径 |
|
|
|
在第 1 行中,`triggerFields: ['role']` 会被转换成: |
|
|
|
|
|
|
|
```ts |
|
|
|
contacts[0].role |
|
|
|
contacts[0].role; |
|
|
|
``` |
|
|
|
|
|
|
|
回调多了一个可选 `ctx` 参数: |
|
|
|
|
|
|
|
| 字段 | 说明 | |
|
|
|
| --- | --- | |
|
|
|
| `ctx.row` | 当前行数据 | |
|
|
|
| `ctx.rowIndex` | 当前行索引 | |
|
|
|
| `ctx.rowPath` | 当前行路径,例如 `contacts[0]` | |
|
|
|
| `ctx.arrayField` | 数组字段名,例如 `contacts` | |
|
|
|
| `ctx.fieldName` | 当前真实字段名,例如 `contacts[0].phone` | |
|
|
|
| `ctx.originalFieldName` | 原始 child 字段名,例如 `phone` | |
|
|
|
| `ctx.rootValues` | 表单完整值 | |
|
|
|
| 字段 | 说明 | |
|
|
|
| ----------------------- | ---------------------------------------- | |
|
|
|
| `ctx.row` | 当前行数据 | |
|
|
|
| `ctx.rowIndex` | 当前行索引 | |
|
|
|
| `ctx.rowPath` | 当前行路径,例如 `contacts[0]` | |
|
|
|
| `ctx.arrayField` | 数组字段名,例如 `contacts` | |
|
|
|
| `ctx.fieldName` | 当前真实字段名,例如 `contacts[0].phone` | |
|
|
|
| `ctx.originalFieldName` | 原始 child 字段名,例如 `phone` | |
|
|
|
| `ctx.rootValues` | 表单完整值 | |
|
|
|
|
|
|
|
如果 child 需要依赖表单根字段,可以使用 `$root.` 前缀: |
|
|
|
|
|
|
|
@ -185,7 +185,7 @@ dependencies: { |
|
|
|
如果想显式写当前行字段,也可以使用 `$row.` 前缀: |
|
|
|
|
|
|
|
```ts |
|
|
|
triggerFields: ['$row.role'] |
|
|
|
triggerFields: ['$row.role']; |
|
|
|
``` |
|
|
|
|
|
|
|
## valueFormat 用法 |
|
|
|
@ -210,19 +210,19 @@ children 里的 `valueFormat` 也会按行执行: |
|
|
|
在 `contacts[0]` 中,`setValue('phone', nextValue)` 会自动写到: |
|
|
|
|
|
|
|
```ts |
|
|
|
contacts[0].phone |
|
|
|
contacts[0].phone; |
|
|
|
``` |
|
|
|
|
|
|
|
如果要写根字段,用 `$root.`: |
|
|
|
|
|
|
|
```ts |
|
|
|
setValue('$root.firstContactPhone', value) |
|
|
|
setValue('$root.firstContactPhone', value); |
|
|
|
``` |
|
|
|
|
|
|
|
如果要显式写当前行字段,用 `$row.`: |
|
|
|
|
|
|
|
```ts |
|
|
|
setValue('$row.phone', value) |
|
|
|
setValue('$row.phone', value); |
|
|
|
``` |
|
|
|
|
|
|
|
## updateSchema 用法 |
|
|
|
|