{"docs":[{"title":"Action 行为按钮","body":"\nAction 行为按钮，是触发页面行为的主要方法之一\n\n## 基本用法\n\n我们这里简单实现一个点击按钮弹框的交互。\n\n\n\n## 样式\n\n### 尺寸\n\n配置`size`，显示不同尺寸\n\n\n\n### 主题\n\n可以配置`level`或者`primary`，显示不同样式。\n\n\n\n### 图标\n\n可以配置`icon`配置项，实现按钮显示图标\n\n\n\nicon 也可以是 url 地址，比如\n\n\n\n如果`label`配置为空字符串，可以只显示`icon`\n\n\n\n## 操作前确认\n\n可以通过配置`confirmText`，实现在任意操作前，弹出提示框确认是否进行该操作。\n\n\n\n## ajax 请求\n\n通过配置`\"actionType\":\"ajax\"`和`api`，可以实现 ajax 请求。\n\n\n\n### 请求成功后，跳转至某个页面\n\n##### 配置相对路径，实现单页跳转\n\n\n\n##### 配置完整路径，直接跳转指定路径\n\n\n\n### 请求成功后，显示反馈弹框\n\n\n\n更多内容查看\n\n### 请求成功后，刷新目标组件\n\n1. 目标组件需要配置 `name` 属性\n2. Action 上添加 `\"reload\": \"xxx\"`，`xxx` 为目标组件的 `name` 属性值，如果配置多个组件，`name` 用逗号分隔，另外如果想让 reload 的时候再携带些数据可以类似这样配置 `{\"reload\": \"xxx?a=${a}&b=${b}\"}`, 这样不仅让目标组件刷新，同时还会把当前环境中的数据 a 和 b 传递给 xxx.\n\n\n\n> 配置 `\"reload\": \"window\"` 可刷新当前页面\n\n### 自定义 toast 文字\n\n可以通过配置`messages`，自定义接口返回`toast`信息\n\n\n\n需要注意如果 api 结果返回了 `msg` 字段，会优先使用 api 的返回。\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ---------------------------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------- |\n| api | 格式说明。 |\n| redirect | | - | 指定当前请求结束后跳转的路径，可用 `${xxx}` 取值。 |\n| feedback | `DialogObject` | - | 如果 ajax 类型的，当 ajax 返回正常后，还能接着弹出一个 dialog 做其他交互。返回的数据可用于这个 dialog 中。格式可参考 |\n| messages | `object` | - | `success`：ajax 操作成功后提示，可以不指定，不指定时以 api 返回为准。`failed`：ajax 操作失败提示。 |\n\n## 下载请求\n\n> 1.4.0 及以上版本\n\n通过配置 `\"actionType\":\"download\"` 和 `api`，可以实现下载请求，它其实是 `ajax` 的一种特例，自动给 api 加上了 `\"responseType\": \"blob\"`。\n\n\n\n上面的例子由于环境原因没法测试，需要在返回的 header 中配置 `content-type` 和 `Content-Disposition`，比如\n\n\n\n如果接口存在跨域，除了常见的 cors header 外，还需要添加以下 header\n\n\n\n## 倒计时\n\n主要用于发验证码的场景，通过设置倒计时 `countDown`（单位是秒），让点击按钮后禁用一段时间：\n\n\n\n同时还能通过 `countDownTpl` 来控制显示的文本，其中 `${timeLeft}` 变量是剩余时间。\n\n## 跳转链接\n\n### 单页跳转\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | ------ | ------------------------------------------------------------------------------------------------------------------- |\n| actionType | `string` | `link` | 单页跳转 |\n| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值。 |\n\n### 直接跳转\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------- | ------- | ------------------------------------------------ |\n| actionType | `string` | `url` | 页面跳转 |\n| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值。 |\n| blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开。 |\n\n## 发送邮件\n\n\n\n### 异步获取数据\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | ------- | -------------------------------- |\n| actionType | `string` | `email` | 点击后显示一个弹出框 |\n| to | `string` | - | 收件人邮箱，可用 ${xxx} 取值。 |\n| cc | `string` | - | 抄送邮箱，可用 ${xxx} 取值。 |\n| bcc | `string` | - | 匿名抄送邮箱，可用 ${xxx} 取值。 |\n| subject | `string` | - | 邮件主题，可用 ${xxx} 取值。 |\n| body | `string` | - | 邮件正文，可用 ${xxx} 取值。 |\n\n## 弹框\n\n\n\n### 弹框结合 reload 刷新下拉框的例子\n\n下面是一种典型场景，有个一个下拉框，然后有个按钮能弹框新增数据，新增了之后需要下拉框重新拉取最新列表（这个例子因为没实现新增功能，所以看不出更新，如果看网络请求会发现重新请求了一次）。\n\n\n\n可以看到 `reload` 是 `myForm.group`，第一个是表单的 name，第二个是下拉框的 name。\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | -------------------------- | -------- | --------------------------------------------- |\n| actionType | `string` | `dialog` | 点击后显示一个弹出框 |\n| dialog | `string` 或 `DialogObject` | - | 指定弹框内容，格式可参考 |\n| nextCondition | `boolean` | - | 可以用来设置下一条数据的条件，默认为 `true`。 |\n\n## 抽屉\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------------------------- | -------- | ------------------------------------------ |\n| actionType | `string` | `drawer` | 点击后显示一个侧边栏 |\n| drawer | `string` 或 `DrawerObject` | - | 指定弹框内容，格式可参考 |\n\n## 复制文本\n\n\n\n可以通过 `copyFormat` 设置复制的格式，默认是文本\n\n\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ------------------------------------ | ------ | ------------------------------------ |\n| actionType | `string` | `copy` | 复制一段内容到粘贴板 |\n| content | | - | 指定复制的内容。可用 `${xxx}` 取值。 |\n\n## 刷新其他组件\n\n**属性表**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | -------- | --------------------------------------------------------------------------- |\n| actionType | `string` | `reload` | 刷新目标组件 |\n| target | `string` | - | 需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |\n\n## 组件特有的行为类型\n\n### 表单中表格添加一行\n\n该 actionType 为专用行为\n\n### 重置表单\n\n在 form 中，配置`\"type\": \"reset\"`的按钮，可以实现重置表单数据的功能\n\n\n\n### 清空表单\n\n在 form 中，配置`\"actionType\": \"clear\"`的按钮，可以实现清空表单数据的功能，跟重置不同的是，重置其实是还原到初始值，并不一定是清空。\n\n\n\n### 重置表单并提交\n\n`actionType` 配置成 `\"reset-and-submit\"`\n\n### 清空表单并提交\n\n`actionType` 配置成 `\"clear-and-submit\"`\n\n## 自定义点击事件\n\n> 1.3.0 版本新增功能\n\n如果上面的的行为不满足需求，还可以通过字符串形式的 `onClick` 来定义点击事件，这个字符串会转成 JavaScript 函数，并支持异步（如果是用 sdk 需要自己编译一个 es2017 版本）。\n\n\n\namis 会传入两个参数 `event` 和 `props`，`event` 就是 React 的事件，而 `props` 可以拿到这个组件的其他属性，同时还能调用 amis 中的内部方法。\n\n\n\n我们将前面的代码拿出来方便分析：\n\n\n\n这个函数如果返回 `false` 就会阻止 amis 其他 action 的执行，比如这个例子\n\n\n\n它的行为是先执行 alert，再执行弹框，但如果我们加上一个 `return false`，就会发现后面的 amis 弹框不执行了。\n\n\n\n如果是在表单项中，还能通过 `props.formStore.setValues();` 来修改其它表单项值\n\n\n\n## 全局键盘快捷键触发\n\n> 1.3.0 版本新增功能\n\n可以通过 `hotKey` 属性来配置键盘快捷键触发，比如下面的例子\n\n\n\n除了 ctrl 和 command 还支持 shift、alt。\n\n其它键盘特殊按键的命名列表：backspace, tab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, delete, f1 - f19, num_0 - num_9, num_multiply, num_add, num_enter, num_subtract, num_decimal, num_divide。\n\n> 注意这个主要用于实现页面级别快捷键，如果要实现回车提交功能，请将 `input-text` 放在 `form` 里，而不是给 button 配一个 `enter` 的快捷键。\n\n## Action 作为容器组件\n\n> 1.5.0 及以上版本\n\naction 还可以使用 `body` 来渲染其他组件，让那些不支持行为的组件支持点击事件，比如下面的例子\n\n\n\n在这种模式下不支持按钮的各种配置项，比如 `label`、`size`、`icon` 等，因为它只作为容器组件，没有展现。\n\n## 按钮提示\n\n通过 `tooltip` 来设置提示\n\n\n\n如果按钮是 disabled，需要使用 `disabledTip`\n\n\n\n还可以通过 `tooltipPlacement` 设置弹出位置\n\n\n\n## 通用属性表\n\n所有`actionType`都支持的通用配置项\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | ------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `action` | 指定为 Page 渲染器。 |\n| actionType | `string` | - | 【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。 |\n| label | `string` | - | 按钮文本。可用 `${xxx}` 取值。 |\n| level | `string` | `default` | 按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。 |\n| size | `string` | - | 按钮大小，支持：`xs`、`sm`、`md`、`lg`。 |\n| icon | `string` | - | 设置图标，例如`fa fa-plus`。 |\n| iconClassName | `string` | - | 给图标上添加类名。 |\n| rightIcon | `string` | - | 在按钮文本右侧设置图标，例如`fa fa-plus`。 |\n| rightIconClassName | `string` | - | 给右侧图标上添加类名。 |\n| active | `boolean` | - | 按钮是否高亮。 |\n| activeLevel | `string` | - | 按钮高亮时的样式，配置支持同`level`。 |\n| activeClassName | `string` | `is-active` | 给按钮高亮添加类名。 |\n| block | `boolean` | - | 用`display:\"block\"`来显示按钮。 |\n| confirmText | | - | 当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。 |\n| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |\n| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |\n| disabledTip | `string` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |\n| tooltipPlacement | `string` | `top` | 如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。 |\n| close | `boolean` or `string` | - | 当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。当值为字符串，并且是祖先层弹框的名字的时候，会把祖先弹框关闭掉。 |\n| required | `Array` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | --------------------------------------------- | -------- |\n| click | | 点击 |\n| mouseenter | - | 鼠标移入 |\n| mouseleave | - | 鼠标移出 |\n\n## 动作表\n\n暂无\n","path":"/zh-CN/components/action"},{"title":"Alert 提示","body":"\n用来做文字特殊提示，分为四类：提示类、成功类、警告类和危险类。\n\n## 基本使用\n\n`level`属性支持 4 种预设样式：`info`, `success`, `warning`, `danger`。\n\n\n\n## 图标\n\n配置`\"showIcon\": true`后展示图标让信息更加醒目。可以通过`icon`属性自定义设置 icon 内容，如果`icon`属性为空，则根据`level`值添加默认 icon。\n\n\n\n## level 支持表达式\n\n> 1.6.4 及以上版本\n\n修改下面例子的 status 值为 2 就能看到变化\n\n\n\n同时 icon 和 showIcon 也都支持表达式\n\n## 显示关闭按钮\n\n配置`\"showCloseButton\": true`实现显示关闭按钮。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------- | ----------------------------------------- | --------- | -------------------------------------------------------- |\n| type | `string` | `\"alert\"` | 指定为 alert 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| level | `string` | `info` | 级别，可以是：`info`、`success`、`warning` 或者 `danger` |\n| body | | | 显示内容 |\n| showCloseButton | `boolean` | `false` | 是否显示关闭按钮 |\n| closeButtonClassName | `string` | | 关闭按钮的 CSS 类名 |\n| showIcon | `boolean` | `false` | 是否显示 icon |\n| icon | `string` | | 自定义 icon |\n| iconClassName | `string` | | icon 的 CSS 类名 |\n","path":"/zh-CN/components/alert"},{"title":"AnchorNav 锚点导航","body":"\n锚点导航容器组件。\n\n## 基本用法\n\n\n\n默认想要显示多少锚点导航配置多少个 `links` 成员即可。\n\n## 水平导航\n\n\n\n## 默认定位到某个区域\n\n主要配置`active`属性来实现该效果，共有下面两种方法：\n\n#### 配置 href 值\n\n\n\n#### 配置索引值\n\n单个`link`上不要配置`href`属性，配置需要展示的`link`索引值，`0`代表第一个。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | --------------------------------- | ----------------------------------- | -------------------------------------------------------------------------- |\n| type | `string` | `\"anchor-nav\"` | 指定为 AnchorNav 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| linkClassName | `string` | | 导航 Dom 的类名 |\n| sectionClassName | `string` | | 锚点区域 Dom 的类名 |\n| links | `Array` | | links 内容 |\n| direction | `string` | `\"vertical\"` | 可以配置导航水平展示还是垂直展示。对应的配置项分别是：vertical、horizontal |\n| active | `string` | | 需要定位的区域 |\n| links[x].title | `string` | | 区域 标题 |\n| links[x].href | `string` | | 区域 标识 |\n| links | | 区域 内容区 |\n| links[x].className | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | 区域成员 样式 |\n","path":"/zh-CN/components/anchor-nav"},{"title":"App 多页应用","body":"\n用于实现多页应用，适合于全屏模式，如果只是局部渲染请不要使用。\n\n## 基本用法\n\n类型定义为 `app`，通过 pages 定义页面，支持层级，支持内嵌 schema，或者 通过 schemaApi 远程拉取页面，完整用法请参考 项目里的代码示例，需要修改 `env`：\n\n\n\n## 属性说明\n\n- `type` 请配置成 `app`\n- `api` 页面配置接口，如果你想远程拉取页面配置请配置。返回配置路径 `json>data>pages`，具体格式请参考 `pages` 属性。\n- `brandName` 应用名称。\n- `logo` 支持图片地址，或者 svg。\n- `className` css 类名。\n- `header` 顶部区域。\n- `asideBefore` 页面菜单上前面区域。\n- `asideAfter` 页面菜单下前面区域。\n- `footer` 页面。\n- `pages` `Array<页面配置>`具体的页面配置。\n 通常为数组，数组第一层为分组，一般只需要配置 label 集合，如果你不想分组，直接不配置，真正的页面请在第二层开始配置，即第一层的 children 中。\n\n 具体的页面配置也支持属性结构，每层有以下配置。\n\n - `label` 菜单名称。\n - `icon` 菜单图标，比如：fa fa-file.\n - `url` 页面路由路径，当路由命中该路径时，启用当前页面。当路径不是 `/` 打头时，会连接父级路径。比如：父级的路径为 `folder`，而此时配置 `pageA`, 那么当页面地址为 `/folder/pageA` 时才会命中此页面。当路径是 `/` 开头如： `/crud/list` 时，则不会拼接父级路径。另外还支持 `/crud/view/:id` 这类带参数的路由，页面中可以通过 `${params.id}` 取到此值。\n - `schema` 页面的配置，具体配置请前往 \n - `schemaApi` 如果想通过接口拉取，请配置。返回路径为 `json>data`。schema 和 schemaApi 只能二选一。\n - `link` 如果想配置个外部链接菜单，只需要配置 link 即可。\n - `redirect` 跳转，当命中当前页面时，跳转到目标页面。\n - `rewrite` 改成渲染其他路径的页面，这个方式页面地址不会发生修改。\n - `isDefaultPage` 当你需要自定义 404 页面的时候有用，不要出现多个这样的页面，因为只有第一个才会有用。\n - `visible` 有些页面可能不想出现在菜单中，可以配置成 `false`，另外带参数的路由无需配置，直接就是不可见的。\n - `className` 菜单类名。\n","path":"/zh-CN/components/app"},{"title":"Audio 音频","body":"\n## 基本使用\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------- | ------------------------------------------------ | --------------------------------------- |\n| type | `string` | `\"audio\"` | 指定为 audio 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| inline | `boolean` | true | 是否是内联模式 |\n| src | `string` | | 音频地址 |\n| loop | `boolean` | false | 是否循环播放 |\n| autoPlay | `boolean` | false | 是否自动播放 |\n| rates | `array` | `[]` | 可配置音频播放倍速如：`[1.0, 1.5, 2.0]` |\n| controls | `array` | `['rates', 'play', 'time', 'process', 'volume']` | 内部模块定制化 |\n","path":"/zh-CN/components/audio"},{"title":"Avatar 头像","body":"\n用来显示用户头像\n\n## 基本使用\n\n\n\n## 文字\n\n\n\n## 图标\n\n通过 icon 设置图标\n\n\n\n> 如果同时存在 src、text 和 icon，会优先用 src、接着 text、最后 icon\n\n## 动态图片或文字\n\nsrc、text 都支持变量，可以从上下文中动态获取图片或文字，下面的例子中：\n- 第一个获取到了，显示正常\n- 第二个没获取到，因此降级为显示 icon\n- 第三个图片没获取到，由于 text 优先级比 icon 高，所以显示 text\n\n\n\n## 方形和圆角形\n\n可以通过 shape 改成方形或圆角形\n\n\n\n## 大小\n\n通过 size 可以控制头像的大小\n\n\n\n## 控制字符类型距离左右两侧边界单位像素\n\n通过 gap 可以控制字符类型距离左右两侧边界单位像素\n\n\n\n## 图片拉伸方式\n\n通过 `fit` 可以控制图片拉伸方式，默认是 `'cover'`\n\n\n\n## 控制图片是否允许拖动\n\n通过 draggable 可以控制图片是否允许拖动\n\n\n\n## 图片加载失败后，通过 onError 控制是否进行 text、icon 置换\n> 如果同时存在 text 和 icon，会优先用 text、接着 icon\n\n\n\n## 样式\n\n可以通过 style 来控制背景及文字颜色\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ----------- | ------ | --------------------- |\n| className | `string` | | 外层 dom 的类名 |\n| style | `object` | | 外层 dom 的样式 |\n| fit |`'contain'` \\| `'cover'` \\| `'fill'` \\| `'none'` \\| `'scale-down'` | `'cover'` | 具体细节可以参考 MDN |\n| src | `string` | | 图片地址 |\n| text | `string` | | 文字 |\n| icon | `string` | `'fa fa-user'` | 图标 |\n| shape | `'circle'` \\| `'square'` \\| `'rounded'` | `'circle'` | 形状，有三种 `'circle'` （圆形）、`'square'`（正方形）、`'rounded'`（圆角） |\n| size | `number` \\| `'default'` \\| `'normal'` \\| `'small'` | `'default'` | `'default' \\| 'normal' \\| 'small'`三种字符串类型代表不同大小（分别是48、40、32），也可以直接数字表示 |\n| gap | `number` | 4 | 控制字符类型距离左右两侧边界单位像素 |\n| alt | `number` | | 图像无法显示时的替代文本 |\n| draggable | `boolean` | | 图片是否允许拖动 |\n| crossOrigin | `'anonymous'` \\| `'use-credentials'` \\| `''` | | 图片的 `CORS` 属性设置 |\n| onError | `string` | | 图片加载失败的字符串，这个字符串是一个New Function内部执行的字符串，参数是event（使用event.nativeEvent获取原生dom事件），这个字符串需要返回boolean值。设置 `\"return ture;\"` 会在图片加载失败后，使用 `text` 或者 `icon` 代表的信息来进行替换。目前图片加载失败默认是不进行置换。注意：图片加载失败，不包括$获取数据为空情况 |\n","path":"/zh-CN/components/avatar"},{"title":"Badge 角标","body":"\n## 基本用法\n\n部分组件可以设置 `badge` 属性来显示角标。\n\n> 1.2.2 及之前版本只支持头像组件\n>\n> 1.2.3 开始支持按钮、链接、模板组件。\n\n\n\n## 显示文字或数值\n\n设置 `mode` 为 `text`，通过 `text` 属性来显示文字或数字，数值为零的时候将不显示。\n\n\n\n## 显示位置\n\n通过 `position` 来控制角标显示位置，默认 `top-right`，还可以设置为 `top-left`、`bottom-left`、`bottom-right`。\n\n\n\n通过 `offset` 来控制角标显示位置，offset优先级大于position。当设置了offset后，以postion为top-right为基准进行定位。offset在mode=ribbon下设置无效。\n\n\n\n## 动态数字\n\n`text` 可以取上下文变量。\n\n\n\n## 设置封顶值\n\n通过 `overflowCount` 可以设置封顶值。超过 overflowCount 的会显示为 ${overflowCount}+，默认的 overflowCount 为 99\n\n\n\n## 动态控制是否显示角标\n\n角标可以直接写表达式来判断是否显示\n\n\n\n还可以通过 `visibleOn` 表达式来动态控制，这样还能设置其他属性\n\n\n\n## 设置大小\n\n通过 `size` 来控制大小\n\n\n\n## 设置角标级别\n\n通过 `level` 来设置角标级别，改变角标背景颜色\n\n\n\n## 是否显示动画\n\n在默认点状态下，可以通过设置 `animation` 属性来控制是否显示动画\n\n\n\n## 自定义样式\n\n通过 `style` 来控制展现样式，比如背景及文字的颜色\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ------------------- | ---------- | ----------------------------------------------------------------|\n| mode | `string` | dot | 角标类型，可以是 dot/text/ribbon |\n| text | `text`、`number` | | 角标文案，支持字符串和数字，在mode='dot'下设置无效 |\n| size | `number` | | 角标大小 |\n| level | `string` | | 角标级别, 可以是info/success/warning/danger, 设置之后角标背景颜色不同 |\n| overflowCount | `number` | 99 | 设置封顶的数字值 |\n| position | `string` | top-right | 角标位置， 可以是top-right/top-left/bottom-right/bottom-left |\n| offset | `number[top, left]` | | 角标位置，优先级大于position，当设置了offset后，以postion为top-right为基准进行定位\n| className | `string` | | 外层 dom 的类名 |\n| animation | `boolean` | | 角标是否显示动画 |\n| style | `object` | | 角标的自定义样式 |\n| visibleOn | | | 控制角标的显示隐藏 |\n","path":"/zh-CN/components/badge"},{"title":"BarCode 条形码","body":"\n## 基本用法\n\n\n\n## 条形码配置\n\n通过 options 属性配置，具体请参考，比如\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | ------------------------------ |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 显示的颜色值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n","path":"/zh-CN/components/barcode"},{"title":"Breadcrumb 面包屑","body":"\n## 基本用法\n\n\n\n## 动态数据\n\n可以配置 source 来获取上下文中的动态数据，结合 来实现动态生成。\n\n\n\n## 分隔符\n\n\n\n## 下拉菜单\n\n\n\n## 最大展示长度\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | -------------------------------- | ------------- | ---------------------------------------------------- |\n| className | `string` | | 外层类名 |\n| itemClassName | `string` | | 导航项类名 |\n| separatorClassName | `string` | | 分割符类名 |\n| dropdownClassName | `string` | | 下拉菜单类名 |\n| dropdownItemClassName | `string` | | 下拉菜单项类名 |\n| separator | `string` | | 分隔符 |\n| labelMaxLength | `number` | 16 | 最大展示长度 |\n| tooltipPosition | `top \\| bottom \\| left \\| right` | `top` | 浮窗提示位置 |\n| source | `string` | | 动态数据 |\n| items[].label | `string` | | 文本 |\n| items[].href | `string` | | 链接 |\n| items |\n| items[].dropdown | `dropdown[]` | | 下拉菜单，dropdown[]的每个对象都包含label、href、icon属性 |\n","path":"/zh-CN/components/breadcrumb"},{"title":"ButtonGroup 按钮组","body":"\n## 基本用法\n\n\n\n## 垂直模式\n\n配置`\"vertical\": true`，实现垂直模式\n\n\n\n## 平铺模式\n\n配置 `\"tiled\": true` 实现平铺模式\n\n\n\n## 按钮主题样式\n\n配置 `btnLevel` 统一设置按钮主题样式，注意 `buttons ` 或 `options` 中的`level`属性优先级高于`btnLevel`。配置 `btnActiveLevel` 为按钮设置激活态时的主题样式。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | ------------------------------------------------------------------------------------------------------------------- | ---------------- | -------------------------- |\n| type | `string` | `\"button-group\"` | 指定为 button-group 渲染器 |\n| vertical | `boolean` | `false` | 是否使用垂直模式 |\n| tiled | `boolean` | `false` | 是否使用平铺模式 |\n| btnLevel | `'link' \\| 'primary' \\| 'secondary' \\| 'info'\\|'success' \\| 'warning' \\| 'danger' \\| 'light'\\| 'dark' \\| 'default'` | `\"default\"` | 按钮样式 |\n| btnActiveLevel | `'link' \\| 'primary' \\| 'secondary' \\| 'info'\\|'success' \\| 'warning' \\| 'danger' \\| 'light'\\| 'dark' \\| 'default'` | `\"default\"` | 选中按钮样式 |\n| buttons | `Array` | | |\n| className | `string` | | 外层 Dom 的类名 |\n","path":"/zh-CN/components/button-group"},{"title":"Button 按钮","body":"\n## 基本用法\n\n\n\n`button` 实际上是 `action` 的别名，更多用法见\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | -------------------------------------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------- |\n| className | `string` | | 指定添加 button 类名 |\n| url | `string` | | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 |\n| size | `'xs' \\| 'sm' \\| 'md' \\| 'lg' ` | | 设置按钮大小 |\n| actionType | `'button' \\| 'reset' \\| 'submit'\\| 'clear'\\| 'url'` | button | 设置按钮类型 |\n| level | `'link' \\| 'primary' \\| 'enhance' \\| 'secondary' \\| 'info'\\|'success' \\| 'warning' \\| 'danger' \\| 'light'\\| 'dark' \\| 'default'` | default | 设置按钮样式 |\n| tooltip | `'string' \\| 'TooltipObject'` | | 气泡提示内容 |\n| tooltipPlacement | `'top' \\| 'right' \\| 'bottom' \\| 'left' ` | top | 气泡框位置器 |\n| tooltipTrigger | `'hover' \\| 'focus'` | | 触发 tootip |\n| disabled | `'boolean'` | false | 按钮失效状态 |\n| block | `'boolean'` | false | 将按钮宽度调整为其父宽度的选项 |\n| loading | `'boolean'` | false | 显示按钮 loading 效果 |\n| loadingOn | `'string'` | | 显示按钮 loading 表达式 |\n","path":"/zh-CN/components/button"},{"title":"Calendar 日历日程","body":"\n## 基本用法\n\n设置 `schedules` 属性\n\n\n\n## 自定义颜色\n\n\n\n\n\n## 自定义日程展示\n\n\n\n## 支持从数据源中获取日程\n\n\n\n## 放大模式\n\n\n\n## Calendar 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | ----------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"calendar\"` | 指定为 calendar 渲染器 |\n| schedules | `Array<{startTime: string, endTime: string, content: any, className?: string}> \\| string` | | 日历中展示日程，可设置静态数据或从上下文中取数据，startTime 和 endTime 格式参考 |\n| scheduleClassNames | `Array` | ` |\n| scheduleAction | `SchemaNode` | | 自定义日程展示 |\n| largeMode | `boolean` | `false` | 放大模式 |\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |","path":"/zh-CN/components/calendar"},{"title":"Card 卡片","body":"\n## 基本用法\n\n\n\n## 打开链接\n\n> 1.4.0 及以上版本\n\n通过 `href` 属性可以设置点击卡片打开外部链接\n\n\n\n## 设置头像文本\n\n如果没有 avatar，还可以通过 `avatarText` 设置头像文本\n\n\n\n> 1.5.0 及以上版本\n\n可以设置文本背景色，它会根据数据分配一个颜色，主要配合 `cards` 使用\n\n\n\n## 点击卡片的行为\n\n> 1.4.0 及以上版本\n\n通过设置 `itemAction` 可以设置整个卡片的点击行为\n\n\n\n注意它和前面的 `href` 配置冲突，如果设置了 `href` 这个将不会生效\n\n## 设置多媒体卡片\n\n> 1.5.0 及以上版本\n\n通过设置 `media` 可以设置为多媒体卡片, 通过 `mediaPosition` 可以设置多媒体位置\n\n\n\n## 设置标签卡片\n\n> 1.5.0 及以上版本\n\n\n\n## 设置按钮卡片\n\n> 1.5.0 及以上版本\n\n按钮卡片一般以卡片形式展示当前卡片的执行语义，例如：创建卡片、添加卡片等场景。\n\n\n\n## 设置文本卡片\n\n> 1.5.0 及以上版本\n\n\n\n## 设置单元格卡片\n\n> 1.5.0 及以上版本\n\n\n\n## 配置工具栏\n\n> 1.5.0 及以上版本\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------------------- | ------------------------------------ | ----------------------------------- | ---------------------------------------- |\n| type | `string` | `\"card\"` | 指定为 Card 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| href | | | 外部链接 |\n| header | `Object` | | Card 头部内容设置 |\n| header.className | `string` | | 头部类名 |\n| header.title | | | 标题 |\n| header.titleClassName | `string` | | 标题类名 |\n| header.subTitle | | | 副标题 |\n| header.subTitleClassName | `string` | | 副标题类名 |\n| header.subTitlePlaceholder | `string` | | 副标题占位 |\n| header.description | | | 描述 |\n| header.descriptionClassName | `string` | | 描述类名 |\n| header.descriptionPlaceholder | `string` | | 描述占位 |\n| header.avatar | | | 图片 |\n| header.avatarClassName | `string` | `\"pull-left thumb avatar b-3x m-r\"` | 图片包括层类名 |\n| header.imageClassName | `string` | | 图片类名 |\n| header.avatarText | | | 如果不配置图片，则会在图片处显示该文本 |\n| header.avatarTextBackground | `Array` | | 设置文本背景色，它会根据数据分配一个颜色 |\n| header.avatarTextClassName | `string` | | 图片文本类名 |\n| header.highlight | `boolean` | `false` | 是否显示激活样式 |\n| header.highlightClassName | `string` | | 激活样式类名 |\n| header.href | | | 点击卡片跳转的链接地址 |\n| header.blank | `boolean` | `true` | 是否新窗口打开 |\n| body | `Array` | | 内容容器，主要用来放置非表单项组件 |\n| bodyClassName | `string` | | 内容区域类名 |\n| actions | Array<> | | 配置按钮集合 |\n| actionsCount | `number` | `4` | 按钮集合每行个数 |\n| itemAction | | | 点击卡片的行为 |\n| media | `Object` | | Card 多媒体部内容设置 |\n| media.type | `'image'\\|'video'` | | 多媒体类型 |\n| media.url | `string` | | 图片/视频链接 |\n| media.position | `'left'\\|'right'\\|'top'\\|'bottom'` | `'left'` | 多媒体位置 |\n| media.className | `string` | `\"w-44 h-28\"` | 多媒体类名 |\n| media.isLive | `boolean` | `false` | 视频是否为直播 |\n| media.autoPlay | `boolean` | `false` | 视频是否自动播放 |\n| media.poster | `string` | `false` | 视频封面 |\n| secondary | | | 次要说明 |\n| toolbar | Array<> | | 工具栏按钮 |\n| dragging | `boolean` | `false` | 是否显示拖拽图标 |\n| selectable | `boolean` | `false` | 卡片是否可选 |\n| checkable | `boolean` | `true` | 卡片选择按钮是否禁用 |\n| selected | `boolean` | `false` | 卡片选择按钮是否选中 |\n| hideCheckToggler | `boolean` | `false` | 卡片选择按钮是否隐藏 |\n| multiple | `boolean` | `false` | 卡片是否为多选 |\n","path":"/zh-CN/components/card"},{"title":"Cards 卡片组","body":"\n卡片展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n这里我们使用手动初始数据域的方式，即配置`data`属性，进行数据域的初始化。\n\n\n\n或者你也可以使用 CRUD 的 \n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | -------------------------------------------- | ------------------- | ------------------------------ |\n| type | `string` | | `\"cards\"` 指定为卡片组。 |\n| title | | | 标题 |\n| source | | `${items}` | 数据源, 获取当前数据域中的变量 |\n| placeholder | | ‘暂无数据’ | 当没数据的时候的文字提示 |\n| className | `string` | | 外层 CSS 类名 |\n| headerClassName | `string` | `amis-grid-header` | 顶部外层 CSS 类名 |\n| footerClassName | `string` | `amis-grid-footer` | 底部外层 CSS 类名 |\n| itemClassName | `string` | `col-sm-4 col-md-3` | 卡片 CSS 类名 |\n| card | | | 配置卡片信息 |\n","path":"/zh-CN/components/cards"},{"title":"Carousel 轮播图","body":"\n## 基本用法\n\n\n\n## 动态列表\n\n轮播图组件目前没有获取数据的配置，因此需要依赖 `service` 来获取数据。\n\n\n\n目前数据关联是通过 name 的方式，因此 api 返回应该是类似这样的：\n\n\n\n其中的 `imageList` 要和配置的 `name` 值对应。\n\n## 点击图片打开外部链接\n\n> 1.3.3 及以上版本\n\n需要放回的字段中除了前面的 image，还有 href 属性\n\n\n\n## 自定义轮播图的展现\n\n通过配置 `itemSchema` 可以自定义轮播图的展现，比如图片默认背景配置是 contain，可以改成 cover：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------------- | --------- | ---------------------- | ------------------------------------------------------- |\n| type | `string` | `\"carousel\"` | 指定为 Carousel 渲染器 |\n| className | `string` | `\"panel-default\"` | 外层 Dom 的类名 |\n| options | `array` | `[]` | 轮播面板数据 |\n| options.image | `string` | | 图片链接 |\n| options.href | `string` | | 图片打开网址的链接 |\n| options.imageClassName | `string` | | 图片类名 |\n| options.title | `string` | | 图片标题 |\n| options.titleClassName | `string` | | 图片标题类名 |\n| options.description | `string` | | 图片描述 |\n| options.descriptionClassName | `string` | | 图片描述类名 |\n| options.html | `string` | | HTML 自定义，同一致 |\n| itemSchema | `object` | | 自定义`schema`来展示数据 |\n| auto | `boolean` | `true` | 是否自动轮播 |\n| interval | `string` | `5s` | 切换动画间隔 |\n| duration | `string` | `0.5s` | 切换动画时长 |\n| width | `string` | `auto` | 宽度 |\n| height | `string` | `200px` | 高度 |\n| controls | `array` | `['dots', 'arrows']` | 显示左右箭头、底部圆点索引 |\n| controlsTheme | `string` | `light` | 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式 |\n| animation | `string` | fade | 切换动画效果，默认`fade`，另有`slide`模式 |\n| thumbMode | `string` | `\"cover\" \\| \"contain\"` | 图片默认缩放模式 |\n\n- `type` 请设置成 `carousel`\n- `className` 外层 Dom 的类名\n- `options` 轮播面板数据，默认`[]`，支持以下模式\n - 图片\n - `image` 图片链接\n - `imageClassName` 图片类名\n - `title` 图片标题\n - `titleClassName` 图片标题类名\n - `description` 图片描述\n - `descriptionClassName` 图片描述类名\n - `html` HTML 自定义，同一致\n- `itemSchema` 自定义`schema`来展示数据\n- `auto` 是否自动轮播，默认`true`\n- `interval` 切换动画间隔，默认`5s`\n- `duration` 切换动画时长，默认`0.5s`\n- `width` 宽度，默认`auto`\n- `height` 高度，默认`200px`\n- `controls` 显示左右箭头、底部圆点索引，默认`['dots', 'arrows']`\n- `controlsTheme` 左右箭头、底部圆点索引颜色，默认`light`，另有`dark`模式\n- `animation` 切换动画效果，默认`fade`，另有`slide`模式\n- `thumbMode` 图片默认缩放模式，可以配置 `\"cover\" | \"contain\"`\n","path":"/zh-CN/components/carousel"},{"title":"Chart 图表","body":"\n图表渲染器，采用 echarts 渲染，配置格式跟 echarts 相同，\n\n## 基本用法\n\n\n\napi 返回支持两种格式，一种是直接返回完整 echarts 配置，数据包含在配置里，具体格式请参考后面的静态数据写法，另一种是返回纯数据，具体请参考动态数据写法。\n\n## 静态数据\n\n在 `config` 里填写完整的 echarts 配置，这里的数据是静态的。\n\n\n\n## 动态数据\n\n如果要实现动态数据，需要在 config 中做调整，比如将前面的例子改成如下写法\n\n\n\n其中 api 返回内容是如下写法，可以看到通过语法，我们可以将 api 放回结果中的 line 字段作为折线的数据。\n\n\n\n除了 `config` 中的 `data`，`config` 里的其它属性也都支持数据映射，还能支持数据映射中的各种过滤器。\n\n### 使用上层数据接口\n\n有时候数据是在上层获取的，比如通过 service 中返回了数据，这时需要通过 `trackExpression` 来指定跟踪什么数据，比如下面的例子，数据是从 service 获取的就需要配置 `trackExpression`。\n\n\n\n## 配置图表点击行为\n\n可以通过配置`\"clickAction\": {}`，来指定图表节点的点击行为，支持 amis 的 。\n\n然后在配置的行为中可以通过 的值，例如下面例子中可以通过`${value|json}`获取到点击节点的`传入的数据值`\n\n> 点击下面坐标中的节点查看效果！\n\n\n\n## 远程拉取动态配置项\n\n配置`api`，来远程拉取图标配置\n\n\n\n## 通过组件间联动，更新图表\n\n\n\n## 对函数配置的特殊支持\n\nECharts 中有些配置项可以写函数，比如 formatter 和 sort，但在 JSON 里无法写函数，因此我们做了特殊支持，将看起来像函数的字符串转成了函数：\n\n\n\n## 使用地图\n\n从 amis 1.1.0 版本开始，ECharts 版本升级到 5.0.0，为了规避政策风险，在这个版本删除了之前的地图 geojson，如果需要这个功能需要手动引入。\n\n方法是去 `https://github.com/apache/echarts/tree/master/test/data/map/js` 下载 `china.js` 和 `world.js`。\n\n对于 npm 版本，直接 `import` 这两个文件就行。\n\n对于 JS SDK 版本，需要先加入如下代码如下方式：\n\n\n\n然后通过 script 标签引入这两个文件。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | -------------------------------------------- | --------- | ------------------------------------------------------------------ |\n| type | `string` | `\"chart\"` | 指定为 chart 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| body | | | 内容容器 |\n| api | | | 配置项接口地址 |\n| source | | | 通过数据映射获取数据链中变量值作为配置 |\n| initFetch | `boolean` | | 组件初始化时，是否请求接口 |\n| interval | `number` | | 刷新时间(最小 1000) |\n| config | `object` 或 `string` | | 设置 eschars 的配置项,当为`string`的时候可以设置 function 等配置项 |\n| style | `object` | | 设置根元素的 style |\n| width | `string` | | 设置根元素的宽度 |\n| height | `string` | | 设置根元素的高度 |\n| replaceChartOption | `boolean` | `false` | 每次更新是完全覆盖配置项还是追加？ |\n| `trackExpression` | `string` | | 当这个表达式的值有变化时更新图表 |\n","path":"/zh-CN/components/chart"},{"title":"Code 代码高亮","body":"\n使用代码高亮的方式来显示一段代码。\n\n## 基本用法\n\n\n\n## 语言设置\n\n默认语言是 html，可以通过 language 指定以下语言：\n\n`bat`、 `c`、 `coffeescript`、 `cpp`、 `csharp`、 `css`、 `dockerfile`、 `fsharp`、 `go`、 `handlebars`、 `html`、 `ini`、 `java`、 `javascript`、 `json`、 `less`、 `lua`、 `markdown`、 `msdax`、 `objective-c`、 `php`、 `plaintext`、 `postiats`、 `powershell`、 `pug`、 `python`、 `r`、 `razor`、 `ruby`、 `sb`、 `scss`、`shell`、 `sol`、 `sql`、 `swift`、 `typescript`、 `vb`、 `xml`、 `yaml`\n\n\n\nlanguage 支持从上下文获取数据\n\n\n\n## 动态数据\n\n可以使用 name 来从上下文来获取数据，比如\n\n\n\n因此它还能放在表单、crud 中实现代码的展现。\n\n## 主题及 tab 大小\n\n通过 `editorTheme` 设置主题，`tagSize` 设置 tab 宽度\n\n\n\n## 超出换行\n\n> 1.5.1 及以上版本\n\n通过 `wordWrap` 设置是否折行，默认是折行\n\n\n\n## 自定义语言高亮\n\n还可以通过 `customLang` 参数来自定义高亮，比如下面这个示例\n\n\n\n`customLang` 中主要是 `tokens` 设置，这里是语言词法配置，它有 4 个配置项：\n\n- `name`：词法名称\n- `regex`：词法的正则匹配，注意因为是在字符串中，这里正则中如果遇到 `\\` 需要写成 `\\\\`\n- `regexFlags`: 可选，正则的标志参数\n- `color`：颜色\n- `fontStyle`: 可选，字体样式，比如 `bold` 代表加粗\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | ---------------------------------- |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 显示的颜色值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n| language | `string` | | 所使用的高亮语言，默认是 plaintext |\n| tabSize | `number` | 4 | 默认 tab 大小 |\n| editorTheme | `string` | 'vs' | 主题，还有 'vs-dark' |\n| wordWrap | `string` | `true` | 是否折行 |\n","path":"/zh-CN/components/code"},{"title":"Collapse 折叠器","body":"\n## 基本用法\n\n\n\n## 手风琴模式\n\n\n\n## 自定义图标\n\n\n\n## 设置图标位置\n\n\n\n## 面板嵌套\n\n\n\n## 折叠面板禁用\n\n\n\n## 折叠面板图标隐藏\n\n\n\n## CollapseGroup 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| - | - | - | - |\n| type | `string` | `\"collapse-group\"` | 指定为 collapse-group 渲染器 |\n| activeKey | `Array \\| string \\| number` | - | 初始化激活面板的key |\n| accordion | `boolean` | `false` | 手风琴模式 |\n| expandIcon | `SchemaNode` | - | 自定义切换图标 |\n| expandIconPosition | `string` | `\"left\"` | 设置图标位置，可选值`left \\| right` |\n\n## Collapse 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| - | - | - | - |\n| type | `string` | `\"collapse\"` | 指定为 collapse 渲染器 |\n| disabled | `boolean` | `false` | 禁用 |\n| collapsed | `boolean` | `true` | 初始状态是否折叠 |\n| key | `string \\| number` | - | 标识 |\n| header | `string \\| SchemaNode` | - | 标题 |\n| body | `string \\| SchemaNode` | - | 内容 |\n| showArrow | `boolean` | `true` | 是否展示图标 |\n\n","path":"/zh-CN/components/collapse"},{"title":"Color 颜色","body":"\n用于展示颜色\n\n## 基本用法\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | --------- | ------ | -------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"color\"`；在 Form 中用作静态展示，为`\"static-color\"` |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 显示的颜色值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n| defaultColor | `string` | `#ccc` | 默认颜色值 |\n| showValue | `boolean` | `true` | 是否显示右边的颜色值 |\n","path":"/zh-CN/components/color"},{"title":"Container 容器","body":"\nContainer 是一种容器组件，它可以渲染其他 amis 组件。\n\n注意 Container 组件因为历史原因多了一层 div，推荐使用 来作为容器。\n\n## 基本用法\n\n\n\n### style\n\ncontainer 可以通过 style 来设置样式，比如背景色或背景图，注意这里的属性是使用驼峰写法，是 `backgroundColor` 而不是 `background-color`。\n\n\n\n### wrapperComponent\n\n修改标签名可以让容器使用其它标签渲染，比如 `pre`\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------- | ------------- | ----------------------- |\n| type | `string` | `\"container\"` | 指定为 container 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| bodyClassName | `string` | | 容器内容区的类名 |\n| wrapperComponent | `string` | `\"div\"` | 容器标签名 |\n| style | `Object` | | 自定义样式 |\n| body | | | 容器内容 |\n","path":"/zh-CN/components/container"},{"title":"CRUD 增删改查","body":"\nCRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作。\n\n注意 CRUD 所需的数据必须放 items 中，因此如果只是想显示表格类型的数据没有分页，请使用 。\n\n## 基本用法\n\n最基本的用法是配置 **数据源接口(api)** 以及 **展示列(columns)**\n\n\n\n## 数据源接口数据结构要求\n\n- `items`或`rows`：用于返回数据源数据，格式是数组\n- `total`: 用于返回数据库中一共有多少条数据，用于生成分页\n\n\n\n如果无法知道数据总数，只能知道是否有下一页，请返回如下格式，amis 会简单生成一个简单版本的分页控件。\n\n\n\n如果不需要分页，或者配置了 `loadDataOnce` 则可以忽略掉 `total` 和 `hasNext` 参数。\n\n> 如果 api 地址中有变量，比如 `/api/mock2/sample/${id}`，amis 就不会自动加上分页参数，需要自己加上，改成 `/api/mock2/sample/${id}?page=${page}&perPage=${perPage}`\n\n## 功能\n\n既然这个渲染器叫增删改查，那接下来分开介绍这几个功能吧。\n\n### 增\n\n其实这个渲染器并没有包含新增功能，新增功能其实还是依靠其他位置放个弹框表单完成，弹框完事了会自动让页面里面的 CRUD 刷新如：\n\n\n\n当然如果你不想要自动刷新，那么给按钮配置 reload: \"none\" 就行了。\n\n### 删\n\n删除功能主要有三种实现：或者直接添加一个操作栏，在里面放个类型为 ajax 类型的按钮即可。在这个按钮里面能获得对应的行数据，而且完成后也会自动刷新这个 CRUD 列表。\n\n\n\n### 改\n\n改和删其实是差不多的，唯一的区别在于，配置不同的 api，按钮类型改成弹框。\n\n\n\n弹框里面可用数据自动就是点击的那一行的行数据，如果列表没有返回，可以在 form 里面再配置个 initApi 初始化数据，如果行数据里面有倒是不需要再拉取了。表单项的 name 跟数据 key 对应上便自动回显了。默认发送给表单的保存接口只会包含配置了的表单项，如果不够，请在 api 上配置数据映射，或者直接添加 hidden 类型的表单项（即隐藏域 input[type=hidden]）。\n\n### 查\n\n查，就不单独介绍了，这个文档绝大部分都是关于查的。\n\n## 展示模式\n\nCRUD 支持下面 3 种展示模式，默认为 Table 表格模式。\n\n### Table 表格模式\n\nTable 模式支持 中的所有功能。\n\n\n\n这个模式下会默认开启固定表头功能，如果不需要可以使用 `\"affixHeader\": false` 关闭。\n\n### List 列表模式\n\nList 模式支持 中的所有功能。\n\n\n\n### Cards 卡片模式\n\nCards 模式支持 中的所有功能。\n\n\n\n## 查询条件表单\n\n大部分表格展示有对数据进行检索的需求，CRUD 自身支持通过配置`filter`，实现查询条件过滤表单\n\n`filter` 配置实际上同 组件，因此支持绝大部分`form`的功能。\n\n\n\n**请注意**：在默认没有自定义配置 api 数据映射时，提交查询条件表单，会自动将表单中的表单项值，发送给`crud`所配置的接口，然后通过后端接口，实现对数据的过滤操作，前端默认是不会进行任何的数据过滤操作\n\n如果想前端实现过滤功能，请看部分。\n\n### 自动生成查询区域\n\n通过设置`\"autoGenerateFilter\": true`开启查询区域，会根据列元素的 `searchable` 属性值，自动生成查询条件表单，只有 `searchable` 属性值为合法的组件 Schema 时才会生成查询条件。注意这个属性和 `filter` 冲突，开启 `filter` 后 `autoGenerateFilter` 将会失效。\n\n\n\n## 配置默认请求参数\n\n可以配置`defaultParams`，来指定拉取接口时的默认参数：\n\n\n\n例如上例中，配置`{ perPage: 50 }`，指定分页的默认每页数据条数为 50 条。\n\n## 数据源接口轮询\n\n可以配置`interval`来实现数据接口轮询功能，最低为`1000`毫秒：\n\n\n\n配置`stopAutoRefreshWhen`表达式，来实现满足条件，停止轮询\n\n## 列配置\n\n除了支持 以外，crud 还支持下面这些配置，帮助更好的操作数据\n\n### 排序检索\n\n可以在列上配置`\"sortable\": true`，该列表头右侧会渲染一个可点击的排序图标，可以切换`正序`和`倒序`。\n\n\n\namis 只负责生成排序组件，并将排序参数传递给接口，而不会在前端对数据进行排序处理。参数格式如下：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n### 快速搜索\n\n可以在列上配置`\"searchable\": true`，该列表头右侧会渲染一个可点击的搜索图标，点击可以输入关键字进行该列的搜索：\n\n\n\namis 只负责生成搜索组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n### 快速过滤\n\n可以在列上配置`filterable`属性，该列表头右侧会渲染一个可点击的过滤图标，点击显示下拉框，选中进行过滤：\n\n\n\namis 只负责生成下拉选择器组件，并将搜索参数传递给接口，而不会在前端对数据进行搜索处理。参数格式如下：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n### 快速编辑\n\n可以通过给列配置：`\"quickEdit\":true`和`quickSaveApi` 可以实现表格内快速编辑并批量保存的功能。\n\n如下`Rendering engine`列的每一行中，会生成可编辑图标，点击后会显示弹框，用于编辑该列的值，\n\n\n\n#### 指定编辑表单项类型\n\n`quickEdit`也可以配置对象形式，可以指定编辑表单项的类型，例如`\"type\": \"select\"`：\n\n\n\n#### 快速编辑多个表单项\n\n\n\n#### 内联模式\n\n配置`quickEdit`的`mode`为`inline`。可以直接将编辑表单项渲染至表格内，可以直接操作编辑。\n\n\n\n#### 即时保存\n\n如果想编辑完表单项之后，不想点击顶部确认按钮来进行保存，而是即时保存当前标记的数据，则需要配置 `quickEdit` 中的 `\"saveImmediately\": true`，然后配置接口`quickSaveItemApi`，可以直接将编辑表单项渲染至表格内操作。\n\n\n\n你也可以在`saveImmediately`中配置 api，实现即时保存\n\n\n\n#### 配置快速编辑启动条件\n\n通过 `quickEditEnabledOn` 配置表达式来实现，如下，只有 id 小于 5 的数据可以编辑 engine。\n\n\n\n## 顶部和底部工具栏\n\ncrud 组件支持通过配置`headerToolbar`和`footerToolbar`属性，实现在表格顶部和底部渲染组件，\n\n\n\n上例中我们在顶部渲染了一段模板，通过`${count}`取到数据域中，CRUD 返回的`count`变量值；然后我们在底部渲染了一个按钮。\n\n从上面一些例子中你可能已经发现，当我们不配置该属性时，crud 默认会在顶部和底部渲染一些组件，实际上，`headerToolbar`和`footerToolbar`默认会有下面这些配置：\n\n\n\n- 在顶部工具栏中：渲染批量操作按钮（如果在 crud 中，配置了 bulkActions 的话）和 分页组件\n- 在底部工具栏中：渲染数据统计组件 和 分页组件\n\n> 如果你不希望在顶部或者底部渲染默认组件，你可以设置`headerToolbar`和`footerToolbar`为空数组`[]`\n\n这些组件还能设置 `align` 来控制位置，有 `left` 和 `right` 两种，比如\n\n\n\n### 其它 amis 组件\n\n在 `headerToolbar` 和 `footerToolbar` 中可以配置各种 amis 其它组件，比如按钮和 tpl：\n\n\n\n### 分页\n\n在`headerToolbar`或者`footerToolbar`数组中添加`pagination`字符串，并且在数据源接口中返回了数据总数`count`，即可以渲染分页组件；添加`switch-per-page`字符串，可以渲染切换每页条数组件\n\n\n\n`crud`默认不会处理数据分页，只是会把分页参数传给后端，由后端实现分页，并返回需要展示的数据 和 总数据数`total`变量：\n\n默认传给后端的分页参数格式为：\n\n\n\n你可以通过配置`pageField`和`perPageField`来修改传给后端的分页数据格式，如：\n\n\n\n这样传给后端的参数格式将为：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n\n\n分页有两种模式：\n\n##### 1. 知道数据总数\n\n如果后端可以知道数据总数时，接口返回格式如下：\n\n\n\n该模式下，会自动计算总页码数，渲染出有页码的分页组件\n\n##### 2. 不知道数据总数\n\n如果后端无法知道数据总数，那么可以返回`hasNext`字段，来标识是否有下一页。\n\n\n\n这样 amis 会在配置分页组件的地方，渲染出一个简单的页面跳转控件。\n\n> 如果总数据只够展示一页，则默认不显示该分页组件\n\n### 批量操作\n\n在`headerToolbar`或者`footerToolbar`数组中添加`bulkActions`字符串，并且在 crud 上配置`bulkActions`行为按钮数组，可以实现选中表格项并批量操作的功能。\n\n> 需要设置`primaryField`用于标识选中状态，配置当前行数据中的某一**唯一标识字段**，例如`id`，否则可能会出现无法选中的问题\n\n\n\n批量操作会默认将下面数据添加到数据域中以供按钮行为使用\n\n- `items` `Array` 当前页数据集合。\n- `rows` items 的别名，推荐用 items。\n- `selectedItems` `Array` 选中的行数据集合\n- `unSelectedItems` `Array` 没选中的行数据也可获取。\n- `ids` `string` 多个 id 值用英文逗号隔开，前提是行数据中有 id 字段，或者有指定的 `primaryField` 字段。\n- `第一行所有行数据` 还有第一行的所有行数据也会包含进去。\n\n你可以通过，在`api`中获取这些参数。\n\n**约束批量操作**\n\n有时候并不是勾选了就能支持批量操作的，比如想约束如果勾选了某条数据 owner 值不是当前用户的就不可以操作。\n\n有两种方式来约束。\n\n1. 批量操作按钮上配置 `disabledOn` 值为 `this.selectedItems.some(item => item.owner === this.amisUser.name)`\n2. 给表格加上 `itemCheckableOn` 值为 `this.owner === this.amisUser.name` 表示只有 owner 是自己的才可以打勾。\n\n**保留条目选择**\n\n默认分页、搜素后，用户选择条目会被清空，配置`keepItemSelectionOnPageChange`属性后会保留用户选择，可以实现跨页面批量操作。\n同时可以通过配置`maxKeepItemSelectionLength`属性限制最大勾选数\n\n\n\n还可以设置 `\"checkOnItemClick\": true` 属性来支持点击一行的触发选中状态切换\n\n\n\n### 数据统计\n\n在`headerToolbar`或者`footerToolbar`数组中添加`statistics`字符串，可以实现简单的数据统计功能\n\n\n\n### 加载更多\n\n在`headerToolbar`或者`footerToolbar`数组中添加`load-more`字符串，可以实现点击加载更多功能。\n\n\n\n### 导出 CSV\n\n在`headerToolbar`或者`footerToolbar`数组中添加`export-csv`字符串，可以实现点击下载 CSV 的功能，注意这里只包括当前分页的数据，要下载全部数据需要通过后端 API 实现。\n\n\n\n### 通过 api 导出 CSV\n\n> 1.4.0 及以上版本\n\n`export-csv` 可以单独配置 `api` 实现导出全量功能，这个 api 的返回结果和 CRUD 类似\n\n\n\n### 导出 Excel\n\n在`headerToolbar`或者`footerToolbar`数组中添加`export-excel`字符串，可以实现点击下载 Excel 的功能，和导出 CSV 一样只包括当前分页的数据，但它们有明显区别：\n\n1. 导出 CSV 是将 api 返回数据导出，表头是数据里的 key，而 Excel 的表头使用的是 label。\n2. 导出 Excel 更重视展现一致，支持合并单元格、链接、mapping 映射、图片（需要加）。\n3. 导出 Excel 只在 `mode` 为 `table` 时能用。\n\n\n\n#### 只导出部分列\n\n> 1.4.0 及以上版本\n\n通过配置 `columns` 来支持只导出部分列，其中是需要导出的列 `name` 数组\n\n\n\n> 1.8.0 及以上版本\n\n`columns` 支持变量，可以从上下文取数组\n\n\n\n#### 自定义导出列\n\n> 1.8.0 及以上版本\n\n除了简单隐藏某些列，还可以通过 `exportColumns` 完全控制导出列，比如新增某些列，它的配置项和 `columns` 一致\n\n\n\n#### 通过 api 导出 Excel\n\n> 1.1.6 以上版本支持\n\n除了前面的用法，还可以配置 api 来通过数据请求来导出 Excel，实现类似全量导出的功能\n\n\n\n#### 自定义导出 Excel 的文件名\n\n> 1.1.7 以上版本支持\n\n通过 filename 自定义导出文件名（支持模板变量）\n\n\n\n### 显隐显示查询条件表单\n\n在`headerToolbar`或者`footerToolbar`数组中添加`filter-toggler`字符串，并且在 crud 中配置`\"filterTogglable\": true`后，可以渲染一个可以切换显示查询表单的功能按钮\n\n\n\n### 刷新按钮\n\n> 1.5.0 及以上版本\n\n可以通过 `reload` 来展现刷新按钮\n\n\n\n它其实是个简化的 `button` 组件，可以参考 `button` 组件的文档做调整，比如\n\n\n\n## 总结行\n\n如果是默认的表格模式，还支持增加总结行，具体请参考 的文档。\n\n## 弹框与数据链\n\n一般 CRUD 中会有弹框，然后进行数据展示或进行二次编辑的需求，通过在列中配置按钮，然后配置弹框，弹框内配置相应的组件即可。\n\n现在问题是，如何获取到当前操作行的数据呢？\n\n实际上，你操作当前行数据，会成为弹框这层节点的父级节点，因此你可以通过 ，获取到上层，也就是点击的行的数据，具体获取方法和普通组件获取数据域中数据的方法相同，\n\n\n\n例如上例中 Tpl 用 `${browser}` 获取 `browser` 变量，Form 中配置`\"name\": \"engine\"` 映射 `engine` 变量。\n\n> 遇到数据字段冲突时，可以在 解决。\n\n## 拖拽排序\n\n通过配置`\"draggable\": true`和保存排序接口`saveOrderApi`，可以实现拖拽排序功能，\n\n\n\n同样的，前端是不会处理排序结果，需要后端调用接口`saveOrderApi`来保存新的顺序\n\n发送方式默认为`POST`，会包含以下信息。\n\n- `ids` 字符串如： `2,3,1,4,5,6` 用 id 来记录新的顺序。 前提是你的列表接口返回了 id 字段。另外如果你的 primaryField 不是 `id`，则需要配置如： `primaryField: \"order_id\"`。注意：无论你配置成什么 primayField，这个字段名始终是 ids。\n- `rows` `Array` 数组格式，新的顺序，数组里面包含所有原始信息。\n- `insertAfter` 或者 `insertBefore` 这是 amis 生成的 diff 信息，对象格式，key 为目标成员的 primaryField 值，即 id，value 为数组，数组中存放成员 primaryField 值。如：\n\n \n\n 表示：成员 1 和成员 3 插入到了成员 2 的后面。成员 4 和 成员 5 插入到了 成员 6 的后面。\n\n你可以通过，在`api`中获取这些参数。\n\n如下:\n\n\n\n这样就只会发送 ids 了。\n\n### 列排序\n\n通过配置`headerToolbar` 中 `columns-toggler` 的 `\"draggable\": true`可以实现设置显示列和列排序功能。\n\n\n\n## 单条操作\n\n当操作对象是单条数据时这类操作叫单条操作，比如：编辑、删除、通过、拒绝等等。CRUD 的 table 模式可以在 column 通过放置按钮来完成（其他模式参考 table 模式）。比如编辑就是添加个按钮行为是弹框类型的按钮或者添加一个页面跳转类型的按钮把当前行数据的 id 放在 query 中传过去、删除操作就是配置一个按钮行为是 AJAX 类型的按钮，将数据通过 api 发送给后端完成。\n\nCRUD 中不限制有多少个单条操作、添加一个操作对应的添加一个按钮就行了。CRUD 在处理按钮行为的时候会把当前行的完整数据传递过去，如果你的按钮行为是弹出时，还会包含一下信息：\n\n- `hasNext` `boolean` 当按钮行为是弹框时，还会携带这个数据可以用来判断当前页中是否有下一条数据。\n- `hasPrev` `boolean` 当按钮行为是弹框时，还会携带这个数据可以判断用来当前页中是否有上一条数据。\n- `index` `number` 当按钮行为是弹框时，还会携带这个数据可以用来获取当前行数据在这一页中的位置。\n- `prevIndex` `number`\n- `nextIndex` `number`\n\n你可以通过，在`api`中获取这些参数。\n\n如果你的按钮类型是 ajax，你也可以限定只发送部分数据比如。\n\n\n\n上面这个例子就会发送 id 字段了，如果想要全部发送过去同时还想添加点别的字段就这样：\n\n\n\n> **注意：** 如果使用`feedback`弹窗，如果不想关闭弹窗时触发`crud`再次拉取数据，需要设置`button`的`\"reload\":\"none\"`\n\n## 过滤条件参数同步地址栏\n\n默认 CRUD 会将过滤条件参数同步至浏览器地址栏中，比如搜索条件、当前页数，这也做的目的是刷新页面的时候还能进入之前的分页。\n\n但也会导致地址栏中的参数数据合并到顶层的数据链中，例如：自动给同名的表单项设置默认值。如果不希望这个功能，可以设置 `syncLocation: false` 来关闭。\n\n> 本文中的例子为了不相互影响都关闭了这个功能。\n> 另外如果需要使用接口联动，需要设置`syncLocation: false`\n\n## 前端一次性加载\n\n如果你的数据并不是很大，而且后端不方便做分页和条件过滤操作，那么通过配置`loadDataOnce`实现前端一次性加载并支持分页和条件过滤操作\n\n\n\n配置一次性加载后，基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索，需要用到功能：\n\n\n\n上例使用了数据映射中的`filter`过滤器，在前端实现了`engine`列的搜索功能。\n\n> **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能\n\n## 动态列\n\n> since 1.1.6\n\n在 1.1.6 之前的版本，只能通过 service + schemaApi 让后端返回 schema 配置来实现，1.1.6 版本之后可以直接通过 crud 的数据接口返回了。\n用这种方式可以简化动态列的实现，与 items 并列返回 columns 数组即即可。\n\n\n\n## 使用数据链中的数据\n\n可以通过 `source` 属性来自定义去返回数据的字段，或者取数据域中的数据，比如\n\n\n\n## 自定义点击行的行为\n\n> 1.4.0 及以上版本\n\n配置 `itemAction` 可以实现点击某一行后进行自定义操作，支持 里的所有配置，比如弹框、刷新其它组件等。\n\n\n\n注意这个属性和 `checkOnItemClick` 冲突，因为都是定义行的点击行为，开启 `itemAction` 后 `checkOnItemClick` 将会失效。\n\n> 1.4.2 及以上版本\n\nitemAction 里的 onClick 还能通过 `data` 参数拿到当前行的数据，方便进行下一步操作\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------------------- | --------------------------- | ------------------------------- | --------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | | `type` 指定为 CRUD 渲染器 |\n| mode | `string` | `\"table\"` | `\"table\" 、 \"cards\" 或者 \"list\"` |\n| title | `string` | `\"\"` | 可设置成空，当设置成空时，没有标题栏 |\n| className | `string` | | 表格外层 Dom 的类名 |\n| api | | | CRUD 用来获取列表数据的 api。 |\n| loadDataOnce | `boolean` | | 是否一次性加载所有数据（前端分页） |\n| loadDataOnceFetchOnFilter | `boolean` | `true` | 在开启 loadDataOnce 时，filter 时是否去重新请求 api |\n| source | `string` | | 数据映射接口返回某字段的值，不设置会默认使用接口返回的`${items}`或者`${rows}`，也可以设置成上层数据源的内容 |\n| filter | | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 |\n| filterTogglable | `boolean` | `false` | 是否可显隐过滤器 |\n| filterDefaultVisible | `boolean` | `true` | 设置过滤器默认是否可见。 |\n| initFetch | `boolean` | `true` | 是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据 |\n| interval | `number` | `3000` | 刷新时间(最低 1000) |\n| silentPolling | `boolean` | `false` | 配置刷新时是否隐藏加载动画 |\n| stopAutoRefreshWhen | `string` | `\"\"` | 通过来配置停止刷新的条件 |\n| stopAutoRefreshWhenModalIsOpen | `boolean` | `false` | 当有弹框时关闭自动刷新，关闭弹框又恢复 |\n| syncLocation | `boolean` | `true` | 是否将过滤条件的参数同步到地址栏 |\n| draggable | `boolean` | `false` | 是否可通过拖拽排序 |\n| resizable | `boolean` | `true` | 是否可以调整列宽度 |\n| itemDraggableOn | `boolean` | | 用来配置是否可拖拽排序 |\n| | | 保存排序的 api。 |\n| | | 快速编辑后用来批量保存的 API。 |\n| | | 快速编辑配置成及时保存时使用的 API。 |\n| bulkActions | Array<> | | 批量操作列表，配置后，表格可进行选中操作。 |\n| messages | `Object` | | 覆盖消息提示，如果不指定，将采用 api 返回的 message |\n| messages.fetchFailed | `string` | | 获取失败时提示 |\n| messages.saveOrderFailed | `string` | | 保存顺序失败提示 |\n| messages.saveOrderSuccess | `string` | | 保存顺序成功提示 |\n| messages.quickSaveFailed | `string` | | 快速保存失败提示 |\n| messages.quickSaveSuccess | `string` | | 快速保存成功提示 |\n| primaryField | `string` | `\"id\"` | 设置 ID 字段名。 |\n| perPage | `number` | 10 | 设置一页显示多少条数据。 |\n| orderBy | `string` | | 默认排序字段，这个是传给后端，需要后端接口实现 |\n| orderDir | `asc` \\| `desc` | | 排序方向 |\n| defaultParams | `Object` | | 设置默认 filter 默认参数，会在查询的时候一起发给后端 |\n| pageField | `string` | `\"page\"` | 设置分页页码字段名。 |\n| perPageField | `string` | `\"perPage\"` | 设置分页一页显示的多少条数据的字段名。注意：最好与 defaultParams 一起使用，请看下面例子。 |\n| perPageAvailable | `Array` | `[5, 10, 20, 50, 100]` | 设置一页显示多少条数据下拉框可选条数。 |\n| orderField | `string` | | 设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。 |\n| hideQuickSaveBtn | `boolean` | `false` | 隐藏顶部快速保存提示 |\n| autoJumpToTopOnPagerChange | `boolean` | `false` | 当切分页的时候，是否自动跳顶部。 |\n| syncResponse2Query | `boolean` | `true` | 将返回数据同步到过滤器上。 |\n| keepItemSelectionOnPageChange | `boolean` | `true` | 保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。 |\n| labelTpl | `string` | | 单条描述模板，`keepItemSelectionOnPageChange`设置为`true`后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。 |\n| headerToolbar | Array | `['bulkActions', 'pagination']` | 顶部工具栏配置 |\n| footerToolbar | Array | `['statistics', 'pagination']` | 底部工具栏配置 |\n| alwaysShowPagination | `boolean` | `false` | 是否总是显示分页 |\n| affixHeader | `boolean` | `true` | 是否固定表头(table 下) |\n| autoGenerateFilter | `boolean` | `false` | 是否开启查询区域，开启后会根据列元素的 `searchable` 属性值，自动生成查询条件表单 |\n\n注意除了上面这些属性，CRUD 在不同模式下的属性需要参考各自的文档，比如\n\n- 默认 模式里的列配置。\n- 模式。\n- 模式。\n","path":"/zh-CN/components/crud"},{"title":"Custom 自定义组件","body":"\n用于实现自定义组件，它解决了之前 JS SDK 和可视化编辑器中难以支持自定义组件的问题。\n\n## 基本用法\n\n设置 type 类型为 custom\n\n### onMount\n\n这是节点在初始化的时候执行的函数，它接收三个参数：\n\n- dom，组件加载之后的 dom 节点\n- data，组件初始值，需要设置 name\n- onChange，修改这个组件对应 name 的值\n- props，后面会单独介绍\n\n比如在这样的 form 组件中：\n\n\n\n点击按钮之后，执行 `onChange` 函数，就会将 `myName` 这个参数的值改成 `new`，点击表单提交的时候，就会有一个 `myName=new` 的表单数据。\n\n### onUpdate\n\nonUpdate 是在数据变更的时候调用，注意这个数据变更会包含表单内的所有其他组件。\n\n\n\n这个例子中，无论是邮箱还是用户名修改，都会触发 onUpdata 函数，其中 `data` 是当前值，`prevData` 是之前的值：\n\n1. 如果修改 email，则 data 将会是 `{email: 'xxx'}`，prevData 是 `{}`\n2. 如果再次修改 email，则 data 将会是 `{email: 'xxx1'}`，prevData 是 `{email: 'xxx '}`\n3. 如果修改 username，则 data 将会是 `{email: 'xxx1', username: 'yyy'}`，prevData 是 `{email: 'xxx1'}`\n\n### onUnmount\n\nonUnmount 是在组件销毁的时候执行，可以在这里做资源清理，这个函数只有一个 props 参数。\n\n### Vue.js\n\n因为 onMount 拿到的 dom 就是标准的 dom，所以可以执行任意 JavaScript 代码，包括 jQuery 等，下面的例子演示了如何使用 vue 实现自定义组件：\n\n```javascript\n{\n type: 'page',\n title: '表单页面',\n body: {\n type: 'form',\n title: 'custom 组件',\n body: [\n {\n type: 'custom',\n name: 'my-custom',\n html: `\n
    \n
  1. \n {{ todo.text }}\n
    2. \n
\n `,\n label: '自定义组件',\n onMount: (dom, data, onChange, props) => {\n const app = new Vue({\n el: dom,\n data: {\n todos: [\n { text: 'hello' },\n { text: 'world' },\n { text: 'vue' }\n ]\n }\n })\n }\n }\n ]\n }\n}\njavascript\nonMount: (dom, data, onChange, props) => {\n const button = document.createElement('button');\n button.innerText = '点击修改姓名';\n button.onclick = event => {\n onChange('new name');\n props.onAction(\n event,\n {\n type: 'action',\n label: '弹个框',\n actionType: 'dialog',\n dialog: {\n title: '弹框',\n body: 'Hello World!'\n }\n },\n {} // 这是 data\n );\n event.preventDefault();\n };\n dom.appendChild(button);\n};\n```\n\n或者执行 `props.env.notify('success', '执行成功')` 来在右上角弹出提示等。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------- | -------- | --------------------------------------------- |\n| type | 'custom' | | |\n| id | `string` | | 节点 id |\n| name | `string` | | 节点 名称 |\n| className | `string` | | 节点 class |\n| inline | `boolean` | false | 默认使用 div 标签，如果 true 就使用 span 标签 |\n| html | `string` | | 初始化节点 html |\n| onMount | `string` | Function | 节点初始化之后调的用函数 |\n| onUpdate | `string` | Function | 数据有更新的时候调用的函数 |\n| onUnmount | `string` | Function | 节点销毁的时候调用的函数 |\n","path":"/zh-CN/components/custom"},{"title":"Date 日期时间","body":"\n用于展示日期\n\n## 基本使用\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 配置展示格式\n\n例如你想将某一个时间值，以 `xxxx年xx月xx日 xx时xx分xx秒` 这样的格式输出，那么查找 可知配置格式应为 `YYYY年MM月DD日 HH时mm分ss秒`，即：\n\n\n\n## 配置数据格式\n\n如果你的数据值默认不是`X`格式（时间戳秒格式），那么需要配置 `valueformat `参数用于解析当前时间值，比如毫秒是配置 `\"valueformat\": \"x\"`。\n\n除此之外还支持各种自定义日期格式，例如下面`value`值为：`\"2020/4/14 19:59:50\"`，查阅 可知，需要配置数据格式为 `\"YYYY/MM/DD HH:mm:ss\"`，然后我们配置输出格式`format`，输出指定格式日期：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ------------ | ------------------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"date\"`；在 Form 中用作静态展示，为`\"static-date\"` |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 显示的日期数值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n| placeholder | `string` | `-` | 占位内容 |\n| format | `string` | `YYYY-MM-DD` | 展示格式, 更多格式类型请参考 |\n| valueFormat | `string` | `X` | 数据格式，默认为时间戳。更多格式类型请参考 |\n| fromNow | `boolean` | `false` | 是否显示相对当前的时间描述，比如: 11小时前、3天前、1年前等，fromNow 为 true 时，format 不生效。 |\n| updateFrequency | `number` | `60000` | 更新频率， 默认为1分钟 |\n","path":"/zh-CN/components/date"},{"title":"Dialog 对话框","body":"\nDialog 弹框 主要由 触发，主要展示一个对话框以供用户操作。\n\n## 基本用法\n\n\n\n## 配置尺寸\n\n\n\n## 弹框与数据映射\n\n默认弹框内由于数据链的存在，会自动映射父级同名变量，例如下例：\n\n\n\n上例弹框中的表单项 `Engine` 会自动映射到父级数据中的 `engine` 变量，如果想调整当前特性，如你想调整父级映射变量的字段，可以利用，例如：\n\n\n\n上例给 `dialog` 中配置 `data` 属性，可以将上层的 `engine` 变量映射为 `engine2`\n\n## 多级弹框\n\n\n\n## 行为后关闭弹框\n\n在弹框中配置行为按钮，可以在按钮上配置`\"close\": true`，在行为完成后，关闭当前弹框。\n\n\n\n## 配置弹窗的按钮\n\n可以通过设置 `actions` 来控制弹窗中的按钮。\n\n\n\n## 弹框中配置表单\n\n### 基本使用\n\n\n\n### 提交表单 或 ajax 请求\n\n弹框中通过配置`form`或`ajax`行为按钮，可以实现`form`提交和`ajax`请求操作。\n\n\n\n### 提交表单 或 ajax 请求 后不关闭弹框\n\n默认情况下，当弹框中配置了 form 并进行了**提交表单操作（confirm）**或进行了**`ajax`请求**，请求成功后，会自动关闭当前弹框，你可以通过手动设置`\"close\": true` 来禁止该默认特性。\n\n\n\n## feedback 反馈弹框\n\nfeedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，进行反馈操作\n\n### 基本使用\n\n\n\n### 弹框中配置 feedback\n\n#### 关闭 feedback 弹框时，同时关闭上层弹框\n\n当你在弹框中配置了 feedback，操作之后，你希望关闭当前 feedback 弹框同时，关闭上层的弹框，具体有两种方式\n\n##### 1. 不请求接口，直接关闭\n\n`feedback`的`actions`中配置 `\"actionType\": \"close\"` 的按钮\n\n\n\n##### 2. 请求接口，请求成功后，关闭所有弹框\n\n需要在 feedback 的 `body` 中添加 Form 组件，并配置`\"actionType\": \"confirm\"`，\n\n\n\n> 注意上面的例子：如果你的触发`feedback`的按钮`actionType`为`ajax`时，为需要额外在按钮上配置`\"close\": true`\n\n#### 取消 feedback 弹框时，不同时关闭上层弹框\n\n改场景只适用于**不请求接口关闭弹框**的场景，需要在 feedback 层添加`\"skipRestOnCancel\": true`\n\n\n\n#### 确认 feedback 弹框时，不同时关闭上层弹框\n\n如果想让 feedback 弹框确认后，让之前触发这个 feedback 的按钮中断，那么需要配置 `skipRestOnConfirm`，这就意味着之前触发这个 feedback 的按钮必须重新提交一次。\n\n### 根据条件显示 feedback\n\n可以根据条件弹出，例如下面这个例子，只有当接口返回的时间戳可以整除 2 时才显示弹框。\n\n\n\n## 配置 Esc 键和点击外部关闭弹框\n\n可以通过配置 `closeOnEsc` 和 `closeOnOutside` 支持用 esc 键和点击其它区域关闭弹框。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------ |\n| type | `string` | | `\"dialog\"` 指定为 Dialog 渲染器 |\n| title | | | 弹出层标题 |\n| body | | | 往 Dialog 内容区加内容 |\n| size | `string` | | 指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg` |\n| bodyClassName | `string` | `modal-body` | Dialog body 区域的样式类名 |\n| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Dialog |\n| showCloseButton | `boolean` | `true` | 是否显示右上角的关闭按钮 |\n| showErrorMsg | `boolean` | `true` | 是否在弹框左下角显示报错信息 |\n| showLoading | `boolean` | `true` | 是否在弹框左下角显示 loading 动画 |\n| disabled | `boolean` | `false` | 如果设置此属性，则该 Dialog 只读没有提交操作。 |\n| actions | Array<> | 【确认】和【取消】 | 如果想不显示底部按钮，可以配置：`[]` |\n| data | `object` | | 支持，如果不设定将默认将触发按钮的上下文中继承数据。 |\n","path":"/zh-CN/components/dialog"},{"title":"Divider 分割线","body":"\n## 基本用法\n\n\n\n## 不同样式\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ---------- | ----------------------------------- |\n| type | `string` | | `\"dialog\"` 指定为 Dialog 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| lineStyle | `string` | `\"dashed\"` | 分割线的样式，支持`dashed`和`solid` |\n","path":"/zh-CN/components/divider"},{"title":"Drawer 抽屉","body":"\n## 基本用法\n\n\n\n## 抽屉尺寸\n\n\n## 自定义抽屉尺寸\n值如果是数字类型单位默认使用`px`, 如果是字符串类型可以使用自定义css宽度变量，如：`%`、`vw`、`px`等\n\n\n\n## 指定弹出方向\n\n\n\n## 可拖拽抽屉大小\n\n配置`\"resizable\": true`，可以拖拽调整`drawer`大小\n\n\n\n## 是否展示关闭按钮\n\n配置`\"showCloseButton\": false`，可以隐藏关闭按钮\n\n\n\n## 不显示蒙层\n\n\n\n## 点击抽屉外自动关闭\n\n配置`\"closeOnOutside\":true`\n\n### 显示蒙层\n\n\n\n### 不显示蒙层\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | ----------------------------------------- | ------------------ | ------------------------------------------------------------------------------------------------- |\n| type | `string` | | `\"drawer\"` 指定为 Drawer 渲染器 |\n| title | | | 弹出层标题 |\n| body | | | 往 Drawer 内容区加内容 |\n| size | `string` | | 指定 Drawer 大小，支持: `xs`、`sm`、`md`、`lg`、`xl` |\n| position | `string` | | 指定 Drawer 方向，支持: `left`、`right`、`top`、`bottom` |\n| className | `string` | `` | Drawer 最外层容器的样式类名 |\n| headerClassName | `string` | | Drawer 头部 区域的样式类名 |\n| bodyClassName | `string` | `modal-body` | Drawer body 区域的样式类名 |\n| footerClassName | `string` | | Drawer 页脚 区域的样式类名 |\n| showCloseButton | `boolean` | `true` | 是否展示关闭按钮，当值为false时，默认开启closeOnOutside |\n| closeOnEsc | `boolean` | `false` | 是否支持按 `Esc` 关闭 Drawer |\n| closeOnOutside | `boolean` | `false` | 点击内容区外是否关闭 Drawer |\n| overlay | `boolean` | `true` | 是否显示蒙层 |\n| resizable | `boolean` | `false` | 是否可通过拖拽改变 Drawer 大小 |\n| width | `string \\| number` | `500px` | 容器的宽度，在 position 为 `left` 或 `right` 时生效 |\n| height | `string \\| number` | `500px` | 容器的高度，在 position 为 `top` 或 `bottom` 时生效 |\n| actions | Array<> | 【确认】和【取消】 | 可以不设置，默认只有两个按钮。 |\n| data | `object` | | 支持 ，如果不设定将默认将触发按钮的上下文中继承数据。 |\n","path":"/zh-CN/components/drawer"},{"title":"DropDownButton","body":"\n## 基本用法\n\n\n\n## 分组展示模式\n\n配置`children`可以实现分组展示，分组标题支持配置`icon`。\n\n> 1.5.7 及以上版本\n\n\n\n## 关闭下拉菜单\n\n配置`\"closeOnClick\": true`可以实现点击按钮后自动关闭下拉菜单。\n\n\n\n## 触发方式\n\n> 1.4.0 及以上版本\n\n默认是点击鼠标触发，可以通过 `\"trigger\": \"hover\"` 配置为鼠标移上去后触发\n\n\n\n## 设置图标\n\n通过 `icon` 可以设置左侧图标\n\n\n\n## 只显示图标\n\n可以设置 `level` 及 `hideCaret` 来只显示图标，并配合 `tooltip` 来显示提示文字\n\n\n\n## 设置右侧图标\n\n> 1.5.0 及以上版本\n\n通过 `rightIcon` 设置右侧图标，同时通过 `hideCaret` 隐藏右侧下拉图标\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------- | ----------------- | ----------------------------------------- |\n| type | `string` | `dropdown-button` | 类型 |\n| label | `string` | | 按钮文本 |\n| className | `string` | | 外层 CSS 类名 |\n| btnClassName | `string` | | 按钮 CSS 类名 |\n| menuClassName | `string` | | 下拉菜单 CSS 类名 |\n| block | `boolean` | | 块状样式 |\n| size | `string` | | 尺寸，支持`'xs'`、`'sm'`、`'md'` 、`'lg'` |\n| align | `string` | | 位置，可选`'left'`或`'right'` |\n| buttons | `Array` | | 配置下拉按钮 |\n| iconOnly | `boolean` | | 只显示 icon |\n| defaultIsOpened | `boolean` | | 默认是否打开 |\n| closeOnOutside | `boolean` | `true` | 点击外侧区域是否收起 |\n| closeOnClick | `boolean` | `false` | 点击按钮后自动关闭下拉菜单 |\n| trigger | `click` 或 `hover` | `click` | 触发方式 |\n| hideCaret | `boolean` | false | 隐藏下拉图标 |\n","path":"/zh-CN/components/dropdown-button"},{"title":"Each 循环渲染器","body":"\n## 基本用法\n\n\n\n### 如果是对象数组\n\n如果数组中的数据是对象，可以直接使用 data.xxx 来获取，另外能用 data.index 来获取数组索引，但如果对象本身也有名字为 index 的字段就会覆盖到，获取不到索引了。\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量，然后用可以通过 `item` 变量获取单项值\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 使用数据映射\n\n\n\n`name` 的优先级会比 `source` 更高\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | -------- | -------------------------------------------------------------------- |\n| type | `string` | `\"each\"` | 指定为 Each 组件 |\n| value | `array` | `[]` | 用于循环的值 |\n| name | `string` | | 获取数据域中变量 |\n| source | `string` | | 获取数据域中变量， 支持 |\n| items | `object` | | 使用`value`中的数据，循环输出渲染器。 |\n| placeholder | `string` | | 当 `value` 值不存在或为空数组时的占位文本 |\n","path":"/zh-CN/components/each"},{"title":"Flex 布局","body":"\nFlex 布局是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用，并且默认使用水平垂直居中的对齐。\n\n## 基本用法\n\n\n\n其中 `items` 里的每一个都可以是其他 amis 类型。\n\n## 子节点水平分布\n\n> 严格来说并不一定是水平，因为还能通过 direction 修改方向，不过这里为了简化就这么称呼了\n\n可以通过 justify 控制水平分布方式，默认是 `center` 居中，其他几种的示例如下：\n\n\n\n## 垂直方向位置\n\n可以通过设置 `alignItems` 改变在子节点在垂直方向的位置，默认是 `center` 居中，其他几个常见设置请参考：\n\n\n\n## 布局方向\n\n默认是行的方式，可以通过 \"direction\": \"column\" 改成列的方式。\n\n\n\n## 移动端支持\n\n有时候希望在移动端有不同展现，比如将 `direction` 改成 `column`：\n\n\n\n其他关于移动端定制的细节请参考。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------------------------------------- | ------ | --------------------------------------------------------------------------------------------------- |\n| type | `string` | `flex` | 指定为 Flex 渲染器 |\n| className | `string` | | css 类名 |\n| justify | `string` | | \"start\", \"flex-start\", \"center\", \"end\", \"flex-end\", \"space-around\", \"space-between\", \"space-evenly\" |\n| alignItems | `string` | | \"stretch\", \"start\", \"flex-start\", \"flex-end\", \"end\", \"center\", \"baseline\" |\n| style | `object` | | 自定义样式 |\n| items | |\n","path":"/zh-CN/components/flex"},{"title":"Button-Group-Select 按钮点选","body":"\n## 基本用法\n\n按钮集合当 select 点选用。\n\n\n\n## 垂直模式\n\n配置`\"vertical\": true`，实现垂直模式\n\n\n\n## 平铺模式\n\n配置 `\"tiled\": true` 实现平铺模式\n\n\n\n## 按钮主题样式\n\n配置 `btnLevel` 统一设置按钮主题样式，注意 `buttons ` 或 `options` 中的`level`属性优先级高于`btnLevel`。配置 `btnActiveLevel` 为按钮设置激活态时的主题样式。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | ------------------------------------------------------------------------------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------------- |\n| type | `string` | `\"button-group-select\"` | 指定为 button-group-select 渲染器 |\n| vertical | `boolean` | `false` | 是否使用垂直模式 |\n| tiled | `boolean` | `false` | 是否使用平铺模式 |\n| btnLevel | `'link' \\| 'primary' \\| 'secondary' \\| 'info'\\|'success' \\| 'warning' \\| 'danger' \\| 'light'\\| 'dark' \\| 'default'` | `\"default\"` | 按钮样式 |\n| btnActiveLevel | `'link' \\| 'primary' \\| 'secondary' \\| 'info'\\|'success' \\| 'warning' \\| 'danger' \\| 'light'\\| 'dark' \\| 'default'` | `\"default\"` | 选中按钮样式 |\n| options | `Array`或`Array` | | |\n| source | `string`或 |\n| multiple | `boolean` | `false` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n","path":"/zh-CN/components/form/button-group-select"},{"title":"Button-Toolbar 按钮工具栏","body":"\n默认按钮会独占一行，如果想让多个按钮并排方式，可以使用 `button-toolbar` 组件包裹起来，另外还有能用 来在展现上更紧凑。\n\n## 基本使用\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------- | --------------------------- | ------------------ | ------------------------- |\n| type | `string` | `\"button-toolbar\"` | 指定为 ButtonToolbar 组件 |\n| buttons | Array<> | | 按钮组 |\n","path":"/zh-CN/components/form/button-toolbar"},{"title":"Chained-Select 链式下拉框","body":"\n## 基本用法\n\n用于实现无限级别下拉，只支持单选，且必须和 `source` 搭配，通过 API 拉取数据，只要 API 有返回结果，就能一直无限级别下拉。\n\n\n\n> `source`接口中配置的参数`waitSeconds=1`和`maxLevel=4`是测试接口所需参数，实际使用自己接口时不需要添加这两个参数\n\n## 暴露参数\n\n为了帮助后端接口获取当前选择器状态，chained-select 会默认给 source 接口的数据域中，添加若干个参数：\n\n- `value`: 选中的表单项值；\n- `level`: 当前拉取数据时的层级,\n- `parentId`: 上一级选项的值，数据格式基于配置的`joinValues`和`extractValue`属性\n- `parent`: 上一级选项的完整的数据格式\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array`或`Array` | | |\n| source | `string`或 |\n| autoComplete | `string`或 |\n| delimiter | `string` | `,` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| change | `value: string \\| Option[]` 选中值 | 选中值发生变化时触发 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| clear | - | 清空 |\n| reset | - | 重置 |\n","path":"/zh-CN/components/form/chain-select"},{"title":"Chart 单选框","body":"\n图表点选功能，用来做多个图表联动。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 ## 二级标题 |\n| ---------------------- | --------- | --------- | -------------------------- |\n| config | `object` | | echart 图表配置 |\n| showTooltipOnHighlight | `boolean` | `false` | 高亮的时候是否显示 tooltip |\n| chartValueField | `string` | `\"value\"` | 图表数值字段名 |\n","path":"/zh-CN/components/form/chart-radios"},{"title":"Checkbox 勾选框","body":"\n用于实现勾选，功能和 类似，只是展现上不同。\n\n## 基本用法\n\n\n\n## 配置真假值\n\n默认情况：\n\n- 勾选框勾选时，表单项值为：true\n- 勾选框取消勾选时，表单项值为：false\n\n\n\n如果你想调整这个值，可以配置`trueValue`和`falseValue`\n\n\n\n勾选上例中的勾选框，观察数据域变化，会发现勾选后值为`1`，而取消勾选后为`0`\n\n## 按钮模式\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | --------- | ---------------- |\n| option | `string` | | 选项说明 |\n| trueValue | `string｜number｜boolean` | `true` | 标识真值 |\n| falseValue | `string｜number｜boolean` | `false` | 标识假值 |\n| optionType | `default｜button` | `default` | 设置option类型 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| change | `value: boolean` 选中状态 | 选中状态发生变化时触发 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| clear | - | 清空 |\n| reset | - | 重置 |\n","path":"/zh-CN/components/form/checkbox"},{"title":"Checkboxes 复选框","body":"\n用于实现多选。\n\n## 基本用法\n\n\n## 按钮模式\n\n\n\n## 按列显示\n\n设置 `\"inline\": false`\n\n\n\n## 展示多行\n\n可以配置`columnsCount`属性调整展示列的个数\n\n\n\n> 1.8.0 及以上版本\n\n`columnsCount` 还有一种数组形式，可以手动控制每行显示的列数\n\n\n\n## 分组显示\n\n`\"inline\": false` 下，选项中配置 `children` 字段可以实现分组展示效果。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |\n| options | `Array`或`Array` | | |\n| source | `string`或 |\n| delimiter | `string` | `,` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |\n| checkAll | `boolean` | `false` | 是否支持全选 |\n| inline | `boolean` | `true` | 是否显示为一行 |\n| defaultCheckAll | `boolean` | `false` | 默认是否全选 |\n| creatable | `boolean` | `false` | |\n| createBtnLabel | `string` | `\"新增选项\"` | |\n| addControls | Array< |\n| addApi | |\n| editable | `boolean` | `false` | |\n| editControls | Array< |\n| editApi | |\n| removable | `boolean` | `false` | |\n| deleteApi | |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| change | `value: string \\| Option[]` 选中值 | 选中值发生变化时触发 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| clear | - | 清空 |\n| reset | - | 重置 |\n","path":"/zh-CN/components/form/checkboxes"},{"title":"Combo 组合","body":"\n用于将多个表单项组合到一起，实现深层结构的数据编辑。\n\n比如想提交 `user.name` 这样的数据结构，有两种方法：一种是将表单项的 name 设置为`user.name`，另一种就是使用 combo。\n\n## 基本使用\n\n配置`items`属性，组合多个表单项\n\n\n\n## 多行展示模式\n\n默认，combo 内表单项是横着展示一排，如果想换行展示，可以配置`\"multiLine\": true`\n\n\n\n## 多选模式\n\n默认，combo 为单选模式，可以配置`\"multiple\": true`实现多选模式。\n\n这时提交的将会是对象数组。\n\n\n\n## 限制个数\n\n多选模式下，可以配置`minLength`和`maxLength`配置该 Combo 可添加的条数\n\n\n\n## 值格式\n\n观察下例中表单数据域值的变化，可以发现：\n\n- 单选模式时，**数据格式为对象**；\n- 多选模式时，**数据格式为数组，数组成员是对象**\n\n\n\n### 打平值\n\n默认多选模式下，数据格式是对象数组的形式，当你配置的组合中只有一个表单项时，可以配置`\"flat\": true`，将值进行打平处理。\n\n\n\n查看上例表单数据域，可以看到打平后数据格式如下：\n\n\n\n## 增加层级\n\ncombo 还有一个作用是增加层级，比如返回的数据是一个深层对象\n\n\n\n如果要用文本框显示，name 必须是 `a.b`，但使用 combo 创建层级后，name 就可以只是 `b`：\n\n\n\n这样就能结合 实现无限层级结构。\n\n## 唯一验证\n\n可以在配置的`body`项上，配置`\"unique\": true`，指定当前表单项不可重复\n\n\n\n上例中，`text`和`select`都配置了`\"unique\": true`，新增多条 combo，在任意两个`text`输入框的值相同时，提交时都会报错`\"当前值不唯一\"`，而`select`选择框也不可选择重复的选项\n\n> 暂不支持 `Nested-Select` 组件\n\n## 拖拽排序\n\n多选模式下，可以配置`\"draggable\": true`实现拖拽调整排序\n\n\n\n## 条件分支\n\n默认 Combo 渲染的成员是固定表单项的，成员的类型时一致，如果不一致怎么办？这里可以设置条件分支来给不同的成员设置不同的表单项。\n\n如下面的例子，定义了两种类型：文本和数字，用户新增的时候可以选择是新增文本还是数字。区分是文字和数字的方式是根据成员数据中的 type 字段来决定。\n\n\n\n- `conditions` Array 数组，每个成员是一种类型\n- `conditions[x].label` 类型名称\n- `conditions[x].test` 表达式，目标成员数据是否属于这个类型？\n- `conditions[x].scaffold` 初始数据，当新增的时候直接使用此数据。\n- `conditions[x].items` 该类型的表单设置。\n- `typeSwitchable` 类型是否允许切换，如果设置成 true 会多一个类型切换的按钮。\n\n## Tabs 模式\n\n默认成员是一个一个排列的，如果数据比较多有点让人眼花缭乱。所以 Combo 支持了 tabs 的排列方式。\n\n\n\n- `tabsMode` boolean 用来开启此模式\n- `tabsStyle` string 样式，可选：`line`、`card` 或者 `radio`.\n- `tabsLabelTpl` 用来生成标题的模板，默认为：`成员 ${index|plus}`\n\n注意：这是新引入的功能，目前还不支持拖拽组合使用。且此模式只有多选时才能生效。\n\n## 获取父级数据\n\n默认情况下，Combo 内表达项无法获取父级数据域的数据，如下，我们添加 Combo 表单项时，尽管 Combo 内的文本框的`name`与父级数据域中的`super_text`变量同名，但是没有自动映射值。\n\n\n\n可以配置`\"canAccessSuperData\": true`开启此特性，如下，配置了该配置项后，添加 Combo 的`text`表单项会自动映射父级数据域的同名变量\n\n\n\n## 同步更新内部表单项\n\n配置`canAccessSuperData`可以获取父级数据域值，但是为了效率，在父级数据域变化的时候，默认 combo 内部是不会进行同步的\n\n如下，添加一组 combo，然后可以看到默认会映射父级变量值`123`，但是当你在更改父级数据域`super_text`文本框值后，combo 内部文本框并没有同步更新\n\n\n\n如果想实现内部同步更新，需要如下配置：\n\n- 配置`\"strictMode\": false`\n- 配置`syncFields`字符串数组，数组项是需要同步的变量名\n\n以上面为例，我们在 combo 上配置`\"strictMode\": false`和`\"syncFields\": [\"super_text\"]`，即可实现同步\n\n\n\n## 设置序号\n\n默认 Combo 数据域中，每一项会有一个隐藏变量`index`，可以利用 Tpl 组件，显示当前项序号\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------ | ------------------------------ | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| formClassName | `string` | | 单组表单项的类名 |\n| addButtonClassName | `string` | | 新增按钮 CSS 类名 |\n| items | Array<> | | 组合展示的表单项 |\n| items[x].columnClassName | `string` | | 列的类名，可以用它配置列宽度。默认平均分配。 |\n| items[x].unique | `boolean` | | 设置当前列值是否唯一，即不允许重复选择。 |\n| noBorder | `boolean` | `false` | 单组表单项是否显示边框 |\n| scaffold | `object` | `{}` | 单组表单项初始值 |\n| multiple | `boolean` | `false` | 是否多选 |\n| multiLine | `boolean` | `false` | 默认是横着展示一排，设置以后竖着展示 |\n| minLength | `number` | | 最少添加的条数 |\n| maxLength | `number` | | 最多添加的条数 |\n| flat | `boolean` | `false` | 是否将结果扁平化(去掉 name),只有当 items 的 length 为 1 且 multiple 为 true 的时候才有效。 |\n| joinValues | `boolean` | `true` | 默认为 `true` 当扁平化开启的时候，是否用分隔符的形式发送给后端，否则采用 array 的方式。 |\n| delimiter | `string` | `false` | 当扁平化开启并且 joinValues 为 true 时，用什么分隔符。 |\n| addable | `boolean` | `false` | 是否可新增 |\n| addButtonText | `string` | `\"新增\"` | 新增按钮文字 |\n| removable | `boolean` | `false` | 是否可删除 |\n| deleteApi | | | 如果配置了，则删除前会发送一个 api，请求成功才完成删除 |\n| deleteConfirmText | `string` | `\"确认要删除？\"` | 当配置 `deleteApi` 才生效！删除时用来做用户确认 |\n| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 |\n| draggableTip | `string` | `\"可通过拖动每行中的【交换】按钮进行顺序调整\"` | 可拖拽的提示文字 |\n| subFormMode | `string` | `\"normal\"` | 可选`normal`、`horizontal`、`inline` |\n| placeholder | `string` | `` | 没有成员时显示。 |\n| canAccessSuperData | `boolean` | `false` | 指定是否可以自动获取上层的数据并映射到表单项上 |\n| conditions | `object` | | 数组的形式包含所有条件的渲染类型，单个数组内的`test` 为判断条件，数组内的`items`为符合该条件后渲染的`schema` |\n| typeSwitchable | `boolean` | `false` | 是否可切换条件，配合`conditions`使用 |\n| strictMode | `boolean` | `true` | 默认为严格模式，设置为 false 时，当其他表单项更新是，里面的表单项也可以及时获取，否则不会。 |\n| syncFields | `Array` | `[]` | 配置同步字段。只有 `strictMode` 为 `false` 时有效。如果 Combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`[\"os\"]` |\n| nullable | `boolean` | `false` | 允许为空，如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。 |\n| itemClassName | `string` | | 单组 CSS 类 |\n| itemsWrapperClassName | `string` | | 组合区域 CSS 类 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|--------------- |------------------------|----------------------|\n| add | value: `string` or `string[]` 现有的数据集 | 添加组合项 |\n| delete | key: `number` 移除项的索引
value: `string` or `string[]` 现有的数据集 | 删除组合项 |\n| tabsChange | key: `number` 切换后tab的索引 | 切换tab
前置条件：tabsMode为true |\n\n\n## 动作表\n\n暂无","path":"/zh-CN/components/form/combo"},{"title":"组合条件","body":"\n## 基本用法\n\n用于设置复杂组合条件，支持添加条件，添加分组，设置组合方式，拖拽排序等功能。\n\n\n\n## 值格式说明\n\n\n\n## 字段选项\n\n字段选项为这个组件主要配置部分，通过 `fields` 字段来配置，有哪些字段，并且字段的类型是什么，支持哪些比较操作符。\n\n`fields` 为数组类型，每个成员表示一个可选字段，支持多个层，配置示例\n\n\n\n## 支持的字段类型\n\n这里面能用的字段类型和表单项中的字段类型不一样，还没支持那么多，基本上只有一些基础的类型，其他复杂类型还需后续扩充，目前基本上支持以下这些类型。\n\n### 文本\n\n- `type` 字段配置中配置成 `\"text\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'equal', 'not_equal', 'is_empty', 'is_not_empty', 'like', 'not_like', 'starts_with', 'ends_with' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp` 默认为 `\"equal\"`\n\n\n\n### 数字\n\n- `type` 字段配置中配置成 `\"number\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'equal', 'not_equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal', 'between', 'not_between', 'is_empty', 'is_not_empty' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp` 默认为 `\"equal\"`\n- `minimum` 最小值\n- `maximum` 最大值\n- `step` 步长\n\n\n\n### 日期\n\n- `type` 字段配置中配置成 `\"date\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'equal', 'not_equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal', 'between', 'not_between', 'is_empty', 'is_not_empty' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp` 默认为 `\"equal\"`\n- `defaultValue` 默认值\n- `format` 默认 `\"YYYY-MM-DD\"` 值格式\n- `inputFormat` 默认 `\"YYYY-MM-DD\"` 显示的日期格式。\n\n\n\n### 日期时间\n\n- `type` 字段配置中配置成 `\"datetime\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'equal', 'not_equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal', 'between', 'not_between', 'is_empty', 'is_not_empty' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp` 默认为 `\"equal\"`\n- `defaultValue` 默认值\n- `format` 默认 `\"\"` 值格式\n- `inputFormat` 默认 `\"YYYY-MM-DD HH:mm\"` 显示的日期格式。\n- `timeFormat` 默认 `\"HH:mm\"` 时间格式，决定输入框有哪些。\n\n\n\n### 时间\n\n- `type` 字段配置中配置成 `\"time\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'equal', 'not_equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal', 'between', 'not_between', 'is_empty', 'is_not_empty' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp` 默认为 `\"equal\"`\n- `defaultValue` 默认值\n- `format` 默认 `\"HH:mm\"` 值格式\n- `inputFormat` 默认 `\"HH:mm\"` 显示的日期格式。\n\n\n\n### 下拉选择\n\n- `type` 字段配置中配置成 `\"select\"`\n- `label` 字段名称。\n- `placeholder` 占位符\n- `operators` 默认为 `[ 'select_equals', 'select_not_equals', 'select_any_in', 'select_not_any_in' ]` 如果不要那么多，可以配置覆盖。\n- `defaultOp`\n- `options` 选项列表，`Array<{label: string, value: any}>`\n- `source` 动态选项，请配置 api。\n- `searchable` 是否可以搜索\n- `autoComplete` 自动提示补全，每次输入新内容后，将调用接口，根据接口返回更新选项。\n\n\n\n配置`autoComplete`属性后，每次输入新内容后会自动调用接口加载新的选项，用数据映射，获取变量 term，为当前输入的关键字。\n\n\n\n## 字段选项远程拉取\n\n- 方式 1 配置 `source` 接口返回的数据对象 `data` 中存在 fields 变量即可。\n- 方式 2 关联上下文变量如 `source: \"${xxxxField}\"`\n\n\n\n## 简易模式\n\n通过 builderMode 配置为简易模式，在这个模式下将不开启树形分组功能，输出结果只有一层，方便后端实现简单的 SQL 生成。\n\n\n\n在这个模式下还可以通过 `showANDOR` 来显示顶部的条件类型切换\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | --------- | ------ | ------------------------------ |\n| className | `string` | | 外层 dom 类名 |\n| fieldClassName | `string` | | 输入字段的类名 |\n| source | `string` | | 通过远程拉取配置项 |\n| fields | | | 字段配置 |\n| showANDOR | `boolean` | | 用于 simple 模式下显示切换按钮 |\n| showNot | `boolean` | | 是否显示「非」按钮 |\n| searchable | `boolean` | | 字段是否可搜索 |\n","path":"/zh-CN/components/form/condition-builder"},{"title":"DiffEditor 对比编辑器","body":"\n## 基本使用\n\n\n\n## 禁用编辑器\n\n左侧编辑器始终不可编辑，右侧编辑器可以通过设置`disabled`或`disabledOn`，控制是否禁用\n\n\n\n## diff 数据域中的两个变量\n\n如下例，左侧编辑器中的值，通过`\"diffValue\": \"${value1}\"`获取，右侧编辑器的值，通过设置`\"name\": \"value2\"`，自动映射数据域中`value2`的值\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ------------- | ------------ | ------------------------------------------------------------------------------------------- |\n| language | `string` | `javascript` | 编辑器高亮的语言，可选 |\n| diffValue | | | 左侧值 |\n","path":"/zh-CN/components/form/diff-editor"},{"title":"Editor 编辑器","body":"\n用于实现代码编辑，如果要实现富文本编辑请使用 。\n\n## 基本用法\n\n\n\n## 支持的语言\n\n可以设置`language`配置高亮的语言，支持的语言有：\n\n`bat`、 `c`、 `coffeescript`、 `cpp`、 `csharp`、 `css`、 `dockerfile`、 `fsharp`、 `go`、 `handlebars`、 `html`、 `ini`、 `java`、 `javascript`、 `json`、 `less`、 `lua`、 `markdown`、 `msdax`、 `objective-c`、 `php`、 `plaintext`、 `postiats`、 `powershell`、 `pug`、 `python`、 `r`、 `razor`、 `ruby`、 `sb`、 `scss`、`shell`、 `sol`、 `sql`、 `swift`、 `typescript`、 `vb`、 `xml`、 `yaml`\n\n\n\n> 因为性能原因，上面的例子不支持实时修改 language 生效\n\n当然你也可以使用`xxx-editor`这种形式，例如`\"type\": \"json-editor\"`\n\n\n\n## 只读模式\n\n使用 `disabled: true`。\n\n\n\n## 全屏模式\n\n设置`allowFullscreen`属性为`true`，显示编辑器的全屏模式开关，开关开启后编辑器进入全屏模式。\n\n\n\n## 编辑器展现控制\n\n通过 `options` 来控制编辑器展现，比如下面的配置可以关闭行号\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| language | `string` | `javascript` | 编辑器高亮的语言，支持通过 `${xxx}` 变量获取 |\n| size | `string` | `md` | 编辑器高度，取值可以是 `md`、`lg`、`xl`、`xxl` |\n| allowFullscreen | `boolean` | `false` | 是否显示全屏模式开关 |\n| options | `object` | | monaco 编辑器的其它配置，比如是否显示行号等，请参考，不过无法设置 readOnly，只读模式需要使用 `disabled: true` |\n","path":"/zh-CN/components/form/editor"},{"title":"FieldSet 表单项集合","body":"\nFieldSet 是用于分组展示表单项的一种容器型组件，可以折叠。\n\n## 基本用法\n\n可以通过配置标题`title`和表单项数组`body`，实现多个表单项分组展示\n\n\n\n## 展示模式\n\n可以通过设置`mode`调整展示模式，用法同 \n\n下面`group`我们配置了`\"mode\": \"horizontal\"`，观察显示情况\n\n\n\n## 可折叠\n\n配置`\"collapsable\": true`可以实现点击标题折叠显隐表单项。\n\n\n\n### 默认是否折叠\n\n默认是展开的，如果想默认折叠，那么配置`\"collapsed\": true`默认折叠。\n\n\n\n## 标题放底部\n\nfieldSet 的另一种标题展现样式，不同的是展开的时候收起文本是在下方的，如果组件比较多的时候更容易收起。\n\n设置 `\"titlePosition\": \"bottom\"`。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | -------------------------------------------- | ------- | -------------------------------------------------------------------------- |\n| className | `string` | | CSS 类名 |\n| headingClassName | `string` | | 标题 CSS 类名 |\n| bodyClassName | `string` | | 内容区域 CSS 类名 |\n| title | | | 标题 |\n| body | Array<> | | 表单项集合 |\n| mode | `string` | | 展示默认，同 中的模式 |\n| collapsable | `boolean` | `false` | 是否可折叠 |\n| collapsed | `booelan` | `false` | 默认是否折叠 |\n| collapseTitle | | `收起` | 收起的标题 |\n","path":"/zh-CN/components/form/fieldset"},{"title":"FormItem 普通表单项","body":"\n**表单项** 是组成一个表单的基本单位，它具有的一些特性会帮助我们更好地实现表单操作。\n\n> 所有派生自`FormItem`的组件，都具有`FormItem`的特性。\n\n## 基本用法\n\n最基本的表单项配置像这样：\n\n\n\n- `name`: **必填属性**，标识表单数据域中，当前表单项值的`key`，这个 name 可以是深层结构，比如 `aa.bb`\n- `type`: **必填属性**，标识表单项类型\n- `label`: 标识表单项的标签\n\n> 所有表单项都只可以配置在`form`组件中，即`form`的`body`属性中。\n\n## 表单项展示\n\n### 内联模式\n\n通过配置`\"mode\": \"inline\"`，标识当前表单项使用内联模式。\n\n\n\n### 表单项尺寸\n\n可以配置`size`，来调整表单项的尺寸，支持`'xs' | 'sm' | 'md' | 'lg' | 'full'`，如下：\n\n\n\n> 不同组件的`size`效果可能会有所不同，具体请参考对应的组件文档。\n\n### 表单项标签\n\n设置`label`属性来配置表单项标签。\n\n当表单为水平布局时，左边即便是不设置`label`为了保持对齐也会留空，如果想要去掉空白，请设置成`false`。\n\n\n\n### 表单项标签提示\n\n配置`labelRemark`可以实现标签描述提示\n\n\n\n其它配置请参考 。\n\n### 配置禁用\n\n##### 静态配置\n\n通过配置`\"disabled\": true`来禁用表单项\n\n\n\n##### 通过条件配置是否禁用\n\n你也通过配置`disabledOn`，来实现在某个条件下禁用当前表单项.\n\n\n\n### 配置显隐\n\n##### 静态配置\n\n通过配置`\"hidden\": true`或者`\"visible\": false`来禁用表单项\n\n\n\n上例中的`text2`被隐藏了。\n\n##### 通过条件配置显隐\n\n你也通过配置`hiddenOn`，来实现在某个条件下禁用当前表单项.\n\n\n\n> `visible`和`hidden`，`visibleOn`和`hiddenOn`除了判断逻辑相反以外，没有任何区别\n\n## 表单项值\n\n表单项值，即表单项通过用户交互发生变化后，更新表单数据域中同`name`变量值.\n\n\n\n如上例，更改姓名表单项值，可以改变表单数据域中`name`变量的值。\n\n也支持链式配置 `name`属性，例如：`aaa.bbb`\n\n\n\n观察上例，这样更改表单项值，会改变数据域中`person.name`的值\n\n\n\n## 配置默认值\n\n通过配置`value`属性，可以设置表单项的默认值。\n\n\n\n`value`不支持数据映射，也就是说不可以直接配置类似于这样的语法：`${xxx}`，如果想要映射当前数据域中的某个变量，那么设置该表单项`name`为该变量名就行，如下：\n\n\n\n上例中我们表单数据域中有变量`\"text\": \"hello world!\"`，然后我们设置表达项`\"name\": \"text\"`，这样就可以自动映射值了。\n\n## 隐藏时删除表单项值\n\n默认情况下，在通过 `hiddenOn` 或 `visibleOn` 配置显隐交互时，被隐藏的表单项值，不会在当前表单数据域中删除，例如：\n\n\n\n观察上例，在调整 `number` 数量大于 1 时，`文本` 表单项会隐藏，但是对应的表单数据域中的 `text` 变量值仍存在。\n\n如果想要实现隐藏表单项后，在当前表单数据域中删除该表单项对应的值，那么可以在当前表单项上配置 `\"clearValueOnHidden\": true`。\n\n\n\n再次观察上例，当 `文本` 表单项隐藏时，对应的 `text` 变量也会被删除掉。\n\n> 注意: 如果有其他同 name 的表达项的存在，即使其他表单项值没有隐藏，也会在数据域中删掉该值。\n\n## 表单项必填\n\n### 静态配置\n\n通过配置`\"required\": true`来标识该表单项为必填。\n\n\n\n### 满足条件校验必填\n\n你也通过配置`requiredOn`，来实现在某个条件下使当前表单项必填。\n\n\n\n## 格式校验\n\n可以配置`validations`属性，指定校验当前表单项值的格式\n\n可以通过对象形式配置\n\n\n\n同样也可以配置多个格式校验\n\n\n\n### 字符串形式（不推荐）\n\n也可以配置字符串形式来指定，如下例，输入不合法的值，点击提交会报错并显示报错信息\n\n\n\n也可以指定多个格式校验，中间用`逗号`分隔。\n\n\n\n如果需要配置参数，例如显示最大值或最小值，则在格式标识符后`:`和参数\n\n### 自定义校验信息\n\namis 会有默认的报错信息，如果你想自定义校验信息，配置`validationErrors`属性\n\n\n\n如果需要获取当前格式校验配置的参数，可以使用`$1`\n\n\n\n默认的校验信息如下，可以直接配置文字，也可用多语言中的 key。参考：https://github.com/baidu/amis/blob/master/src/locale/zh-CN.ts#L175-L201\n\n\n\n### 表单项值发生变化即校验\n\n默认校验是当进行行为操作时，对表单项进行校验，如果你想每次表单项的值发生变化的时候就校验，请配置`\"validateOnChange\": true`\n\n### 支持的格式校验\n\n- `isEmail` 必须是 Email。\n- `isUrl` 必须是 Url。\n- `isNumeric` 必须是 数值。\n- `isAlpha` 必须是 字母。\n- `isAlphanumeric` 必须是 字母或者数字。\n- `isInt` 必须是 整形。\n- `isFloat` 必须是 浮点形。\n- `isLength:length` 是否长度正好等于设定值。\n- `minLength:length` 最小长度。\n- `maxLength:length` 最大长度。\n- `maximum:number` 最大值。\n- `minimum:number` 最小值。\n- `equals:xxx` 当前值必须完全等于 xxx。\n- `equalsField:xxx` 当前值必须与 xxx 变量值一致。\n- `isJson` 是否是合法的 Json 字符串。\n- `isUrlPath` 是 url 路径。\n- `isPhoneNumber` 是否为合法的手机号码\n- `isTelNumber` 是否为合法的电话号码\n- `isZipcode` 是否为邮编号码\n- `isId` 是否为身份证号码，没做校验\n- `matchRegexp:/foo/` 必须命中某个正则。\n- `matchRegexp1:/foo/` 必须命中某个正则。\n- `matchRegexp2:/foo/` 必须命中某个正则。\n- `matchRegexp3:/foo/` 必须命中某个正则。\n- `matchRegexp4:/foo/` 必须命中某个正则。\n\n#### 验证只允许 http 协议的 url 地址\n\n> 1.4.0 及以上版本\n\nisUrl 可以配置如下参数\n\n- schemes 协议，默认是为： `['http', 'https', 'ftp', 'sftp']`\n- allowLocal 是否允许填写本地地址\n- allowDataUrl 是否允许 dataUrl\n\n\n\n### 自定义校验函数\n\n可以自己写代码扩展表单验证，请参考 \n\n## 服务端校验\n\n### 通过表单提交接口\n\n也可以通过表单提交接口返回错误信息，实现服务端校验\n\n\n\n点击提交，api 接口返回中，需要在 errors 变量中，返回某个表单项的报错信息，`key`值为该表单项的`name`值。\n\n如上，接口返回的格式如下，提交后，`test2`表达项会显示报错信息\n\n\n\n#### Combo 校验\n\nCombo 类型的表单项，要实现服务端校验，可以使用 `路径key` 来定位要显示报错信息的表单项，例如 `a[0].b` 定位到 a combo 的第一项中 b 表单项。\n\n例如有如下表单，点击提交，查看效果：\n\n\n\n接口返回如下\n\n\n\n#### Table 校验\n\nTable 类型的表单项，要实现服务端校验，可以使用 `路径key` 来定位要显示报错信息的表单项，例如 `a[0].b` 定位到 a table 的第一项中 b 表单项。\n\n例如有如下表单，点击提交，查看效果：\n\n\n\n接口返回如下\n\n\n\n### 通过表单项校验接口\n\n可以在表单项上，配置校验接口 `validateApi`，实现单个表单项后端校验。\n\n\n\n校验接口显示校验信息返回格式如下：\n\n\n\n- `status`: 返回 `0` 表示校验成功，`422` 表示校验失败;\n- `errors`: 返回 `status` 为 `422` 时，显示的校验失败信息;\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | -------------------------------------------------- | ------ | ---------------------------------------------------------- |\n| type | `string` | | 指定表单项类型 |\n| className | `string` | | 表单最外层类名 |\n| inputClassName | `string` | | 表单控制器类名 |\n| labelClassName | `string` | | label 的类名 |\n| name | `string` | | 字段名，指定该表单项提交时的 key |\n| value | `string` | | 表单默认值 |\n| label | 或 `false` | | 表单项标签 |\n| labelRemark | | | 表单项标签描述 |\n| description | | | 表单项描述 |\n| placeholder | `string` | | 表单项描述 |\n| inline | `boolean` | | 是否为 内联 模式 |\n| submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 |\n| disabled | `boolean` | | 当前表单项是否是禁用状态 |\n| disabledOn | | | 当前表单项是否禁用的条件 |\n| visible | | | 当前表单项是否禁用的条件 |\n| visibleOn | | | 当前表单项是否禁用的条件 |\n| required | `boolean` | | 是否为必填。 |\n| requiredOn | 来配置当前表单项是否为必填。 |\n| validations | | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 |\n| validateApi | | | 表单校验接口 |\n","path":"/zh-CN/components/form/formitem"},{"title":"Formula 公式","body":"\n可以设置公式，将公式结果设置到指定表单项上。\n\n> 该表单项是隐藏的\n\n## 基本用法\n\n\n\n## 自动应用\n\n\n\n## 手动应用\n\n配置`\"autoSet\": false`，然后按钮上配置`target`，配置值为`formula`的`id`值，就可以实现手动触发公式应用\n\n\n\n> 为什么设置`id`而不是设置`name`?\n>\n> 因为`name`值已经用来设置目标变量名了，这个表单项肯定已经存在了，所以不是唯一了，不能够被按钮指定。\n\n## 条件应用\n\n可以配置`condition`用来指定作用条件，有两种写法：\n\n- 用 tpl 语法，把关联的字段写上如： `${xxx} ${yyy}` 意思是当 xxx 和 yyy 的取值结果变化了就再应用一次公式结果。\n- 自己写判断如: `this.xxx == \"a\" && this.xxx !== this.__prev.xxx` 当 xxx 变化了，且新的值是字符 \"a\" 时应用，可以写更加复杂的判断。\n\n\n\n## 使用新表达式语法\n\n> 1.5.0 及以上版本\n\n通过新的语法，可以调用其中的函数，比如\n\n\n\n这种写法默认会解决浮点数计算问题（需要更新到 amis 1.6.4 及以上版本），比如\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ------------------------------------------- | ------ | -------------------------------------------------------------------------------------------------------------- |\n| name | `string` | | 需要应用的表单项`name`值，公式结果将作用到此处指定的变量中去。 |\n| formula | | | 应用的公式 |\n| condition | | | 公式作用条件 |\n| initSet | `boolean` | `true` | 初始化时是否设置 |\n| autoSet | `boolean` | `true` | 观察公式结果，如果计算结果有变化，则自动应用到变量上 |\n| id | `boolean` | `true` | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `autoSet` 为 false 时用来手动触发 |\n","path":"/zh-CN/components/form/formula"},{"title":"Group 表单项组","body":"\n表单项，默认都是一行显示一个，Group 组件用于在一行展示多个表单项，会自动根据表单项数量均分宽度。\n\n## 基本用法\n\n\n\n## 展示\n\n可以给`group`组件设置`mode`调整展示模式，用法同 \n\n下面`group`我们配置了`\"mode\": \"horizontal\"`，观察显示情况\n\n\n\n当表单在水平模式下时，如果`group`内表单项设置`\"label\": false`，会导致布局错乱，如下\n\n\n\n这时可以给`group`配置`label`属性，保持和其他表单项布局统一\n\n\n\n## 宽度占比\n\n在表单项内部可以通过 `columnRatio` 来控制宽度，整体是 12 等分\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------------------------- | -------------- | -------------------------------------------------------------------------- |\n| className | `string` | | CSS 类名 |\n| label | `string` | | group 的标签 |\n| body | Array<> | | 表单项集合 |\n| mode | `string` | | 展示默认，同 中的模式 |\n| gap | `string` | | 表单项之间的间距，可选：`xs`、`sm`、`normal` |\n| direction | `string` | `\"horizontal\"` | 可以配置水平展示还是垂直展示。对应的配置项分别是：`vertical`、`horizontal` |\n","path":"/zh-CN/components/form/group"},{"title":"Hidden 隐藏字段","body":"\n## 基本用法\n\n默认表单提交，在没有 的情况下，只会发送 `body` 里面的这些成员，对于隐藏的字段同时又希望提交表单的时候带过去，可以使用 `hidden` 组件\n\n\n","path":"/zh-CN/components/form/hidden"},{"title":"Form 表单","body":"\n表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据。\n\n## 基本用法\n\n最基本的用法是配置 和 提交接口`api`。\n\n如下我们配置姓名和邮箱表单项，并可以填写数据并提交给接口`/api/mock2/form/saveForm`。\n\n\n\n## 表单展示\n\n### 默认模式\n\n默认展示模式为文字表单项分行显示\n\n\n\n### 水平模式\n\n水平模式，左右摆放，左右比率分配。\n\n\n\n可以配置`horizontal`属性，调整偏移量，格式如下：\n\n\n\n\n\n通过上面的配置可以看出来水平布局其实按比率分配的。实际上有时候固定左侧宽度更好看点。\n\n\n\n也可以直接配置 'xs' | 'sm' | 'md' | 'lg' 来定义左侧 label 的宽度。\n\n\n\n有时表单内容需要两端对齐，可在 horizontal 中增加 justify 配置，注意只对内联控件生效\n\n\n\n### 内联模式\n\n使用内联模式展现表单项\n\n\n\n### 实现一行展示多个表单项\n\n有两种方法，一个是通过 `columnCount` 来控制表单显示几列\n\n\n\n另一个方法是使用 group，它能实现每行显示不同列数，以及不同列的宽度分配情况，可以实现更灵活的控制\n\n\n\n### 底部按钮栏\n\n#### 隐藏默认提交按钮\n\nForm 默认会在底部渲染一个提交按钮，用于执行表单的提交行为。你可以通过两种方式去掉这个默认的提交按钮：\n\n1. 配置：`\"submitText\": \"\"`\n2. 配置：`\"actions\": []`\n\n\n\n#### 配置若干自定义按钮\n\n同样，你可以通过 actions 属性，配置任意你想要的行为按钮。\n\n\n\n请记住，如果想触发表单提交行为，请配置`\"actionType\": \"submit\"`或`\"type\": \"submit\"`按钮\n\n### 去掉表单边框\n\n通过配置`\"wrapWithPanel\": false`，可以去掉默认表单边框（包括标题，按钮栏以及边距样式等）。\n\n\n\n**注意！配置该属性后，`title`和`actions`属性将失效并无法渲染，请在表单内自行配置。**\n\n### 固定底部栏\n\n如果表单项较多导致表单过长，而不方便操作底部的按钮栏，可以配置`\"affixFooter\": true`属性，将底部按钮栏固定在浏览器底部\n\n## 表单项数据初始化\n\n表单可以通过配置`initApi`，实现表单初始化时请求接口，用于展示数据或初始化表单项。\n\n\n\n比如以上这个例子接口返回为\n\n\n\n第一个表单项的 name 配置为 `name`，所以这个表单初始化完毕后展示 `Amis Renderer`。\n\n> 表单项的 value 是不支持表达式，所以不要尝试用 `value: \"${xxx}\"` 来关联数据。\n\n### 轮询初始化请求\n\nForm 支持轮询初始化接口，步骤如下：\n\n1. 配置`initApi`\n2. 配置 `interval`：单位为毫秒，最小 `1000`\n\n\n\n如果希望在满足某个条件的情况下停止轮询，配置`stopAutoRefreshWhen`表达式。\n\n\n\n### 静态初始化数据域\n\n我们也可以手动设置 form 的数据域来初始化多个表单项值\n\n\n\n### 数据格式一致性问题\n\n当表单来初始化表单项值时，需要保持数据格式的一致性。\n\n如果表单初始化的值与表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，也许会导致不一致性的问题，我们看一个例子：\n\n\n\n上例中， `select` 我们配置了`\"multiple\": true`，预期中，我们希望选中 `A` 和 `C` 项时，表单项的数据格式为：`\"a,c\"`，但是我们表单数据域中，`select`默认值为`\"value\": [\"a\", \"c\"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题：\n\n1. 有可能不会默认选中 `A` 和 `C` 选项；\n2. 当不操作该表单项，直接提交时，预期是：`\"a,c\"`，但提交给后端的数据为：`[\"a\", \"c\"]`，导致了不一致性的问题。\n\n> 通过 `initApi` 配置默认值同理，不再赘述\n\n因此一定确保默认值与选择器表单项数据格式配置相匹配。\n\n## 表单提交\n\n配置`api`属性，当表单执行提交行为时，会默认将当前表单数据域中的数据使用`post`方式发送给所配置`api`\n\n\n\n点击提交按钮，会看到发送表单请求，请求数据体为：\n\n\n\n发送请求默认为 `POST` 方式，会将所有表单项整理成一个对象发送过过去。除此之外你可以主动获取以下信息。\n\n- `diff` 只会包含 `diff` 结果\n- `prinstine` 原始数据\n 如:\n\n\n\n> 如果 返回了 `data` 对象，且是对象，会把结果 merge 到表单数据里面。\n\n当你需要配置特定的请求方式，请求体，`header`时，使用对象类型 api 配置，并使用 数据映射 进行数据配置。\n\n下面示例我们更改了请求方法为`PUT`，并在原提交数据的基础上添加一个字段`\"_from\"`。更多用法查看 文档\n\n\n\n触发表单提交行为有下面几种方式：\n\n1. 默认的`提交按钮`\n2. 为行为按钮配置`\"actionType\": \"submit\"`\n3. 配置`\"type\": \"submit\"`的按钮\n\n### 轮询提交请求\n\n通过设置`asyncApi`，当表单提交发送保存接口后，还会继续轮询请求该接口，默认间隔为`3秒`，直到返回 `finished` 属性为 `true` 才 结束。\n\n\n\n如果决定结束轮询的标识字段名不是 `finished`，请设置`finishedField`属性，比如：`\"finishedField\": \"is_success\"`\n\n## 表单校验\n\n一般可以通过在中，配置校验规则完成校验，但是有时候，我们需要组合多个表单项实现一些校验，这时可以通过配置 `rules` 来实现组合校验。\n\n例如下例，我们想校验 `a` 和 `b` 表单项不可以同时有值，否则就报错，则可以进行如下配置：\n\n\n\n> `rule` 编写使用 \n\n### 组合校验高亮表单项\n\n> 1.6.5 及以上版本\n\n默认组合校验的错误信息显示在表单的底部，如果希望可以定位到表单项自己，则可以通过配置 `name` 来高亮错误。\n\n\n\n## 重置表单\n\n配置`\"type\": \"reset\"`或者`\"actionType\": \"reset\"`的按钮，可以实现点击重置表单项值。\n\n\n\n> **请注意：**这里的重置是将表单数据域重置到**初始状态**，**而不是清空**，如果你配置了初始化接口，那么重置操作是会**将表单项重置至初始化表单项值**\n\n## 表单数据域调试\n\n配置`debug:true`可以查看当前表单的数据域数据详情，方便数据映射、表达式等功能调试，如下，你可以修改表单项查看数据域变化\n\n\n\n> 该配置不会展示完整的数据链，只会展示当前表单的数据域\n\n## 禁用数据链\n\n默认表单是可以获取到完整数据链中的数据的，但是该默认行为不适用于所有场景，例如：\n\n在 CRUD 的列表项中配置弹框，弹框中有一个表单，则该表单项中所有的同`name`表单项都会根据上层`crud`的行数据进行初始化，如果你是实现编辑的功能那并没有是什么问题，但是如果你是新建功能，那么这将不符合你的预期，你可以手动设置`\"canAccessSuperData\": false`来关闭该行为\n\n## 提交后行为\n\n表单提交成功后，可以执行一些行为。\n\n### 重置表单\n\n如果想提交表单成功后，重置当前表单至初始状态，可以配置`\"resetAfterSubmit\": true`。\n\n\n\n编辑表单项，点击提交，成功后会发现表单项的值会重置到初始状态，即空\n\n> 注意，如果表单项有默认值，则会将该表单项的值重置至该默认值。\n\n### 跳转页面\n\n配置`redirect`属性，可以指定表单提交成功后要跳转至的页面\n\n\n\n### 刷新目标组件\n\n配置`reload`属性为其他组件`name`值，可以在表单提交成功之后，刷新指定组件。\n\n\n\n上例中`form`提交成功后，会触发`name`为`my_service`的`Service`组件重新请求初始化接口\n\n上面示例是一种\n\n### 显示提交的返回结果\n\n默认情况下表单提交返回结果会写入当前表单的数据域，如果要显示在当前表单，可以直接使用 `static` 类型，比如下面的例子\n\n\n\n### 将提交返回内容发送到其它组件\n\n还可以将返回结果发送到其它组件，首先设置另一个表单的 `name`，然后通过 `reload` 配置参数来提交\n\n\n\n### 将数据域发送给目标组件\n\n配置`target`属性为目标组件`name`值，可以在触发提交行为后，将当前表单的数据域发送给目标组件。\n\n\n\n第一个表单在提交时，会将它的表单数据域数据发送给`detailForm`表单，触发`detailForm`的初始化接口联动，重新请求接口更新数据域，并更新关键字表单项。\n\n上面示例组合使用了 \n\n## 持久化保存表单项数据\n\n表单默认在重置之后（切换页面、弹框中表单关闭表单），会自动清空掉表单中的所有数据，如果你想持久化保留当前表单项的数据而不清空它，那么通过 Form 配置 `persistData: \"xxx\"`，指定一个 `key` ，来实现数据持久化保存\n\n> 注意，如果使用在 CRUD 列表中的编辑框内的 Form 中，可以利用数据映射语法，`persistData: \"xxx:${id}\"`，来为 form 指定一个唯一的 key\n\n如果想提交成功后，清空该缓存，则配置`\"clearPersistDataAfterSubmit\": true`\n\n## 禁用回车提交\n\n表单默认情况下回车就会提交，如果想阻止这个行为，可以加上 `preventEnterSubmit` 配置项。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------------- | ------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| type | `string` | | `\"form\"` 指定为 Form 渲染器 |\n| name | `string` | | 设置一个名字后，方便其他组件与其通信 |\n| mode | `string` | `normal` | 表单展示方式，可以是：`normal`、`horizontal` 或者 `inline` |\n| horizontal | `Object` | `{\"left\":\"col-sm-2\", \"right\":\"col-sm-10\", \"offset\":\"col-sm-offset-2\"}` | 当 mode 为 `horizontal` 时有用，用来控制 label |\n| title | `string` | `\"表单\"` | Form 的标题 |\n| submitText | `String` | `\"提交\"` | 默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。 |\n| className | `string` | | 外层 Dom 的类名 |\n| body | Array< > | | Form 表单项集合 |\n| actions | Array<> | | Form 提交按钮，成员为 Action |\n| messages | `Object` | | 消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。 |\n| messages.fetchSuccess | `string` | | 获取成功时提示 |\n| messages.fetchFailed | `string` | | 获取失败时提示 |\n| messages.saveSuccess | `string` | | 保存成功时提示 |\n| messages.saveFailed | `string` | | 保存失败时提示 |\n| wrapWithPanel | `boolean` | `true` | 是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。 |\n| panelClassName | `string` | | 外层 panel 的类名 |\n| api | | | Form 用来保存数据的 api。 |\n| initApi | | | Form 用来获取初始数据的 api。 |\n| rules | Array<{rule:string;message:string;name?: string[]}> | | 表单组合校验规则 |\n| interval | `number` | `3000` | 刷新时间(最低 3000) |\n| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |\n| stopAutoRefreshWhen | `string` | `\"\"` | 通过 来配置停止刷新的条件 |\n| initAsyncApi | | | Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮询请求该接口，直到返回 finished 属性为 true 才 结束。 |\n| initFetch | `boolean` | `true` | 设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口 |\n| initFetchOn | `string` | | 用表达式来配置 |\n| initFinishedField | `string` | `finished` | 设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取 |\n| initCheckInterval | `number` | `3000` | 设置了 initAsyncApi 以后，默认拉取的时间间隔 |\n| asyncApi | | | 设置此属性后，表单提交发送保存接口后，还会继续轮询请求该接口，直到返回 `finished` 属性为 `true` 才 结束。 |\n| checkInterval | `number` | 3000 | 轮询请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效 |\n| finishedField | `string` | `\"finished\"` | 如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success` |\n| submitOnChange | `boolean` | `false` | 表单修改即提交 |\n| submitOnInit | `boolean` | `false` | 初始就提交一次 |\n| resetAfterSubmit | `boolean` | `false` | 提交后是否重置表单 |\n| primaryField | `string` | `\"id\"` | 设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。 |\n| target | `string` | | 默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。 如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。 |\n| redirect | `string` | | 设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。 |\n| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |\n| autoFocus | `boolean` | `false` | 是否自动聚焦。 |\n| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表单项上 |\n| persistData | `string` | `\"\"` | 指定一个唯一的 key，来配置当前表单是否开启本地缓存 |\n| clearPersistDataAfterSubmit | `boolean` | `true` | 指定表单提交成功后是否清除本地缓存 |\n| preventEnterSubmit | `boolean` | `false` | 禁用回车提交表单 |\n| trimValues | `boolean` | `false` | trim 当前表单项的每一个值 |\n| promptPageLeave | `boolean` | `false` | form 还没保存，即将离开页面前是否弹框确认。 |\n| columnCount | `number` | 0 | 表单项显示为几列 |\n","path":"/zh-CN/components/form/index"},{"title":"InputArray 数组输入框","body":"\nInputArray 是一种简化的 ，提交的时将以数组的形式提交。\n\n## 基本用法\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------ |\n| type | `string` | `\"array\"` | 指明为`array`组件 |\n| items | `string`或 | | 配置单项表单类型 |\n| addable | `boolean` | | 是否可新增。 |\n| removable | `boolean` | | 是否可删除 |\n| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 |\n| draggableTip | `string` | | 可拖拽的提示文字，默认为：`\"可通过拖动每行中的【交换】按钮进行顺序调整\"` |\n| addButtonText | `string` | `\"新增\"` | 新增按钮文字 |\n| minLength | `number` | | 限制最小长度 |\n| maxLength | `number` | | 限制最大长度 |\n","path":"/zh-CN/components/form/input-array"},{"title":"InputCity 城市选择器","body":"\n城市选择器，方便输入城市，可以理解为自动配置了国内城市选项的 Select，支持到县级别。\n\n## 基本用法\n\n\n\n观察数据域中表单项的值，存储的是位置邮编。\n\n## 配置选择级别\n\n可以通过设置 `allowDistrict` 和 `allowCity` 设置用户选择级别，例如只选择省份：\n\n\n\n## 获取更多选项信息\n\n表单项值默认格式是编码（即 `code`），如果你想要详细点的信息，可以把 `extractValue` 设置成 `false`。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | --------- | ------- | --------------------------------------------------------------------------------------------------------------------- |\n| allowCity | `boolean` | `true` | 允许选择城市 |\n| allowDistrict | `boolean` | `true` | 允许选择区域 |\n| searchable | `boolean` | `false` | 是否出搜索框 |\n| extractValue | `boolean` | `true` | 默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| change | `value: number \\| string` 选中值 | 选中值发生变化时触发 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| clear | - | 清空 |\n| reset | - | 重置 |\n","path":"/zh-CN/components/form/input-city"},{"title":"InputColor 颜色选择器","body":"\n## 基本用法\n\n\n\n## 选择器预设颜色值\n\n颜色选择器底部预设有会写可选的颜色值，默认为：\n\n\n\n你可以配置`presetColors`数组进行自定义。颜色支持两种格式`string` 和 `{color: string; title: string}`，并支持两种格式混合使用。`string`格式支持所有合法的 CSS 颜色码，`object`类型下的`color`属性为 CSS 颜色码，`title`属性为颜色名称，鼠标悬浮于色块时会显示对应颜色名称。\n\n\n\n## rgba\n\n将 `format` 设置为 rgba 就能改变颜色透明度。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |\n| format | `string` | `hex` | 请选择 `hex`、`hls`、`rgb`或者`rgba`。 |\n| presetColors | `Array` | | 选择器底部的默认颜色，数组内为空则不显示默认颜色 |\n| allowCustomColor | `boolean` | `true` | 为`false`时只能选择颜色，使用 `presetColors` 设定颜色选择范围 |\n| clearable | `boolean` | `\"label\"` | 是否显示清除按钮 |\n| resetValue | `string` | `\"\"` | 清除后，表单项值调整成该值 |\n","path":"/zh-CN/components/form/input-color"},{"title":"InputDateRange 日期范围","body":"\n## 基本用法\n\n\n\n## 快捷键\n\n`ranges`属性支持自定义快捷选择日期范围快捷键\n\n\n\n支持的快捷键有\n\n- `today`: 今天\n- `yesterday`: 昨天\n- `tomorrow`: 明天\n- `prevweek`: 上周\n- `thisweek`: 这个周\n- `thismonth`: 本月\n- `prevmonth`: 上个月\n- `prevquarter`: 上个季度\n- `thisquarter`: 这个季度\n- `thisyear`: 今年\n- `lastYear`: 去年\n- `{n}daysago` : 最近 n 天，例如：`7daysago`，下面用法相同\n- `{n}dayslater`: n 天以内\n- `{n}weeksago`: 最近 n 周\n- `{n}weekslater`: n 周以内\n- `{n}monthsago`: 最近 n 月\n- `{n}monthslater`: n 月以内\n- `{n}quartersago`: 最近 n 季度\n- `{n}quarterslater`: n 季度以内\n- `{n}yearsago`: 最近 n 年\n- `{n}yearslater`: n 年以内\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-DD-MM` | |\n| placeholder | `string` | `\"请选择日期范围\"` | 占位文本 |\n| ranges | `Array 或 string` | `\"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter\"` | 日期范围快捷键 |\n| minDate | `string` | | 限制最小日期，用法同 |\n| maxDate | `string` | | 限制最大日期，用法同 |\n| minDuration | `string` | | 限制最小跨度，如： 2days |\n| maxDuration | `string` | | 限制最大跨度，如：1year |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |","path":"/zh-CN/components/form/input-date-range"},{"title":"InputDate 日期","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中任意日期，可以看到默认显示日期的格式是像`2020-04-14`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`2020年04月14日`这样的格式，查找 可知配置格式应为 `YYYY年MM月DD日`，即：\n\n\n\n选中任意日期，观察显示格式\n\n## 值格式\n\n选中任意日期，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。\n\n\n\n如果你想要其他格式的日期值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`2020-04-14`这样的格式，查找 可知配置格式应为 `YYYY-MM-DD`，即：\n\n\n\n选中任意日期，观察数据域中表单项值的变化\n\n## 默认值\n\n可以设置`value`属性，设置日期选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1days\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1days\"`，默认就会选中明天。\n\n支持的相对值关键字有：\n\n- `today`: 当前日期\n- `day`或`days`: 天\n- `week`或`weeks`: 周\n- `month`或`months`: 月\n- `year`或`years`: 年\n\n### 通过公式配置默认值\n\n> 1.7.0 及以上版本\n\n可以通过日期公式来动态计算。\n\n\n\n## 限制范围\n\n可以通过配置`maxDate`和`minDate`显示可选范围\n\n### 固定时间值\n\n\n\n### 支持相对值\n\n范围限制也支持设置 。\n\n\n\n### 支持模板\n\n也支持通过，设置自定义值。\n\n来一个常见例子，配置两个选择`开始时间`和`结束时间`的时间选择器，需要满足：`开始时间`不能大于`结束时间`，`结束时间`也不能小于`开始时间`。\n\n\n\n## 快捷键\n\n你也可以配置`shortcuts`属性支持快捷选择日期\n注：移动端 picker 的形式不支持快捷键\n\n\n\n上例中我们配置了`\"shortcuts\": [\"yesterday\" ,\"today\", \"tomorrow\"]`，选择器顶部有将会显示快捷键`昨天`，`今天`和`明天`\n\n支持的快捷键有\n\n- `today`: 今天\n- `yesterday`: 昨天\n- `thisweek`: 本周一\n- `thismonth`: 本月初\n- `prevmonth`: 上个月初\n- `prevquarter`: 上个季节初\n- `thisquarter`: 本季度初\n- `tomorrow`: 明天\n- `endofthisweek`: 本周日\n- `endofthismonth`:本月底\n- `endoflastmonth`:上月底\n- `{n}daysago` : n 天前，例如：`2daysago`，下面用法相同\n- `{n}dayslater`: n 天后\n- `{n}weeksago`: n 周前\n- `{n}weekslater`: n 周后\n- `{n}monthsago`: n 月前\n- `{n}monthslater`: n 月后\n- `{n}quartersago`: n 季度前\n- `{n}quarterslater`: n 季度后\n\n## UTC\n\n\n\n## 内嵌模式\n\n\n\n## 原生日期组件\n\n原生数字日期将直接使用浏览器的实现，最终展现效果和浏览器有关，而且只支持 `min`、`max`、`step` 这几个属性设置。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | --------- | -------------- | ----------------------------------------------------------------------------------------------------------- |\n| value | `string` | | |\n| format | `string` | `X` | 日期选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `YYYY-DD-MM` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 |\n| placeholder | `string` | `\"请选择日期\"` | 占位文本 |\n| shortcuts | `string` | | 日期快捷键 |\n| minDate | `string` | | 限制最小日期 |\n| maxDate | `string` | | 限制最大日期 |\n| utc | `boolean` | `false` | 保存 utc 值 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |","path":"/zh-CN/components/form/input-date"},{"title":"InputDatetimeRange 日期时间范围","body":"\n## 基本用法\n\n\n\n## 时间显示到秒\n\n通过 `\"timeFormat\": \"HH:mm:ss\"` 设置时间输入框显示秒\n\n\n\n## 快捷键\n\n`ranges`属性支持自定义日期时间范围快捷键\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------ |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-DD-MM` | |\n| placeholder | `string` | `\"请选择日期范围\"` | 占位文本 |\n| ranges | `Array 或 string` | `\"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter\"` | 日期范围快捷键 |\n| minDate | `string` | | 限制最小日期时间，用法同 |\n| maxDate | `string` | | 限制最大日期时间，用法同 |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |","path":"/zh-CN/components/form/input-datetime-range"},{"title":"InputDatetime 日期时间","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中任意日期时间，可以看到默认显示日期的格式是像`2020-04-14 12:20:10`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`2020年04月14日 12时20分10秒`这样的格式，查找 可知配置格式应为 `YYYY年MM月DD日 HH时mm分ss秒`，即：\n\n\n\n选中任意日期时间，观察显示格式\n\n## 值格式\n\n选中任意日期时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。\n\n\n\n如果你想要其他格式的日期值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`2020-04-14 12:20:10`这样的格式，查找 可知配置格式应为 `YYYY-MM-DD HH:mm:ss`，即：\n\n\n\n选中任意日期时间，观察数据域中表单项值的变化\n\n## 默认值\n\n可以设置`value`属性，设置日期选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后的时间。\n\n支持的相对值关键字除了 中的以外，还支持：\n\n- `now`: 当前时间\n- `minute`或`minutes`或`min`或`mins`: 分钟\n- `hour`或`hours`: 小时\n\n## 限制范围\n\n可以通过配置`maxDate`和`minDate`显示可选范围\n\n### 固定时间值\n\n\n\n### 支持相对值\n\n范围限制也支持设置 。\n\n\n\n### 支持模板\n\n也支持通过，设置自定义值。\n\n来一个常见例子，配置两个选择`开始时间`和`结束时间`的时间选择器，需要满足：`开始时间`不能小于`结束时间`，`结束时间`也不能大于`开始时间`。\n\n\n\n## 快捷键\n\n你也可以配置`shortcuts`属性支持快捷选择日期\n\n\n\n上例中我们配置了`\"shortcuts\": [\"yesterday\" ,\"today\", \"tomorrow\"]`，选择器顶部有将会显示快捷键`昨天`，`今天`和`明天`\n\n除了支持 的快捷键有\n\n支持的快捷键除了 中的以外，还支持：\n\n- `now`: 现在\n- `{n}hoursago` : n 小时前，例如：`2hoursago`，下面用法相同\n- `{n}hourslater` : n 小时前，例如：`2hourslater`，下面用法相同\n\n## UTC\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ---------------------- | --------------------------------------------------------------------------------------------------------------- |\n| value | `string` | | |\n| format | `string` | `X` | 日期时间选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `YYYY-MM-DD HH:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| placeholder | `string` | `\"请选择日期以及时间\"` | 占位文本 |\n| shortcuts | `string` | | 日期时间快捷键 |\n| minDate | `string` | | 限制最小日期时间 |\n| maxDate | `string` | | 限制最大日期时间 |\n| utc | `boolean` | `false` | 保存 utc 值 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联 |\n| timeConstraints | `object` | `true` | 请参考 里的说明 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |","path":"/zh-CN/components/form/input-datetime"},{"title":"InputExcel 解析 Excel","body":"\n这个组件是通过前端对 Excel 进行解析，将结果作为表单项，使用它有两个好处：\n\n1. 节省后端开发成本，无需再次解析 Excel\n2. 可以前端实时预览效果，比如配合 input-table 组件进行二次修改\n\n## 基本使用\n\n默认情况下只解析第一个 sheet 的内容，下面的例子中，选择上传文件后，就能知道最终会解析成什么数据\n\n\n\n默认模式是解析成对象数组，将第一行作为对象里的键，可以上传一个类似这样的 Excel 内容试试\n\n\n\n解析后的的数据格式将会是\n\n\n\n可以配合 `input-table` 来实现上传后二次编辑\n\n\n\n需要保证 `input-table` 的 `name` 和 `input-excel` 一致，同时 `columns` 中的 `name` 也需要和 Excel 的列名一致。\n\n## 二维数组模式\n\n除了默认配置的对象数组格式，还可以使用二维数组方式，方法是设置 `\"parseMode\": \"array\"`\n\n\n\n如果是前面的例子，解析结果将会是\n\n\n\n## 解析多个 sheet\n\n默认配置只解析第一个 sheet，如果要解析多个 sheet，可以通过 `\"allSheets\": true` 开启多个 sheet 的读取，这时的数据会增加一个层级。\n\n\n\n如果按之前的例子，结果将会是\n\n\n\n## 富文本模式\n\n默认情况下 Excel 内容将会解析为纯文本，如果要使用富文本格式，可以通过 `plainText` 属性控制\n\n\n\n开启这个模式后，对于富文本的内容会解析成对象的形式，有以下几种\n\n- 富文本，内容放在 richText 属性下\n\n \n\n- 出错\n\n \n\n- 公式\n\n \n\n- 超链接\n\n \n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------- | -------- | ------------------ |\n| allSheets | `boolean` | false | 是否解析所有 sheet |\n| parseMode | `'array'` 或 `'object'` | 'object' | 解析模式 |\n| includeEmpty | `boolean` | true | 是否包含空值 |\n| plainText | `boolean` | true | 是否解析为纯文本 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ---------------------- | -------------------- |\n| change | `value: Array` | 选中值发生变化时触发 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------- | ---- |\n| clear | - | 清空 |\n","path":"/zh-CN/components/form/input-excel"},{"title":"InputFile 文件上传","body":"\n## 基本用法\n\n用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了。\n\n> 如果希望文件内容伴随表单一起提交，可以配置 `asBlob` 或者 `asBase64`。\n\n\n\n### 接口说明\n\n这是单文件上传模式，通过配置 `receiver` 来接管文件上传。\n\n接口发送方式是 POST, 数据体为 form-data 格式。对应的文件字段名为 `file`。这个可以通过 `fileField` 来配置。要求返回的数据格式如下。\n\n\n\n- value：必须返回该字段用作回显，一般是文件资源地址\n\n> 注意这只是单文件上传部分，如果允许上传的文件比较大，建议用分块上传，请阅读下面的分块上传部分。\n\n## 限制文件类型\n\n可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`\n\n\n\n想要限制多个类型，则用逗号分隔，例如：`.csv,.md`\n\n## 手动上传\n\n如果不希望 File 组件上传，可以配置 `asBlob` 或者 `asBase64`，采用这种方式后，组件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。\n\n\n\n上例中，选择任意文件，然后观察数据域变化；点击提交，amis 自动会调整接口数据格式为`FormData`\n\n## 分块上传\n\n如果文件过大，则可能需要使用分块上传，默认大于 5M（chunkSize 配置决定） 的文件是会自动开启，可以通过 `useChunk` 配置成 false 关闭。\n\n分块上传需要配置三个接口来完成分别是:\n\n- `startChunkApi` 用来做分块前的准备工作\n- `chunkApi` 用来接收每个分块上传\n- `finishChunkApi` 用来收尾分块上传\n\n### startChunkApi\n\n用来做分块前的准备工作，一个文件只会调用一次。如果出错了，后续的分块上传就会中断。\n\n发送说明：默认是 post，发送的数据中会包含 `filename` 字段，记录文件名，默认的数据体格式为 json。可以额外配置参数，请参考 API 的配置说明。\n\n要求返回的数据中必须包含：\n\n- `uploadId` 这次上传的唯一 ID。\n- `key` 有点类似 `uploadId`，可有可无，爱速搭中用来记录后端文件存储路径。\n\n其他属性返回目前是没有任何作用的。\n\n如：\n\n\n\n### chunkApi\n\n用来接收每个分块上传，大文件会根据 chunkSize 分割成多块，然后每块上传都会调用这个接口。\n\n发送说明：默认为 post，发送体格式为 form-data。包含以下信息：\n\n- `uploadId` startChunkApi 返回的\n- `key` startChunkApi 返回的\n- `partNumber` 分块序号，从 1 开始。\n- `partSize` 分块大小\n- `file` 文件体\n\n要求返回的数据中必须包含:\n\n- `eTag` 通常为文件的内容戳。\n\n如：\n\n\n\n### finishChunkApi\n\n等所有分块上传完后，将上传文件收集到的 `eTag` 信息合并一起，再次请求后端完成文件上传。\n\n发送说明：默认为 post，数据体默认为 json，包含以下信息\n\n- `filename` 文件名\n- `key` startChunkApi 返回的\n- `uploadId` startChunkApi 返回的\n- `partList` 数组，每个成员为 `{partNumber: xxx, eTag: \"xxxxx\"}` 即分块编号和分块 `eTag` 信息。\n\n数据返回，类似单文件上传一样，必须有 `value` 属性，可选返回 `url` 用来决定文件的下载地址。如：\n\n\n\n## 自动填充\n\n上传成功后，可以通过配置 `autoFill` 将上传接口返回的值填充到某个表单项中（在非表单下暂不支持）：\n\n\n\n上例中，file 组件上传后，接口返回格式例如如下：\n\n\n\n然后 file 上配置：\n\n\n\n这样上传成功后，会把接口中的 `url` 变量，赋值给 `myUrl` 变量\n\n**多选模式**\n\n当表单项为多选模式时，不能再直接取选项中的值了，而是通过 `items` 变量来取，通过它可以获取当前选中的选项集合。\n\n\n\n## 拖拽上传\n\n把文件拖入指定区域，完成上传，同样支持点击上传。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| receiver | | | 上传文件接口 |\n| accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` |\n| asBase64 | `boolean` | `false` | 将文件以`base64`的形式，赋值给当前组件 |\n| asBlob | `boolean` | `false` | 将文件以二进制的形式，赋值给当前组件 |\n| maxSize | `number` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`B` |\n| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 |\n| multiple | `boolean` | `false` | 是否多选。 |\n| drag | `boolean` | `false` | 是否为拖拽上传 | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| delimiter | `string` | `,` | |\n| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |\n| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |\n| stateTextMap | object | `{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }` | 上传状态文案 |\n| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 |\n| nameField | `string` | `name` | 接口返回哪个字段用来标识文件名 |\n| valueField | `string` | `value` | 文件的值用那个字段来标识。 |\n| urlField | `string` | `url` | 文件下载地址的字段名。 |\n| btnLabel | `string` | | 上传按钮的文字 |\n| downloadUrl | `boolean`或`string` | `\"\"` 1.1.6 版本开始支持 `post:http://xxx.com/${value}` 这种写法 | 默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。 |\n| useChunk | `boolean`或`\"auto\"` | `\"auto\"` | amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。 |\n| chunkSize | `number` | `5 * 1024 * 1024` | 分块大小 |\n| startChunkApi | | | startChunkApi |\n| chunkApi | | | chunkApi |\n| finishChunkApi | | | finishChunkApi |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------ | -------------------- |\n| change | `file: Array` | 选中值发生变化时触发 |\n| remove | `file: FileValue` | 被移除的文件 |\n| success | `file: FileValue` | 上传成功的文件 |\n| fail | `file: FileValue` | 上传失败的文件 |\n\n### FileValue 属性表\n\n| 属性名 | 类型 | 说明 |\n| ------ | -------- | -------------------------------------------------- |\n| name | `string` | 文件名称 |\n| value | `string` | 上传成功后返回的 url |\n| state | `string` | 文件当前状态,值可为 `pending` `uploaded` `invalid` |\n| error | `string` | 错误信息 |\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------- | ---- |\n| clear | - | 清空 |","path":"/zh-CN/components/form/input-file"},{"title":"InputFormula 公式编辑器","body":"\n## 基本用法\n\n用来输入公式。还是 beta 版本，整体待优化。\n\n\n\n## 展示模式\n\n设置`\"inputMode\": \"button\"`可以切换编辑器的展示模式。\n\n\n\n## 变量展示模式\n\n设置不同`variableMode`字段切换变量展示模式，树形结构：\n\n\n\nTab 结构：\n\n\n\n## 高亮文本\n\n通过配置`allowInput`为`false`可以高亮文本内容，但是只能在编辑器中编辑\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | ------------------------------------------------------------------------------------------ | ---------------- | ------------------------------------------------------------------------------ |\n| title | `string` | `'公式编辑器'` | 弹框标题 |\n| header | `string` | - | 编辑器 header 标题，如果不设置，默认使用表单项`label`字段 |\n| evalMode | `boolean` | `true` | 表达式模式 或者 模板模式，模板模式则需要将表达式写在 `${` 和 `}` 中间。 |\n| variables | `{label: string; value: string; children?: any[]; tag?: string}[]` | `[]` | 可用变量 |\n| variableMode | `string` | `list` | 可配置成 `tabs` 或者 `tree` 默认为列表，支持分组。 |\n| functions | `Object[]` | - | 可以不设置，默认就是 amis-formula 里面定义的函数，如果扩充了新的函数则需要指定 |\n| inputMode | `'button' \\| 'input-button'` | - | 控件的展示模式 |\n| icon | `string` | - | 按钮图标，例如`fa fa-list` |\n| btnLabel | `string` | `'公示编辑'` | 按钮文本，`inputMode`为`button`时生效 |\n| level | `'info' \\| 'success' \\| 'warning' \\| 'danger' \\| 'link' \\| 'primary' \\| 'dark' \\| 'light'` | `default` | 按钮样式 |\n| allowInput | `boolean` | 输入框是否可输入 |\n| btnSize | `'xs' \\| 'sm' \\| 'md' \\| 'lg'` | - | 按钮大小 |\n| borderMode | `'full' \\| 'half' \\| 'none'` | - | 输入框边框模式 |\n| placeholder | `string` | `'暂无数据'` | 输入框占位符 |\n| className | `string` | - | 控件外层 CSS 样式类名 |\n| variableClassName | `string` | - | 变量面板 CSS 样式类名 |\n| functionClassName | `string` | - | 函数面板 CSS 样式类名 |\n","path":"/zh-CN/components/form/input-formula"},{"title":"Input-Group 输入框组合","body":"\n**输入框组合选择器** 可用于输入框与其他组件进行组合。\n\n## 基本用法\n\n\n\n## 校验\n\ninput-group 配置校验方法较为特殊，需要配置下面步骤：\n\n1. input-group 上配置任意`name`值\n2. input-group 的 body 内配置的表单项上配置校验规则\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------------------------- | ------ | ---------- |\n| className | `string` | | CSS 类名 |\n| body | Array<> | | 表单项集合 |\n","path":"/zh-CN/components/form/input-group"},{"title":"InputImage 图片","body":"\n图片格式输入，需要实现接收器，提交时将以 url 的方式提交，如果需要以表单方式提交请使用 。\n\n## 基本用法\n\n\n\n默认情况下，选中文件后，就会自动调用 `receiver` 配置里的接口进行上传，比如 node 版本的示例如下：\n\n\n\n这个接口需要返回图片地址，比如下面的格式\n\n\n\n点击表单提交的时候，实际提交的就是这个返回的图片地址，比如上面的例子是 `image`，则会提交\n\n\n\n## 限制文件类型\n\n可以配置`accept`来限制可选择的文件类型，格式是文件后缀名`.xxx`\n\n\n\n想要限制多个类型，则用逗号分隔，例如：`.jpg,.png`\n\n## 限制文件大小\n\n配置 `limit`，更多属性请参考后面的属性说明。\n\n\n\n## 支持裁剪\n\n\n\n设置裁剪比例等配置，具体细节可以参考。\n\n\n\n默认情况下裁剪结果是 `png` 格式，如果要支持其它格式，请设置 `cropFormat`，比如下面设置为 `jpeg` 格式，同时设置质量为 `0.9`\n\n> 1.4.0 及以上版本\n\n\n\n如果浏览器支持，还能设置为 `image/webp`\n\n## 自动填充\n\n上传成功后，可以通过配置 `autoFill` 将上传接口返回的值填充到某个表单项中：\n\n\n\n上例中，image 组件上传后，接口返回格式例如如下：\n\n\n\n然后 image 上配置：\n\n\n\n这样上传成功后，会把接口中的 `url` 变量，赋值给 `myUrl` 变量，这个里支持表达式，比如在前面加上域名\n\n\n\n**多选模式**\n\n当表单项为多选模式时，不能再直接取选项中的值了，而是通过 `items` 变量来取，通过它可以获取当前选中的选项集合。\n\n\n\n**initAutoFill**\n\n当表单反显时，可通过`initAutoFill`控制`autoFill`在数据反显时是否执行。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | ------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| receiver | | | 上传文件接口 |\n| accept | `string` | `.jpeg,.jpg,.png,.gif` | 支持的图片类型格式，请配置此属性为图片后缀，例如`.jpg,.png` |\n| maxSize | `number` | | 默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`B` |\n| maxLength | `number` | | 默认没有限制，当设置后，一次只允许上传指定数量文件。 |\n| multiple | `boolean` | `false` | 是否多选。 |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| delimiter | `string` | `,` | |\n| autoUpload | `boolean` | `true` | 否选择完就自动开始上传 |\n| hideUploadButton | `boolean` | `false` | 隐藏上传按钮 |\n| fileField | `string` | `file` | 如果你不想自己存储，则可以忽略此属性。 |\n| crop | `boolean`或`{\"aspectRatio\":\"\"}` | | 用来设置是否支持裁剪。 |\n| crop.aspectRatio | `number` | | 裁剪比例。浮点型，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。。 |\n| crop.rotatable | `boolean` | `false` | 裁剪时是否可旋转 |\n| crop.scalable | `boolean` | `false` | 裁剪时是否可缩放 |\n| crop.viewMode | `number` | `1` | 裁剪时的查看模式，0 是无限制 |\n| cropFormat | `string` | `image/png` | 裁剪文件格式 |\n| cropQuality | `number` | `1` | 裁剪文件格式的质量，用于 jpeg/webp，取值在 0 和 1 之间 |\n| limit | Limit | | 限制图片大小，超出不让上传。 |\n| frameImage | `string` | | 默认占位图地址 |\n| fixedSize | `boolean` | | 是否开启固定尺寸,若开启，需同时设置 fixedSizeClassName |\n| fixedSizeClassName | `string` | | 开启固定尺寸时，根据此值控制展示尺寸。例如`h-30`,即图片框高为 h-30,AMIS 将自动缩放比率设置默认图所占位置的宽度，最终上传图片根据此尺寸对应缩放。 |\n| initAutoFill | `boolean` | `false` | 表单反显时是否执行 autoFill |\n\n### Limit 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------- |\n| width | `number` | | 限制图片宽度。 |\n| height | `number` | | 限制图片高度。 |\n| minWidth | `number` | | 限制图片最小宽度。 |\n| minHeight | `number` | | 限制图片最小高度。 |\n| maxWidth | `number` | | 限制图片最大宽度。 |\n| maxHeight | `number` | | 限制图片最大高度。 |\n| aspectRatio | `number` | | 限制图片宽高比，格式为浮点型数字，默认 `1` 即 `1:1`，如果要设置 `16:9` 请设置 `1.7777777777777777` 即 `16 / 9`。 如果不想限制比率，请设置空字符串。 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------ | -------------------- |\n| change | `file: Array` | 选中值发生变化时触发 |\n| remove | `file: FileValue` | 被移除的文件 |\n| success | `file: FileValue` | 上传成功的文件 |\n| fail | `file: FileValue` | 上传失败的文件 |\n\n### FileValue 属性表\n\n| 属性名 | 类型 | 说明 |\n| ------ | -------- | -------------------------------------------------- |\n| name | `string` | 图片名称 |\n| value | `string` | 上传成功后返回的 url |\n| state | `string` | 文件当前状态,值可为 `pending` `uploaded` `invalid` |\n| error | `string` | 错误信息 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------- | ---- |\n| clear | - | 清空 |\n","path":"/zh-CN/components/form/input-image"},{"title":"InputKV 键值对","body":"\n## 基本用法\n\n`input-kv` 是用来支持对象形式的数据编辑，比如类似这样的数据：\n\n\n\n`css` 中的 key 是不确定的，没法用 combo 来实现，这时可以使用 `input-kv`\n\n\n\n最终发送的数据将会是\n\n## 自定义 value 的格式\n\nkey 只能是字符串，因此输入格式是 `input-text`，但 value 格式可通过 `valueType` 自定义。\n\n\n\n## 自定义 value 的默认值\n\n通过 `defaultValue` 设置默认值\n\n\n\n## 关闭可拖拽排序\n\n\n\n## 自定义提示信息\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------- | -------------- | ------------------ |\n| valueType | `type` | `\"input-text\"` | 值类型 |\n| keyPlaceholder | `string` | | key 的提示信息的 |\n| valuePlaceholder | `string` | | value 的提示信息的 |\n| draggable | `boolean` | true | 是否可拖拽排序 |\n| defaultValue | | `''` | 默认值 |\n","path":"/zh-CN/components/form/input-kv"},{"title":"InputMonthRange 月份范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | ------------------ | ---------------------------------------------------------------------------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-DD` | |\n| placeholder | `string` | `\"请选择月份范围\"` | 占位文本 |\n| minDate | `string` | | 限制最小日期，用法同 |\n| maxDate | `string` | | 限制最大日期，用法同 |\n| minDuration | `string` | | 限制最小跨度，如： 2days |\n| maxDuration | `string` | | 限制最大跨度，如：1year |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |","path":"/zh-CN/components/form/input-month-range"},{"title":"InputMonth 月份","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中月份，可以看到默认显示月份的格式是像`01`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`01月`这样的格式，查找 moment 文档可知配置格式应为 `MM月`，即：\n\n\n\n调整月份，观察显示格式\n\n## 值格式\n\n选中任意月份，可以看到默认表单项的值格式是像`1582992000`这样的时间戳格式。\n\n\n\n如果你想要其他格式的月份值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`01`这样的格式，查找 moment 文档可知配置格式应为 `MM`，即：\n\n\n\n调整月份，观察数据域中表单项值的变化\n\n## 默认值\n\n可以设置`value`属性，设置月份选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1month\"`，默认就会选中一个月后。\n\n支持的相对值关键字有：\n\n- `now`: 当前时间\n- `hour`或`hours`: 时\n- `minute`或`minutes`: 分\n- `second`或`seconds`: 秒\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | -------------- | ----------------------------------------------------------------------------------- |\n| value | `string` | | |\n| format | `string` | `X` | 月份选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `YYYY-MM` | 月份选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| placeholder | `string` | `\"请选择月份\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |","path":"/zh-CN/components/form/input-month"},{"title":"InputNumber 数字输入框","body":"\n## 基本用法\n\n\n\n## 前后缀、千分分隔\n\n\n\n## 带单位数字\n\n> 1.4.0 及以上版本\n\n可以通过 `unitOptions` 设置数字的单位选项，和前面的前后缀不同，它的输出结果也将会是字符串，包含单位，默认取选项的第一个。\n\n\n\n## 原生数字组件\n\n原生数字组件将直接使用浏览器的实现，最终展现效果和浏览器有关，而且只支持 `min`、`max`、`step` 这几个属性设置。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------------------------------- | ------ | -------------------- |\n| min | | | 最小值 |\n| max | | | 最大值 |\n| step | `number` | | 步长 |\n| precision | `number` | | 精度，即小数点后几位 |\n| showSteps | `boolean` | | 是否显示上下点击按钮 |\n| prefix | `string` | | 前缀 |\n| suffix | `string` | | 后缀 |\n| kilobitSeparator | `boolean` | | 千分分隔 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| ------ | -------------------- | ------------------ |\n| change | `value: number` 值变化 | 输入值发生变化时触发 |\n| blur | - | - |\n| focus | - | - |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ----- | ---- |\n| clear | - | 清空 |\n","path":"/zh-CN/components/form/input-number"},{"title":"InputPassword 密码输框","body":"\n## 基本用法\n\n\n\n## 属性表\n\n请参考\n","path":"/zh-CN/components/form/input-password"},{"title":"InputQuarterRange 季度范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | ------------------ | ---------------------------------------------------------------------------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY-DD` | |\n| placeholder | `string` | `\"请选择季度范围\"` | 占位文本 |\n| minDate | `string` | | 限制最小日期，用法同 |\n| maxDate | `string` | | 限制最大日期，用法同 |\n| minDuration | `string` | | 限制最小跨度，如： 2quarter |\n| maxDuration | `string` | | 限制最大跨度，如：4quarter |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |","path":"/zh-CN/components/form/input-quarter-range"},{"title":"InputQuarter 季度","body":"\n## 基本用法\n\n\n\n更多用法和配置可以参考 ，quarter 就是 date 的特定配置，所以 date 的所有配置都能使用。\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |","path":"/zh-CN/components/form/input-quarter"},{"title":"InputRange 滑块","body":"\n可以用于选择单个数值或数值范围。\n\n## 基本用法\n\n默认是单个数值，结果是个整数。\n\n\n\n## 选择范围\n\n对于范围的渲染，结果将是个字符串，两个数值通过分隔符来隔开。\n\n\n\n## 控制调整的粒度\n\n使用 `step` 可以控制调整粒度，默认是 1。\n\n\n\n## 禁用\n\n使用`disabled`禁用滑块。\n\n\n\n## 显示步长\n\n开启`showSteps`可显示每个`step`长度\n\n\n\n## 分割块数\n\n通过`parts`可对整个滑动条平均分为`parts`块。\n\n\n\n## 刻度标记\n\n通过`marks`可对刻度进行自定义。\n\n\n\n## 输入框\n\n通过开启`showInput`会展示输入框，输入框数据于滑块数据同步。\n\n\n\n\n\n## 清除输入\n\n在打开`showInput`输入框的前提下，开启`clearable`可对数据进行清除。\n\n\n\n## 显示标签\n\n标签默认在 hover 和拖拽过程中展示，通过`tooltipVisible`或者`tipFormatter`可指定标签是否展示。标签默认展示在滑块上方，通过`tooltipPlacement`可指定标签展示的位置。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ------------------------------------------------------------ | ------- | ------------------------------------------------------------ |\n| className | `string` | | css 类名 |\n| value | `number` or `string` or `{min: number, max: number}` or `[number, number]` | | |\n| min | `number` | `0` | 最小值 |\n| max | `number` | `100` | 最大值 |\n| disabled | `boolean` | `false` | 是否禁用 |\n| step | `number` | `1` | 步长 |\n| showSteps | `boolean` | `false` | 是否显示步长 |\n| parts | `number` or `number[]` | `1` | 分割的块数
主持数组传入分块的节点 |\n| marks | { [number | string]: ReactNode } or { [number | string]: { style: CSSProperties, label: ReactNode } } | | 刻度标记
- 支持自定义样式
- 设置百分比 |\n| tooltipVisible | `boolean` | `false` | 是否显示滑块标签 |\n| tooltipPlacement | `auto` or `bottom` or `left` or `right` | `top` | 滑块标签的位置，默认`auto`，方向自适应
前置条件：tooltipVisible 不为 false 时有效 |\n| tipFormatter | `function` | | 控制滑块标签显隐函数
前置条件：tooltipVisible 不为 false 时有效 |\n| multiple | `boolean` | `false` | 支持选择范围 |\n| joinValues | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交
前置条件：开启`multiple`时有效 |\n| delimiter | `string` | `,` | 分隔符 |\n| unit | `string` | | 单位 |\n| clearable | `boolean` | `false` | 是否可清除
前置条件：开启`showInput`时有效 |\n| showInput | `boolean` | `false` | 是否显示输入框 |\n| onChange | `function` | | 当 组件 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 |\n| onAfterChange | `function` | | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 |\n\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|--------------- |------------------------|----------------------|\n| change | value: `number` or `string` or`{min: number, max: number}` 滑块当前值 | 当值变化时触发的事件 |\n| blur | - | 输入框失去焦点
前置条件：showInput为true |\n| focus | - | 输入框获取焦点
前置条件：showInput为true |\n\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|----------------|-------------------------|---------------------|\n| clear | - | 清除输入框
前置条件：showInput 和 clearable 都为 true |\n| reset | - | 重置到最小值 |\n\n\n","path":"/zh-CN/components/form/input-range"},{"title":"InputRating 评分","body":"\n## 基本用法\n\n默认颜色\n\n\n\n自定义颜色。支持各种颜色形式，如 CSS 预定义颜色，十六进制颜色，RGB 颜色，HSL 颜色。\n\n\n\n## 半星\n\n\n\n## 带有文字\n\n\n\n## 自定义字符\n\n\n\n## 只读\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ------------------- | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |\n| value | `number` | - | 当前值 |\n| half | `boolean` | `false` | 是否使用半星选择 |\n| count | `number` | `5` | 总星数 |\n| readOnly | `boolean` | `false` | 只读 |\n| allowClear | `boolean` | `true` | 是否允许再次点击后清除 |\n| colors | `string` / `object` | `{'2': '#abadb1', '3': '#787b81', '5': '#ffa900' }` | 星星被选中的颜色。 若传入字符串，则只有一种颜色。若传入对象，可自定义分段，键名为分段的界限值，键值为对应的类名 |\n| inactiveColor | `string` | `#e7e7e8` | 未被选中的星星的颜色 |\n| texts | `object` | - | 星星被选中时的提示文字。可自定义分段，键名为分段的界限值，键值为对应的类名 |\n| textPosition | `right` / `left` | `right` | 文字的位置 |\n| char | `string` | `★` | 自定义字符 |\n| className | `string` | - | 自定义样式类名 |\n| charClassName | `string` | - | 自定义字符类名 |\n| textClassName | `string` | - | 自定义文字类名 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|----------------|------------------------|----------------------|\n| change | `value: number` 评分值 | 数值变化 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|----------------|------------------------------|--------------------|\n| clear | - | 清空 |\n| reset | `resetValue: number` 重置值 | 重置 |","path":"/zh-CN/components/form/input-rating"},{"title":"InputRepeat 重复频率选择器","body":"\n## 基本用法\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ----------------------------- | ------------------------------------------------------------------------ |\n| options | `string` | `hourly,daily,weekly,monthly` | 可用配置 `secondly,minutely,hourly,daily,weekdays,weekly,monthly,yearly` |\n| placeholder | `string` | `不重复` | 当不指定值时的说明。 |\n","path":"/zh-CN/components/form/input-repeat"},{"title":"InputRichText 富文本编辑器","body":"\n目前富文本编辑器基于两个库：，默认使用 tinymce。\n\n## 基本用法\n\n\n\n## 图片上传\n\n通过设置 `receiver` 来支持文件上传，如果是 tinymce，它会将图片放在 `file` 字段中\n\n> 1.6.1 及以上版本可以通过 fileField 字段修改\n\n它的返回值类似如下：\n\n\n\n也可以是\n\n\n\n下面是个示例，但不会真正上传，每次都返回同一张图片\n\n\n\n## tinymce 自定义配置\n\n可以设置 options 属性来自定义编辑器的展现，详细配置项请参考。\n\n注意在下面的编辑器里修改 JSON 配置后不会实时生效。\n\n\n\n## 关于 tinymce 粘贴 word 的问题\n\n因为 amis 中使用的是开源版本 tinymce，没有商业版本功能，导致比如从 Word 中粘贴表格会看不到边框，解决方法是自己\n\n\n\n比如下面的示例\n\n\n\n但最终页面渲染的时候，这个 class 没有了，得改成 table\n\n\n\n## 使用 froala 编辑器\n\n只需要加一行 `\"vendor\": \"froala\"` 配置就行，froala 是付费产品，需要设置 才能去掉水印。\n\n\n\n### froala buttons 配置项\n\nfroala 可以通过设置 buttons 参数来控制显示哪些按钮，默认是这些：\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| saveAsUbb | `boolean` | | 是否保存为 ubb 格式 |\n| receiver | | | 默认的图片保存 API |\n| videoReceiver | | | 默认的视频保存 API |\n| fileField | string | | 上传文件时的字段名 |\n| size | `string` | | 框的大小，可设置为 `md` 或者 `lg` |\n| options | `object` | | 需要参考 的文档 |\n| buttons | `Array` | | froala 专用，配置显示的按钮，tinymce 可以通过前面的 options 设置 字符串 |\n","path":"/zh-CN/components/form/input-rich-text"},{"title":"InputSubForm 子表单","body":"\n## 基本用法\n\n\n\n## 多选模式\n\n可以配置`\"multiple\": true`，实现多选模式\n\n\n\n## 设置按钮名称\n\n\n\n## 支持拖拽\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | --------------- | -------- | ------------------------------------------------------ |\n| multiple | `boolean` | `false` | 是否为多选模式 |\n| labelField | `string` | | 当值中存在这个字段，则按钮名称将使用此字段的值来展示。 |\n| btnLabel | `string` | `\"设置\"` | 按钮默认名称 |\n| minLength | `number` | `0` | 限制最小个数。 |\n| maxLength | `number` | `0` | 限制最大个数。 |\n| draggable | `boolean` | | 是否可拖拽排序 |\n| addable | `boolean` | | 是否可新增 |\n| removable | `boolean` | | 是否可删除 |\n| addButtonClassName | `string` | `` | 新增按钮 CSS 类名 |\n| itemClassName | `string` | `` | 值元素 CSS 类名 |\n| itemsClassName | `string` | `` | 值包裹元素 CSS 类名 |\n| form | |\n| addButtonText | `string` | `` | 自定义新增一项的文本 |\n| showErrorMsg | `boolean` | `true` | 是否在左下角显示报错信息 |\n","path":"/zh-CN/components/form/input-sub-form"},{"title":"InputTable 表格","body":"\n## 基本用法\n\n可以用来展示数组类型的数据。配置`columns` 数组，来定义列信息。\n\n\n\n我们为表单数据域设置了`table`变量，配置`table`表单项可以展示该数据\n\n## 显示序号\n\n\n\n## 可新增行\n\n可以配置`addable`和`editable`指定可以新增且编辑行数据\n\n\n\n## 可复制新增行\n\n> 1.4.0 及以上版本\n\n还能通过 `copyable` 来增加一个复制按钮来复制当前行\n\n\n\n## 配置按钮为文字\n\n可以通过对应的 `BtnLabel` 及 `BtnIcon` 来改成显示文字而不是图标\n\n\n\n## 按钮触发新增行\n\n按钮上配置`\"actionType\": \"add\"`和`target`指定表格`name`，可以实现点击按钮添加一行的效果。\n\n\n\n当表格上配置了`addApi`时，会请求该 `api`，并将返回数据添加到目标表格。\n\n## 可编辑内容\n\n> 这是 1.2.3 新增的合并写法，1.2.2 之前请用后面提到的 quickEdit\n\n每一列的都可以通过 type 来将其改造成可编辑的列，比如下面的例子（建议配合 `\"needConfirm\": false` 来改成非确认模式）\n\n\n\n除了上面的例子，还可以在列上配置`quickEdit`实现编辑配置，实现展现和编辑分离，更多配置参考 \n\n\n\n## 显示分页\n\n\n\n## 可拖拽\n\n配置`\"draggable\": true`，实现可拖拽调整顺序\n\n\n\n## 非确认模式\n\n配置`\"needConfirm\": false`，不需要确认，那么就是一直就是处于编辑形态。\n\n\n\n## 获取父级数据\n\n默认情况下，Table 内表达项无法获取父级数据域的数据，如下，我们添加 Table 表单项时，尽管 Table 内的文本框的`name`与父级数据域中的`super_text`变量同名，但是没有自动映射值。\n\n\n\n可以配置`\"canAccessSuperData\": true` 同时配置 `\"strictMode\": false` 开启此特性，如下，配置了该配置项后，添加 Table 的`text`表单项会初始会自动映射父级数据域的同名变量。需要注意的是，这里只会初始会映射，一旦修改过就是当前行数据为主了。也就是说，表单项类型的，只会起到初始值的作用。如果为非表单项则会同步更新，比如这个例子的第二列。同时非表单项字段可以用在表单项字段中做联动。\n\n\n\n## 高亮行\n\n> 1.8.0 及以上版本\n\n通过 `rowClassNameExpr` 来添加类，比如下面的例子中，如果输入的内容是 `a` 则背景色为绿色`\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------------- | ------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"table\"` | 指定为 Table 渲染器 |\n| addable | `boolean` | `false` | 是否可增加一行 |\n| editable | `boolean` | `false` | 是否可编辑 |\n| removable | `boolean` | `false` | 是否可删除 |\n| showAddBtn | `boolean` | `true` | 是否显示添加按钮 |\n| addApi | | - | 新增时提交的 API |\n| updateApi | | - | 修改时提交的 API |\n| deleteApi | | - | 删除时提交的 API |\n| addBtnLabel | `string` | | 增加按钮名称 |\n| addBtnIcon | `string` | `\"plus\"` | 增加按钮图标 |\n| copyBtnLabel | `string` | | 复制按钮文字 |\n| copyBtnIcon | `string` | `\"copy\"` | 复制按钮图标 |\n| editBtnLabel | `string` | `\"\"` | 编辑按钮名称 |\n| editBtnIcon | `string` | `\"pencil\"` | 编辑按钮图标 |\n| deleteBtnLabel | `string` | `\"\"` | 删除按钮名称 |\n| deleteBtnIcon | `string` | `\"minus\"` | 删除按钮图标 |\n| confirmBtnLabel | `string` | `\"\"` | 确认编辑按钮名称 |\n| confirmBtnIcon | `string` | `\"check\"` | 确认编辑按钮图标 |\n| cancelBtnLabel | `string` | `\"\"` | 取消编辑按钮名称 |\n| cancelBtnIcon | `string` | `\"times\"` | 取消编辑按钮图标 |\n| needConfirm | `boolean` | `true` | 是否需要确认操作，，可用来控控制表格的操作交互 |\n| canAccessSuperData | `boolean` | `false` | 是否可以访问父级数据，也就是表单中的同级数据，通常需要跟 strictMode 搭配使用 |\n| strictMode | `boolean` | `true` | 为了性能，默认其他表单项项值变化不会让当前表格更新，有时候为了同步获取其他表单项字段，需要开启这个。 |\n| columns | `array` | [] | 列信息 |\n| columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 |\n| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |\n","path":"/zh-CN/components/form/input-table"},{"title":"InputTag 标签选择器","body":"\n## 基本使用\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |\n| options | `Array`或`Array` | | |\n| optionsTip | `Array`或`Array` | `\"最近您使用的标签\"` | 选项提示 |\n| source | `string`或 |\n| delimiter | `string` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| clearable | `boolean` | `false` | 在有值的时候是否显示一个删除图标在右侧。 |\n| resetValue | `string` | `\"\"` | 删除后设置此配置项给定的值。 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| change | `value: string \\| Option[]` 选中值 | 选中值发生变化时触发 |\n| blur | `(event: Event)` 原始事件 | 失去焦点时触发 |\n| focus | `(event: Event)` 原始事件 | 获得焦点时触发 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| clear | - | 清空 |\n| reset | `resetValue: boolean` 重置值 | 重置 |\n","path":"/zh-CN/components/form/input-tag"},{"title":"InputText 输入框","body":"\n## 基本使用\n\n\n\n## 不同类型\n\n配置`type`可以支持不同格式的文本输入框\n\n\n\n## 附加组件\n\n可以配置`addOn`，附带附加组件，比如 button，还能设置 icon。\n\n\n\n## 可清除\n\n通过 `\"clearable\": true` 可以设置文本可清除\n\n\n\n## 选择器模式\n\n配置`options`即可支持选择器模式。\n\n\n\n选择器模式下，支持部分选择器组件支持的配置项，具体请查看下面的属性表。如：source 和 autoComplete 都支持\n\n## 限制只能选择预设\n\n配置 options 并且配置 creatable: false\n\n\n\n## 多选模式\n\n配置 multiple: true\n\n\n\n## 前缀和后缀\n\n\n\n支持数据映射\n\n## 显示计数器\n\n\n\n## 自动转换值\n\n可以配置 transform，来自动转换值，支持转小写或大写。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array`或`Array` | | |\n| source | `string`或 |\n| autoComplete | `string`或 |\n| multiple | `boolean` | | |\n| delimiter | `string` | `,` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| addOn | `addOn` | | 输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。 |\n| addOn.type | `string` | | 请选择 `text` 、`button` 或者 `submit`。 |\n| addOn.label | `string` | | 文字说明 |\n| addOn.position | `'left' \\| 'right'` | `'right'` | addOn 位置 |\n| addOn.xxx | `string` | | 其他参数请参考按钮文档 |\n| trimContents | `boolean` | | 是否去除首尾空白文本。 |\n| creatable | `boolean` | | 是否可以创建，默认为可以，除非设置为 false 即只能选择选项中的值 |\n| clearable | `boolean` | | 是否可清除 |\n| resetValue | `string` | `\"\"` | 清除后设置此配置项给定的值。 |\n| prefix | `string` | `\"\"` | 前缀 |\n| suffix | `string` | `\"\"` | 后缀 |\n| showCounter | `boolean` | | 是否显示计数器 |\n| minLength | `number` | | 限制最小字数 |\n| maxLength | `number` | | 限制最大字数 |\n| transform | `object` | | 自动转换值，可选 `transform: { lowerCase: true, upperCase: true }` |\n","path":"/zh-CN/components/form/input-text"},{"title":"InputTimeRange 时间范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 显示秒\n\n默认显示的是时和分，要显示秒请参考以下配置\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | ------------------ | --------------------------------------------------------------------- |\n| timeFormat | `string` | `HH:mm` | |\n| format | `string` | `HH:mm` | |\n| inputFormat | `string` | `HH:mm` | |\n| placeholder | `string` | `\"请选择时间范围\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | | 值重置 |","path":"/zh-CN/components/form/input-time-range"},{"title":"InputTime 时间","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中任意时间，可以看到默认显示时间的格式是像`01:01`这样的格式，如果你想要自定义显示格式，那么可以配置`inputFormat`。\n\n例如你想显示`01时01分`这样的格式，查找 moment 文档可知配置格式应为 `HH时mm分`，即：\n\n\n\n调整时间，观察显示格式\n\n## 值格式\n\n选中任意时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。\n\n\n\n如果你想要其他格式的日期值，那么可以配置`format`参数用于调整表单项的值格式。\n\n例如你调整值为`01:11`这样的格式，查找 moment 文档可知配置格式应为 `HH:mm`，即：\n\n\n\n调整时间，观察数据域中表单项值的变化\n\n## 显示秒\n\n默认显示的是时和分，要显示秒请参考以下配置\n\n\n\n## 默认值\n\n可以设置`value`属性，设置日期选择器的默认值\n\n### 基本配置\n\n配置符合当前 的默认值。\n\n\n\n### 相对值\n\n`value` 还支持类似像`\"+1hours\"`这样的相对值，更加便捷的配置默认值\n\n\n\n上例中配置了`\"value\": \"+1hours\"`，默认就会选中一小时后。\n\n支持的相对值关键字有：\n\n- `now`: 当前时间\n- `hour`或`hours`: 时\n- `minute`或`minutes`: 分\n- `second`或`seconds`: 秒\n\n## 控制输入范围\n\n通过 `timeConstraints` 属性可以控制输入范围\n\n默认值是\n\n\n\n可以只修改其中的部分值，比如下面的示例将分钟每次加减改成了 15，小时的范围限制在 9 到 17\n\n\n\n## 原生时间组件\n\n原生时间组件将直接使用浏览器的实现，最终展现效果和浏览器有关，而且只支持 `min`、`max`、`step` 这几个属性设置。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | -------------- | ----------------------------------------------------------------------------------- |\n| value | `string` | | |\n| timeFormat | `string` | `HH:mm` | 时间选择器值格式，更多格式类型请参考 |\n| format | `string` | `X` | 时间选择器值格式，更多格式类型请参考 |\n| inputFormat | `string` | `HH:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 |\n| placeholder | `string` | `\"请选择时间\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| timeConstraints | `object` | `true` | |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | | 值重置 |\n","path":"/zh-CN/components/form/input-time"},{"title":"InputTree 树形选择框","body":"\n## 基本使用\n\n配置的`options`中，可以通过`children`字段进行嵌套展示，实现树形选择器\n\n\n\n## 选择器样式\n\n配置`\"type\": \"tree-select\"`可以实现选择器样式\n\n\n\n## 是否显示展开线\n\n> 1.1.6 版本\n\n通过 `showOutline` 来控制是否显示展开线。\n\n\n\n## 选中父节点是否自动选中子节点\n\n默认选中父节点会自动选中子节点，可以设置`\"cascade\": true`，不自动选中子节点\n\n\n\n## 选中父节点，值是否包含子节点\n\n默认选中父节点，是不会带上子节点的值，想要自动带上子节点的值，那么配置`\"withChildren\": true`\n\n\n\n也可以设置`onlyChildren`，实现只包含子节点的值\n\n\n\n## 默认展开\n\n默认是展开所有子节点的，如果不想默认展开，则配置`\"initiallyOpen\": false`\n\n\n\n如果层级较多，也可以配置`unfoldedLevel`指定展开的层级数。\n\n下例中设置`\"unfoldedLevel\": 1`，默认展开第 1 层\n\n\n\n## 可编辑\n\n配置 `creatable`、`removable` 和 `editable` 可以实现树可编辑。\n\n\n\n## 控制哪些项可编辑\n\n配置 `creatable`、`removable` 和 `editable` 可以实现树可编辑，同时如果需要关闭部分节点的编辑权限，可以在节点上配置`creatable`、`removable` 和 `editable`。\n\n`rootCreatable` 可以用来关闭顶层是否可以创建。如果想要控制顶层可编辑，请配置 `hideRoot`，用节点来控制。\n\n\n\n## 控制添加/编辑的表单\n\n配置 `addControls` 可以控制添加时需要填写哪些信息，同样还有 `editControls` 来配置编辑节点的表单\n\n\n\n## 懒加载\n\n> since 1.1.6\n\n需要懒加载的选项请配置 `defer` 为 true，然后配置 `deferApi` 即可完成懒加载。如果不配置 `deferApi` 会使用 `source` 接口。\n`deferApi` 中可以用到当前选项中的任何字段，比如以下这个例子是把 label 传给了 defer 接口\n\n\n\n## 节点路径模式\n\n> since 1.2.4\n\n配置`enableNodePath: true`后, 可以将`value`格式转换成节点路径模式，`pathSeparator`设置路径分隔符，建议将该属性的值和拼接符`delimiter`区分开。节点路径模式下，`value`中所有节点的父节点都会自动加载数据并回显。不同配置属性的节点路径模式`value`如下:\n\n\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------- | -------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------- |\n| options | `Array`或`Array` | | |\n| source | `string`或 |\n| autoComplete | |\n| multiple | `boolean` | `false` | 是否多选 |\n| delimiter | `string` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| iconField | `string` | `\"icon\"` | 图标值字段 |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| creatable | `boolean` | `false` | |\n| addControls | Array< |\n| addApi | |\n| editable | `boolean` | `false` | |\n| editControls | Array< |\n| editApi | |\n| removable | `boolean` | `false` | |\n| deleteApi | |\n| searchable | `boolean` | `false` | 是否可检索，仅在 type 为 `tree-select` 的时候生效 |\n| hideRoot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` |\n| rootLabel | `boolean` | `\"顶级\"` | 当 `hideRoot` 不为 `false` 时有用，用来设置顶级节点的文字。 |\n| showIcon | `boolean` | `true` | 是否显示图标 |\n| showRadio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 |\n| initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 |\n| unfoldedLevel | `number` | `0` | 设置默认展开的级数，只有`initiallyOpen`不是`true`时生效。 |\n| cascade | `boolean` | `false` | 当选中父节点时不自动选择子节点。 |\n| withChildren | `boolean` | `false` | 选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 |\n| onlyChildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 |\n| rootCreatable | `boolean` | `false` | 是否可以创建顶级节点 |\n| rootCreateTip | `string` | `\"添加一级节点\"` | 创建顶级节点的悬浮提示 |\n| minLength | `number` | | 最少选中的节点数 |\n| maxLength | `number` | | 最多选中的节点数 |\n| treeContainerClassName | `string` | | tree 最外层容器类名 |\n| enableNodePath | `boolean` | `false` | 是否开启节点路径模式 |\n| pathSeparator | `string` | `/` | 节点路径的分隔符，`enableNodePath`为`true`时生效 |\n","path":"/zh-CN/components/form/input-tree"},{"title":"InputYearRange 年份范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | ------------------ | ---------------------------------------------------------------------------- |\n| format | `string` | `X` | |\n| inputFormat | `string` | `YYYY` | |\n| placeholder | `string` | `\"请选择年份范围\"` | 占位文本 |\n| minDate | `string` | | 限制最小日期，用法同 |\n| maxDate | `string` | | 限制最大日期，用法同 |\n| minDuration | `string` | | 限制最小跨度，如： 2year |\n| maxDuration | `string` | | 限制最大跨度，如：4year |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |","path":"/zh-CN/components/form/input-year-range"},{"title":"Year 年份选择","body":"\n## 基本用法\n\n\n\n更多用法和配置可以参考 ，year 就是 data 的特定配置，所以 data 的所有配置都能使用。\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n|-------------------|------------------------------------------------|----------------------|\n| change | `value: string` 时间值 | 值变化 |\n| focus | - | 获得焦点(非内嵌模式) |\n| blur | - | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n|-------------------|-------------------------|------------------------|\n| clear | - | 清空 |\n| reset | - | 值重置 |\n","path":"/zh-CN/components/form/input-year"},{"title":"ListSelect 列表","body":"\nListSelect 一般用来实现选择，可以单选也可以多选，和 Radio/Checkboxs 最大的不同是在展现方面支持带图片。\n\n## 基本用法\n\n\n\n## 选项带图片\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array`或`Array` | | |\n| source | `string`或 |\n| multiple | `boolean` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n| listClassName | `string` | | 支持配置 list div 的 css 类名。比如: `flex justify-between` |\n","path":"/zh-CN/components/form/list-select"},{"title":"LocationPicker 地理位置","body":"\n用于选择地理位置\n\n## 基本用法\n\n\n\n注意其中的 `ak` 参数只能在 amis 官网示例中使用，请前往申请自己的 `ak`。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ------------ | ------------------------------ |\n| vendor | 'baidu' | 'baidu' | 地图厂商，目前只实现了百度地图 |\n| ak | `string` | 无 | 百度地图的 ak |\n| clearable | `boolean` | false | 输入框是否可清空 |\n| placeholder | `string` | '请选择位置' | 默认提示 |\n| coordinatesType | `string` | 'bd09' | 默为百度坐标，可设置为'gcj02' |\n","path":"/zh-CN/components/form/location-picker"},{"title":"MatrixCheckboxes 矩阵","body":"\n矩阵类型的输入框。\n\n## 基本用法\n\n\n\n## 单选模式\n\n配置`\"multiple\": false`可以设置单选，配置`singleSelectMode`可以设置单选模式\n\n\n\n## 动态选项\n\n可以配置 source 渲染动态选项\n\n\n\n以上面为例，source 接口返回格式如下：\n\n\n\n### column 模式\n\n默认为 column 模式，即每列只能单选某个单元格\n\n\n\n### cell 模式\n\ncell 模式，指全部选项中只能单选某个单元格\n\n\n\n### row 模式\n\nrow 模式，每行只能单选某个单元格\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ------------------------------ | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| columns | `Array` | | 列信息，数组中 `label` 字段是必须给出的 |\n| rows | `Array` | | 行信息， 数组中 `label` 字段是必须给出的 |\n| rowLabel | `string` | | 行标题说明 |\n| source | | | Api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 |\n| multiple | `boolean` | `true` | 是否多选 |\n| singleSelectMode | `string` | `\"column\"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| change | `value: Array` 选中值 | 选中值发生变化时触发 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| clear | - | 清空 |\n| reset | `resetValue: boolean` 重置值 | 重置 |\n","path":"/zh-CN/components/form/matrix-checkboxes"},{"title":"NestedSelect 级联选择器","body":"\n## 基本用法\n\n\n\n## 动态选项\n\n通过 source 可以从上下文或 api 中获取选项信息，比如\n\n\n\n也可以是 api 地址\n\n\n\n## 选中父节点是否自动选中子节点\n\n默认选中父节点会自动选中子节点，可以设置`\"cascade\": true`，不自动选中子节点\n\n\n\n## 选中父节点，值是否包含子节点\n\n默认选中父节点，是不会带上子节点的值，想要自动带上子节点的值，那么配置`\"withChildren\": true`\n\n\n\n也可以设置`onlyChildren`，实现只包含子节点的值\n\n\n\n## 仅展示选中节点文本信息\n\n设置`hideNodePathLabel: true`，可以隐藏选择框中已选择节点的祖先节点(ancestor)的`labelField`字段值，仅展示当前选中节点的`labelField`字段值。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | ----------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------- |\n| options | `Array`或`Array` | | |\n| source | `string`或 |\n| delimiter | `boolean` | `false` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n| cascade | `boolean` | `false` | 设置 `true`时，当选中父节点时不自动选择子节点。 |\n| withChildren | `boolean` | `false` | 设置 `true`时，选中父节点时，值里面将包含子节点的值，否则只会保留父节点的值。 |\n| onlyChildren | `boolean` | `false` | 多选时，选中父节点时，是否只将其子节点加入到值中。 |\n| searchable | `boolean` | `false` | 可否搜索 |\n| searchPromptText | `string` | `\"输入内容进行检索\"` | 搜索框占位文本 |\n| noResultsText | `string` | `\"未找到任何结果\"` | 无结果时的文本 |\n| multiple | `boolean` | `false` | 可否多选 |\n| hideNodePathLabel | `boolean` | `false` | 是否隐藏选择框中已选择节点的路径 label 信息 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| change | `value: string \\| Option[]` 选中值 | 选中值发生变化时触发 |\n| blur | `(event: Event)` 原始事件 | 失去焦点时触发 |\n| focus | `(event: Event)` 原始事件 | 获得焦点时触发 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| clear | - | 清空 |\n| reset | `resetValue: boolean` 重置值 | 重置 |\n","path":"/zh-CN/components/form/nestedselect"},{"title":"Options 选择器表单项","body":"\n**选择器表单项** 是指那些（例如下拉选择框）具有选择器特性的表单项\n\n它派生自 ，拥有表单项所有的特性。\n\n## 选项组格式\n\n选择器表单项可以通过配置一组选项(`options`)，可以供给用户选择，如下：\n\n\n\n`options`属性配置的对象数组就是`select`选择器组件的选项组。\n\n### 标准格式\n\n\n\n标准的选项格式为对象数组，数组中的每个对象需要两个必备字段：\n\n- `label`：标识当前选项的显示文本，帮助用户选择\n- `value`：标识当前选项的值，用作数据保存和映射\n- `children`：嵌套子选项，只有在 Tree 或 Nested-Select 等支持嵌套功能的组件中才有用\n\n查看下面例子，修改选项你会发现数据域会发发生变化，改数据域中该表单项的值为选中选项的`value`值。\n\n\n\n### 简单格式\n\n也可以配置简单的字符串或数字数组，此时默认`label`和`value`保持一致\n\n\n\n## 静态选项组 options\n\n可以使用静态方式，配置一组选项组：\n\n\n\n## 动态选项组 source\n\n### 通过数据域中变量配置\n\n你也可以配置`source`属性，利用 ，获取当前数据链中的变量\n\n\n\n上例中，我们给 select 组件，配置`\"source\": \"${items}\"`，获取了当前数据域中的`items`变量作为选项组。\n\n### 远程拉取\n\n除了可以通过数据映射获取当前数据域中的变量以外，`source`还支持配置接口，格式为 ，用于动态返回选项组。\n\n\n\n远程拉取接口时，返回的数据结构除了需要满足 以外，必须用`\"options\"`作为选项组的`key`值，如下\n\n\n\n## 默认值/自动选中 value\n\n我们知道表单项可以通过配置`value`属性来设置默认值\n\n而选择器表单项如果设置`value`属性，为某一个选项中的`value`值，那么该选择器将自动选中该选项。\n\n### 静态配置\n\n静态配置同表单项默认值配置方式，直接在组件上配置`value`属性。\n\n\n\n上例我们设置默认值为`b`，则会自动匹配到选项`B`并选中。\n\n如果想默认选择第一个，可以直接配置 `selectFirst` 属性。\n\n\n\n### 动态配置\n\n有时候我们想默认选中一个选项，但是`options`又是远程拉取的，无法确定默认值是啥，这时候，**需要在`source`接口中返回`value`，来动态设置默认值**，**接口返回数据结构**如下：\n\n\n\n### 数据格式一致性问题\n\n当使用 `source` 或 `value` 配置默认值的时候，需要保持数据格式的一致性。\n\n如果使用 `source` 或 `value` 配置的默认值与当前表单项配置的数据格式不符合，而且用户没有再次操作该表单项，而直接提交表单，那么会将当前默认值原封不动的提交给后端，可能会导致不一致性的问题，我们看一个例子：\n\n\n\n上例中， `select` 我们配置了`\"multiple\": true`，预期中，我们希望选中 `A` 和 `C` 项时，表单项的数据格式为：`\"a,c\"`，但是我们设置了`\"value\": [\"a\", \"c\"]`，并不符合我们当前表单项的数据格式配置，这样会导致两个问题：\n\n1. 有可能不会默认选中 `A` 和 `C` 选项；\n2. 当不操作该表单项，直接提交时，预期是：`\"a,c\"`，但提交给后端的数据为：`[\"a\", \"c\"]`，导致了不一致性的问题。\n\n> 通过 `source` 配置默认值同理，不再赘述\n\n因此一定确保默认值与选择器表单项数据格式配置相匹配。\n\n## 多选 multiple\n\n大部分选择器组件默认是单选的，可以配置`\"multiple\": true`支持多选。\n\n\n\n默认多选的值格式为逗号拼接 value 值，例如：`1,2,3`，如果需要改变值格式，请阅读下面 配置项。\n\n## 拼接符 delimiter\n\n多选模式下，默认表单项值为选中的选项的`value`值，用默认拼接符`,`拼接，如下\n\n\n\n默认的拼接符是逗号`,`，但是当你的某个选项中的`value`值内包含`,`这个字符，这样会造成一些预期中的问题\n\n你可以设置`delimiter`属性，自定义拼接符，保证不与你选项中的`value`值冲突\n\n\n\n上例我们`value`中有逗号，与默认拼接符冲突，这时设置`\"delimiter\": \"|\"`，可以看到选择多个选项时，每个选项的`value`属性会用`|`拼接起来，作为表单项的值\n\n## 拼接值 joinValues\n\n当选择器表单项选中某一选项后，当前表单项的值格式默认：\n\n- 单选：选中选项的`value`值\n- 多选：选中所有选项的`value`，用拼接符进行拼接，默认拼接符为`,`\n\n选中下面两个选择器，观察数据域值变化。\n\n\n\n但是你可以通过配置`\"joinValues\": false`，来获取完整的选项对象\n\n### 单选模式\n\n单选模式下，配置`\"joinValues\": false`，该表单项值为选中选项的完整对象值，选中下例中的任意选项，观察数据域变化。\n\n\n\n### 多选模式\n\n多选模式下，配置`\"joinValues\": false`，该表单项值为所有选中项的对象数组\n\n\n\n### 自动选中问题\n\n当你通过`joinValues`调整选择器表单项的数据结构后，设置默认值时，格式也要和设置的数据结构保持一致\n\n例如下面这个例子，当你给`select`设置了`\"joinValues\": false`时，选中 B 选项，则该表单项值为`{\"label\":\"B\",\"value\":\"b\"}`，如果你想要默认选中某一项，则也需要设置`value`为完整的对象：`{\"label\":\"B\",\"value\":\"b\"}`\n\n\n\n## 提取多选值 extractValue\n\n当`\"joinValues\": false`时，默认会将选中的所有选项组成的对象数组，作为表单项的值，如果你想只抽取选项中的 value 值，拼成新的数组，那么可以配置`\"extractValue\": true`\n\n\n\n选中所有选型，你会看到表单项的值为：`[\"a\", \"b\", \"c\"]`。\n\n### 自动选中问题\n\n当你通过`joinValues`和`extractValue`调整选择器表单项的数据结构后，设置默认值时，格式也要和设置的数据结构保持一致\n\n例如下面这个例子，当你给`select`设置了`\"joinValues\": false`和`\"extractValue\": true`时，选中 A、B 选项，则该表单项值为`[\"a\", \"b\"]`，如果你想要默认选中某一项，则也需要设置`value`为同样格式：`[\"a\", \"b\"]`\n\n\n\n## 检索 searchable\n\n可以配置 `\"searchable\": true` 显示前端过滤，适合用于有大量内容的列表。\n\n\n\n## 自动补全 autoComplete\n\n\n\n可以在`autoComplete`配置中，用数据映射，获取变量`term`，为当前输入的关键字。\n\n支持该配置项的组件有：Text、Select、Chained-Select、TreeSelect、Condition-Builder。\n\n## 选项标签字段 labelField\n\n默认渲染选项组，会获取每一项中的`label`变量作为展示文本，如果你的选中项中没有`label`字段，可能会有显示问题\n\n例如下例中，options 中只有`text`和`value`字段而没有 `label` 字段，这时点开下拉框，你会发现选项无法正常显示。\n\n\n\n这种情况下如果你想自定义该字段，则可以设置`labelField`\n\n\n\n> 不推荐使用该方式，建议格式化好选项组数据结构\n\n## 选项值字段 valueField\n\n默认渲染选项组，会获取每一项中的`value`变量作为表单项值，如果你的选中项中没有`value`字段，将会无法选中\n\n例如下例中，options 中只有`label`和`val`字段而没有`value`字段，这时点开下拉框，你会发现选项无法正常选中。\n\n\n\n这种情况下如果你想自定义该字段，则可以设置`valueField`\n\n\n\n> 不推荐使用该方式，建议格式化好选项组数据结构\n\n## 新增选项\n\n部分选择器组件支持在前端进行新增选项的操作。\n\n支持该功能的组件有：CheckBoxes、Select、Tree\n\n### 前端新增 creatable\n\n，可以配置`\"creatable\": true`，支持在前端临时新增选项。\n\n\n\n点开下拉框，会看到选项列表底部有`新增选项`按钮，点击后会显示一个包含简单表单的弹框，点击提交可以新增选项，不同组件交互会有不同。\n\n新增选项表单弹框的默认配置如下：\n\n\n\n- 你可以配置`createBtnLabel`来自定义这个弹框的标题；\n- 你也可以配置`optionLabel`，来替换`\"选项\"`这个字符，如我们配置`\"optionLabel\": \"员工\"`，标题会显示：`新增员工`；\n- 默认表单项的`name`属性为`labelField`所配置的值，默认为`label`\n\n### 自定义新增表单项 addControls\n\n默认只有一个文本框，也就是意味着，默认添加选项后，该选项`label`和`value`是一样的，如果你想自定义该表单中的表单项，你可以通过配置`addControls`属性\n\n\n\n上例中你可以选项标题输入`D`，选项值输入`d`。实现自定义添加选项格式\n\n不过在没配置保存接口时，`addControls`中务必需要有`labelField`和`valueField`所配置的`name`表单项才可以正确保存\n\n> `addControls`属性格式为表单项数组，更多细节参考 。\n\n### 配置新增接口 addApi\n\n默认新增只会暂时把新增的值保存在前端，如果你想前端新增选项后，同时把该选项保存到后端，则可以配置保存接口`addApi`。\n\n\n\n> 配置`addApi`实际上将该配置值设置给该表单的`api`属性。\n>\n> 如果同时配置了`source`和`addApi`，添加选项成功后会重新获取请求`source`接口\n\n## 编辑选项\n\n部分选择器组件支持在前端编辑选项\n\n支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem\n\n### 前端编辑 editable\n\n配置`\"editable\": true`，支持在前端编辑选项。\n\n\n\n点开下拉框，会看到每个选项右侧有一个编辑图标，点击后会显示一个编辑选项的弹框，修改后点击提交可以编辑选项标签。不同组件交互会有不同\n\n编辑选项弹框的默认配置如下：\n\n\n\n- 你也可以配置`optionLabel`，来替换`\"选项\"`这个字符，如我们配置`\"optionLabel\": \"员工\"`，标题会显示：`新增员工`；\n- 默认表单项的`name`属性为`labelField`所配置的值，默认为`label`\n\n### 自定义编辑表单项 editControls\n\n默认只能修改当前选项的`label`属性，如果你想要修改其他属性，可以配置`editControls`，自定义编辑表单项\n\n\n\n修改后重新选中该表单项，观察数据域中数据变化。\n\n### 配置编辑接口 editApi\n\n默认编辑只会作用在前端，如果你想前端编辑选项后，同时把该选项保存到后端，则可以配置保存接口`editApi`。\n\n\n\n> 配置`editApi`实际上将该配置值设置给编辑表单的`api`属性。\n>\n> 如果同时配置了`source`和`editApi`，添加选项成功后会重新获取请求`source`接口\n\n## 删除选项\n\n部分选择器组件，支持在前端进行编辑选项操作\n\n支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem\n\n### 配置删除接口 deleteApi\n\n删除选项不支持在前端级别删除，我们认为是没有意义的，必须要配置`deleteApi`使用接口进行删除\n\n配置`\"removable\": true`和`deleteApi`，支持在前端删除选项。\n\n\n\n点开下拉框，鼠标悬浮在选项上，可以看到右侧会有删除图标，点击可请求删除接口进行删除\n\n## 自动填充 autoFill\n\n一些选择器组件，支持配置`autoFill`，将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，支持\n\n\n\n上例中我们配置了`\"autoFill\": {\"option.instantValidate\": \"${label}\"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name`为`option.instantValidate`的文本框中。可以额外配置`\"validateOnChange\": true`，实现自动填充后立即校验填充项。\n\n\n**多选模式**\n\n当表单项为多选模式时，不能再直接取选项中的值了，而是通过 `items` 变量来取，通过它可以获取当前选中的选项集合。\n\n\n\n支持该配置项的有：ButtonGroup、List、NestedSelect、Picker、Radios、Select。\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | --------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------- |\n| options | `Array`或`Array` | | 选项组，供用户选择 |\n| source | | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |\n| multiple | `boolean` | `false` | 是否支持多选 |\n| labelField | `boolean` | `\"label\"` | 标识选项中哪个字段是`label`值 |\n| valueField | `boolean` | `\"value\"` | 标识选项中哪个字段是`value`值 |\n| joinValues | `boolean` | `true` | 是否拼接`value`值 |\n| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |\n","path":"/zh-CN/components/form/options"},{"title":"Picker 列表选择器","body":"\n列表选取，在功能上和 Select 类似，但它能显示更复杂的信息。\n\n## 基本用法\n\n默认和 Select 很像，但请看后面的 pickerSchema 设置。\n\n\n\n## 配置 pickerSchema\n\n可以配置 pickerSchema，实现弹框 crud 选择模式，更多 crud 配置可查看 crud 文档，选择之后最终的值通过 `valueField` 来设置。\n\n\n\n## 内嵌模式\n\n可以配置`\"embed\": true`，实现内嵌 picker\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- |\n| options | `Array`或`Array` | | |\n| source | `string`或 |\n| multiple | `boolean` | | 是否为多选。 |\n| delimiter | `boolean` | `false` | |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| autoFill | `object` | | |\n| modalMode | `string` | `\"dialog\"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 |\n| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 |\n| embed | `boolean` | `false` | 是否使用内嵌模式 |\n","path":"/zh-CN/components/form/picker"},{"title":"Radios 单选框","body":"\n用于实现单选。\n\n## 基本用法\n\n\n\n## 列显示\n\n设置 `inline` 可以纵向显示，用于显示列很多的情况\n\n\n\n## 控制列显示的分裂\n\n通过 columnsCount 来设置列显示的列数，比如下面例子是两列。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array`或`Array` | | |\n| source | `string`或 |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |\n| inline | `boolean` | `true` | 是否显示为一行 |\n| autoFill | `object` | | |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| change | `value: string \\| Option` 选中值 | 选中值发生变化时触发 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| clear | - | 清空 |\n| reset | `resetValue: boolean` 重置值 | 重置 |\n","path":"/zh-CN/components/form/radios"},{"title":"Select 选择器","body":"\n## 基本用法\n\n参考 \n\n## 自定义菜单\n\n\n\n### 分组展示模式\n\n_单选_\n\n\n\n_多选_\n\n\n\n### 表格模式\n\n需要额外配置 `columns` 配置，参考 Table 中的说明。\n\n_单选_\n\n\n\n_多选_\n\n\n\n### 树形模式\n\n_单选_\n\n\n\n_多选_\n\n\n\n### 级联选择\n\n按列来点选。\n\n_单选_\n\n\n\n_多选_\n\n\n\n### 支持搜索\n\n\n\n### 延时加载\n\n选型设置 defer: true，结合配置组件层的 `deferApi` 来实现。\n\n\n\n### 关联选择模式\n\n分为左右两部分，左边点选后关联出现右边。左右都可以配置展示模式。\n\n_单选_\n\n\n\n_多选_\n\n\n\nleftOptions 动态加载，默认 source 接口是返回 options 部分，而 leftOptions 是没有对应的接口可以动态返回了。为了方便，目前如果 source 接口返回的选中中，第一个 option 是以下这种格式则也会把 options[0].leftOptions 当成 leftOptions, options[0].children 当 options。同时 options[0].leftDefaultValue 可以用来配置左侧选项的默认值。\n\n\n\n### 人员点选\n\n> 请通过网络面板查看接口请求返回。\n\n实际上就是采用的的 select，注意要看那一部分文档，需要知道怎么动态加载 leftOptions。左侧部分和人员都是通过 source 接口返回。需要懒加载的项通过设置 `defer` 为 true 来标记。左右两部分都支持懒加载。\n都是通过 deferApi 来实现，后端根据传过来的参数决定是懒加载树，还是栏加载人员。\n\n- 有 dep 值则是懒加载部门树\n- 有 ref 值则是懒加载人员\n\n\n\n## searchApi\n\n**发送**\n\n默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。\n\n**响应**\n\n格式要求如下：\n\n\n\n适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| options | `Array`或`Array` | | |\n| source | |\n| autoComplete | |\n| delimiter | `string` | `false` | |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| checkAll | `boolean` | `false` | 是否支持全选 |\n| checkAllLabel | `string` | `全选` | 全选的文字 |\n| checkAllBySearch | `boolean` | `false` | 有检索时只全选检索命中的项 |\n| defaultCheckAll | `boolean` | `false` | 默认是否全选 |\n| creatable | `boolean` | `false` | |\n| multiple | `boolean` | `false` | |\n| searchable | `boolean` | `false` | |\n| createBtnLabel | `string` | `\"新增选项\"` | |\n| addControls | Array< |\n| addApi | |\n| editable | `boolean` | `false` | |\n| editControls | Array< |\n| editApi | |\n| removable | `boolean` | `false` | |\n| deleteApi | |\n| autoFill | `object` | | |\n| menuTpl | `string` | | 支持配置自定义菜单 |\n| clearable | `boolean` | | 单选模式下是否支持清空 |\n| hideSelected | `boolean` | `false` | 隐藏已选选项 |\n| mobileClassName | `string` | | 移动端浮层类名 |\n| selectMode | `string` | `` | 可选：`group`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 |\n| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 |\n| columns | `Array` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |\n| leftOptions | `Array` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |\n| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |\n| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| change | `value: string \\| Option[]` 选中值 | 选中值发生变化时触发 |\n| blur | `(event: Event)` 原始事件 | 失去焦点时触发 |\n| focus | `(event: Event)` 原始事件 | 获得焦点时触发 |\n| add | - | 新增选项的时候触发 |\n| edit | `value: Option` 修改的选项 | 编辑选项时触发 |\n| delete | `value: Option` 删除的选项 | 删除选项时触发 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| clear | - | 清空 |\n| reset | `resetValue: boolean` 重置值 | 重置 |\n","path":"/zh-CN/components/form/select"},{"title":"Static 静态展示","body":"\n用来在表单中，展示静态数据\n\n## 基本用法\n\n\n\n## 数据域变量映射\n\n除了显式配置`value`属性，来展示数据以外，支持通过配置`name`属性，来自动映射数据域中的相关变量\n\n\n\n## 展示其他组件\n\n支持通过配置`type`为`static-xxx`的形式，展示其他 **非** 组件，例如：\n\n\n\n理论上可以支持所有非表达项的所有组件，并且支持对应的配置项，下面是一些示例：\n\n\n\n想要调整展示组件的配置，请查阅相应组件的文档。\n\n## 快速编辑\n\n通过 `quickEdit` 开启快速编辑功能，比如\n\n\n\n其他配置项参考 \n\n## 弹出框（popOver）\n\n可以通过 `popOver` 属性配置弹出框\n\n\n","path":"/zh-CN/components/form/static"},{"title":"Switch 开关","body":"\n## 基本用法\n\n\n\n## 配置真假值\n\n默认情况：\n\n- 开关打开时，表单项值为：true\n- 开关关闭时，表单项值为：false\n\n\n\n如果你想调整这个值，可以配置`trueValue`和`falseValue`\n\n\n\n调整开关，观察数据域变化，会发现打开后值为`1`，而关闭后为`0`\n\n## 配置开启和关闭状态的文本\n\n> 1.1.5 版本之后支持\n\n\n\n## 默认值\n\n和其它表单项一样，如果要设置默认值，可以使用 value 属性\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------------------------- | ------- | -------------------- |\n| option | `string` | | 选项说明 |\n| onText | `string / IconSchema` | | 开启时开关显示的内容 |\n| offText | `string / IconSchema` | | 关闭时开关显示的内容 |\n| trueValue | `boolean / string / number` | `true` | 标识真值 |\n| falseValue | `boolean / string / number` | `false` | 标识假值 |\n\nIconSchema 配置\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | --------- | ------------ |\n| type | `string` | | `icon` |\n| icon | `string` | | icon 的类型 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| ------ | --------------------------------- | ---------------- |\n| change | `value: string \\| boolean` 值变化 | 开关值发生变化时触发 |\n\n## 动作表\n\n暂无\n","path":"/zh-CN/components/form/switch"},{"title":"TabsTransferPicker 穿梭选择器","body":"\n在的基础上扩充了弹窗选择模式，展示值用的是简单的 input 框，但是编辑的操作是弹窗个穿梭框来完成。\n\n适合用来做复杂选人组件。\n\n```schema: scope=\"body\"\n{\n \"type\": \"form\",\n \"api\": \"/api/mock2/form/saveForm\",\n \"body\": [\n {\n \"label\": \"选人\",\n \"type\": \"tabs-transfer-picker\",\n \"name\": \"a\",\n \"sortable\": true,\n \"selectMode\": \"tree\",\n \"searchable\": true,\n \"pickerSize\": \"md\",\n \"menuTpl\": \"
${label}${email ? `
${email}
${phone}
`: ''}
\",\n \"valueTpl\": \"${label}(${value})\",\n \"options\": [\n {\n \"label\": \"成员\",\n \"selectMode\": \"tree\",\n \"children\": [\n {\n \"label\": \"法师\",\n \"children\": [\n {\n \"label\": \"诸葛亮\",\n \"value\": \"zhugeliang\",\n \"email\": \"zhugeliang@timi.com\",\n \"phone\": 13111111111\n }\n ]\n },\n {\n \"label\": \"战士\",\n \"children\": [\n {\n \"label\": \"曹操\",\n \"value\": \"caocao\",\n \"email\": \"caocao@timi.com\",\n \"phone\": 13111111111\n },\n {\n \"label\": \"钟无艳\",\n \"value\": \"zhongwuyan\",\n \"email\": \"zhongwuyan@timi.com\",\n \"phone\": 13111111111\n }\n ]\n },\n {\n \"label\": \"打野\",\n \"children\": [\n {\n \"label\": \"李白\",\n \"value\": \"libai\",\n \"email\": \"libai@timi.com\",\n \"phone\": 13111111111\n },\n {\n \"label\": \"韩信\",\n \"value\": \"hanxin\",\n \"email\": \"hanxin@timi.com\",\n \"phone\": 13111111111\n },\n {\n \"label\": \"云中君\",\n \"value\": \"yunzhongjun\",\n \"email\": \"yunzhongjun@timi.com\",\n \"phone\": 13111111111\n }\n ]\n }\n ]\n },\n {\n \"label\": \"角色\",\n \"selectMode\": \"list\",\n \"children\": [\n {\n \"label\": \"角色 1\",\n \"value\": \"role1\",\n },\n {\n \"label\": \"角色 2\",\n \"value\": \"role2\",\n },\n {\n \"label\": \"角色 3\",\n \"value\": \"role3\",\n },\n {\n \"label\": \"角色 4\",\n \"value\": \"role4\",\n }\n ]\n },\n {\n \"label\": \"部门\",\n \"selectMode\": \"tree\",\n \"children\": [\n {\n \"label\": \"总部\",\n \"value\": \"dep0\",\n \"children\": [\n {\n \"label\": \"部门 1\",\n \"value\": \"dep1\",\n \"children\": [\n {\n \"label\": \"部门 4\",\n \"value\": \"dep4\",\n },\n {\n \"label\": \"部门 5\",\n \"value\": \"dep5\",\n }\n ]\n },\n {\n \"label\": \"部门 2\",\n \"value\": \"dep2\",\n },\n {\n \"label\": \"部门 3\",\n \"value\": \"dep3\",\n }\n ]\n }\n ]\n }\n ]\n }\n ]\n}\n```\n\n## 属性表\n\n更多配置请参考。\n","path":"/zh-CN/components/form/tabs-transfer-picker"},{"title":"TabsTransfer 组合穿梭器","body":"\n在的基础上扩充了左边的展示形式，支持 Tabs 的形式展示。对应的 options 的顶级数据，顶层 options 的成员支持 selectMode 配置这个 tab 下面的选项怎么展示。title 可以配置 tab 的标题。\n\n\n\n## 自定义选项展示\n\n\n\n## 数据懒加载\n\n\n\n## 属性表\n\n更多配置请参考。\n","path":"/zh-CN/components/form/tabs-transfer"},{"title":"Textarea 多行文本输入框","body":"\n## 基本使用\n\n\n\n## 清空输入框\n\n带移除图标的输入框，点击图标删除所有内容。\n\n\n\n设置`resetValue`，清空输入框后重置为指定值\n\n\n\n## 显示计数器\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | --------- | ------- | ---------------------------- |\n| minRows | `number` | `3` | 最小行数 |\n| maxRows | `number` | `20` | 最大行数 |\n| trimContents | `boolean` | `true` | 是否去除首尾空白文本 |\n| readOnly | `boolean` | `false` | 是否只读 |\n| showCounter | `boolean` | `false` | 是否显示计数器 |\n| maxLength | `number` | - | 限制最大字数 |\n| clearable | `boolean` | `false` | 是否可清除 |\n| resetValue | `string` | `\"\"` | 清除后设置此配置项给定的值。 |\n","path":"/zh-CN/components/form/textarea"},{"title":"TransferPicker 穿梭选择器","body":"\n在的基础上扩充了弹窗选择模式，展示值用的是简单的 input 框，但是编辑的操作是弹窗个穿梭框来完成。\n\n\n\n## 自定义选项展示\n\n\n\n## 属性表\n\n更多配置请参考。\n","path":"/zh-CN/components/form/transfer-picker"},{"title":"Transfer 穿梭器","body":"\n## 基本用法\n\n\n\n## 展示模式\n\n### 分组\n\n\n\n### 表格模式\n\n\n\n### 树形模式\n\n\n\n### 级联选择\n\n\n\n### 支持搜索\n\n\n\n### 延时加载\n\n\n\n### 关联选择模式\n\n\n\nleftOptions 动态加载，默认 source 接口是返回 options 部分，而 leftOptions 是没有对应的接口可以动态返回了。为了方便，目前如果 source 接口返回的选中中，第一个 option 是以下这种格式则也会把 options[0].leftOptions 当成 leftOptions, options[0].children 当 options。同时 options[0].leftDefaultValue 可以用来配置左侧选项的默认值。\n\n\n\n## searchApi\n\n**发送**\n\n默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。\n\n**响应**\n\n格式要求如下：\n\n\n\n适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。\n\n## 自定义选项展示\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| options | `Array`或`Array` | | |\n| source | `string`或 |\n| delimiter | `string` | `false` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| searchable | `boolean` | `false` | 当设置为 `true` 时表示可以通过输入部分内容检索出选项。 |\n| searchApi | | | 如果想通过接口检索，可以设置个 api。 |\n| statistics | `boolean` | `true` | 是否显示统计数据 |\n| selectTitle | `string` | `\"请选择\"` | 左侧的标题文字 |\n| resultTitle | `string` | `\"当前选择\"` | 右侧结果的标题文字 |\n| sortable | `boolean` | `false` | 结果可以进行拖拽排序 |\n| selectMode | `string` | `list` | 可选：`list`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。 |\n| searchResultMode | `string` | | 如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。 |\n| columns | `Array` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |\n| leftOptions | `Array` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |\n| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |\n| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |\n| menuTpl | `string` \\| | | 用来自定义选项展示 |\n| valueTpl | `string` \\| | | 用来自定义值的展示 |\n","path":"/zh-CN/components/form/transfer"},{"title":"TreeSelect 树形选择器","body":"\n## 基本使用\n\n\n\n## 仅展示选中节点文本信息\n\n设置`hideNodePathLabel: true`，可以隐藏选择框中已选择节点的祖先节点（ancestor）的`labelField`字段值，仅展示当前选中节点的`labelField`字段值。\n\n\n\n## 如何让某些节点无法点？\n\n只需要对应的节点没有 value 就行，比如下面例子的目录节点都无法点，只能点文件节点\n\n\n\n## 属性表\n\n更多用法，见 \n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | --------- | ------- | ------------------------------------------- |\n| hideNodePathLabel | `boolean` | `false` | 是否隐藏选择框中已选择节点的路径 label 信息 |\n","path":"/zh-CN/components/form/treeselect"},{"title":"UUID 字段","body":"\n## 基本用法\n\n随机生成一个 id，可以用于防止表单重复提交。\n\n\n\n这个字段是不显示的，上面这个例子之所以显示是因为加了 `debug: true`。\n\n## length\n\n目前 uuid 的唯一可设置参数是 length，用于生成短随机数\n\n\n","path":"/zh-CN/components/form/uuid"},{"title":"Grid 2D 布局","body":"\nGrid 2D 是一种二维布局方式，它可以更直观设置组件位置。\n\n> Grid 2D 布局不支持 IE11\n\n## 基本用法\n\n\n\n## 布局基础\n\n`grids` 中可以是任意组件，这里为了简化使用 tpl 组件，通过 x/y/h/w 这四个属性来控制格子的位置和大小。\n\n首先看下图示例，它就是前面基本用法的示例加上标注：\n\n\n\n默认水平方向会平分为 12 列，可以通过 `cols` 来调整，比如只分为 3 栏。\n\n先看 `[grid-1]`，它的 `x/y/h/w` 值分别是 `1,1,1,6`：\n\n- `x,y` 决定这个格子的位置，`1,1` 就是最左上角的位置，如图所示\n- `w` 代表宽度占几格，因为水平方向一共 12 列，所以 6 就意味着占水平空间一半\n- `h` 代表高度占几格，默认每行高度可以使用 `rowHeight` 来控制，也可以设置 `height` 来单独控制这一行的高度\n\n其它格子也可以参照这张图推理出来，比如 `[grid-2]` 起始 x 位置是 `7`，宽度是 6，因此它和 `[grid-]` 平分了第一行。\n\n## 独立设置高宽\n\n在上面的例子中格子的宽度是根据页面宽度平分，高度是固定的，但我们也可以单独改变某一行或某一列的高宽，方法是格子上的 `width` 和 `height` 值。\n\n看下面这个例子\n\n\n\n在这个例子中，首先通过 `cols` 设置了列数为 `3`，然后将 `[grid-1]` 和 `[grid-3]` 的 width 设置为 `100`，使得这两列的宽度都是 100，而页面剩下的宽度就全都留给了 `[grid-2]`。\n\n而在 `[grid-2]` 中通过 `height` 设置了高度，使得这一行高度是 `100px`，而不是默认的 `50px`。\n\n请注意：`width` 将影响一整列，`height` 将影响一整行。\n\n## 自适应内容高度\n\n如果格子内容高度不确定，想更具内容自动撑开，可以设置 `height` 为 `auto`。\n\n\n\n## 格子间距 gap / rowGap\n\n通过 grip 上的 gap 属性来控制间距，默认包含水平和垂直间距\n\n\n\n## 内容区域小于格子的摆放\n\n默认情况下，格子的高宽会撑满对应区域的高宽，但有时候内容高宽比这个格子小，比如一张图片，如何将它在各种中居中显示？\n\n看下面的例子\n\n\n\n在中间的格子中，我们设置了 `\"align\": \"center\"` 和 `\"valign\": \"middle\"`，就使得文字水平和垂直居中显示了。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | --------- | ------------------------------- |\n| type | `string` | `grid-2d` | 指定为 Grid 2D 渲染器 |\n| gridClassName | `string` | | 外层 Dom 的类名 |\n| gap | `int`/`string` | 0 | 格子间距，包括水平和垂直 |\n| cols | `int` | 12 | 格子水平划分为几个区域 |\n| rowHeight | `int` | 50 | 每个格子默认垂直高度 |\n| rowGap | `int`/`string` | | 格子垂直间距 |\n| grids | `Array` | | 格子集合 |\n| grids | | 格子可以是其他渲染器 |\n| grids[x].x | `int` | | 格子起始位置的横坐标 |\n| grids[x].y | `int` | | 格子起始位置的纵坐标 |\n| grids[x].w | `int` | | 格子横跨几个宽度 |\n| grids[x].h | `int` | | 格子横跨几个高度 |\n| grids[x].width | `int`/`string`/`auto` | | 格子所在列的宽度 |\n| grids[x].height | `int`/`string`/`auto` | | 格子所在行的高度，可以设置 auto |\n| grids[x].align | `left`/`center`/`right`/`auto` | `auto` | 格子内容水平布局 |\n| grids[x].valign | `top`/`bottom`/`middle`/`auto` | `auto` | 格子内容垂直布局 |\n","path":"/zh-CN/components/grid-2d"},{"title":"GridNav 宫格导航","body":"\n宫格菜单导航，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`、`Form`或`CRUD`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成菜单展示。\n\n## 基本用法\n\n通过 source 关联上下文数据，或者通过 name 关联。\n\n\n\n也可以静态展示，即不关联数据固定显示。\n\n\n\n## 自定义列数\n\n默认一行展示四个格子，可以通过 `columnNum` 自定义列数\n\n\n\n## 正方形格子\n\n设置 `square` 属性后，格子的高度会和宽度保持一致。\n\n\n\n## 格子间距\n\n通过 `gutter` 属性设置格子之间的距离。\n\n\n\n## 内容横排\n\n将 `direction` 属性设置为 `horizontal`，可以让宫格的内容呈横向排列。\n\n\n\n## 图标占比\n\n设置 `iconRatio` 可以控制图标宽度占比，默认 60%，设置 1-100 的数字。\n\n\n\n## 角标提示\n\n设置 badge 属性后，会在图标右上角展示相应的角标，支持红点、数字、彩带模式。\n\n\n\n## 点击交互\n\n设置 clickAction 属性支持通用点击交互，详见 配置\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | --------------- | ---------- | -------------------------------------------------------- |\n| type | `string` | `grid-nav` | |\n| className | `string` | | 外层 CSS 类名 |\n| itemClassName | `string` | | 列表项 css 类名 |\n| value | `Array` | | 图片数组 |\n| source | `string` | | 数据源 |\n| square | `boolean` | | 是否将列表项固定为正方形 |\n| center | `boolean` | `true` | 是否将列表项内容居中显示 |\n| border | `boolean` | `true` | 是否显示列表项边框 |\n| gutter | `number` | | 列表项之间的间距，默认单位为`px` |\n| reverse | `boolean` | | 是否调换图标和文本的位置 |\n| iconRatio | `number` | 60 | 图标宽度占比，单位% |\n| direction | `string` | `vertical` | 列表项内容排列的方向，可选值为 `horizontal` 、`vertical` |\n| columnNum | `number` | 4 | 列数 |\n| options.icon | `string` | | 列表项图标 |\n| options.text | `string` | | 列表项文案 |\n| options.badge | `BadgeSchema` | | 列表项角标，详见 |\n| options.link | `string` | | 内部页面路径或外部跳转 URL 地址，优先级高于 clickAction |\n| options.blank | `boolean` | | 是否新页面打开，link 为 url 时有效 |\n| options.clickAction | `ActionSchema` | | 列表项点击交互 详见 |\n\n\n","path":"/zh-CN/components/grid-nav"},{"title":"Grid 水平分栏","body":"\n## 基本用法\n\n默认会水平均分宽度\n\n\n\n## 响应式\n\n通过 `md` 设置屏幕中等宽度（768px）情况下的分栏\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------------- | -------------------------------------------------- | -------- | -------------------- |\n| type | `string` | `\"grid\"` | 指定为 Grid 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| gap | `'xs' \\| 'sm' \\| 'base' \\| 'none' \\| 'md' \\| 'lg'` | | 水平间距 |\n| valign | `'top' \\| 'middle' \\| 'bottom' \\| 'between'` | | 垂直对齐方式 |\n| align | `'left' \\| 'right' \\| 'between' \\| 'center'` | | 水平对齐方式 |\n| columns | `Array` | | 列集合 |\n| columns | | 成员可以是其他渲染器 |\n| columns[x].xs | `int` or \"auto\" | | 宽度占比： 1 - 12 |\n| columns[x].columnClassName | | | 列类名 |\n| columns[x].sm | `int` or \"auto\" | | 宽度占比： 1 - 12 |\n| columns[x].md | `int` or \"auto\" | | 宽度占比： 1 - 12 |\n| columns[x].lg | `int` or \"auto\" | | 宽度占比： 1 - 12 |\n| columns[x].valign | `'top' \\| 'middle' \\| 'bottom' \\| 'between'` | | 当前列内容的垂直对齐 |\n\n更多使用说明，请参看 \n","path":"/zh-CN/components/grid"},{"title":"HBox 布局","body":"\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------------- | -------------------------------------------------- | -------------- | -------------------- |\n| type | `string` | `\"hbox\"` | 指定为 HBox 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| gap | `'xs' \\| 'sm' \\| 'base' \\| 'none' \\| 'md' \\| 'lg'` | | 水平间距 |\n| valign | `'top' \\| 'middle' \\| 'bottom' \\| 'between'` | | 垂直对齐方式 |\n| align | `'left' \\| 'right' \\| 'between' \\| 'center'` | | 水平对齐方式 |\n| columns | `Array` | | 列集合 |\n| columns | | 成员可以是其他渲染器 |\n| columns[x].columnClassName | `string` | `\"wrapper-xs\"` | 列上类名 |\n| columns[x].valign | `'top' \\| 'middle' \\| 'bottom' \\| 'between'` | | 当前列内容的垂直对齐 |\n","path":"/zh-CN/components/hbox"},{"title":"Html","body":"\n## 基本用法\n\n渲染一段 HTML\n\n\n\n> 当需要获取数据域中变量时，使用 。\n","path":"/zh-CN/components/html"},{"title":"Icon 图标","body":"\n> 在 React 项目中使用 Icon 需要引入 `@fortawesome/fontawesome-free`，然后在代码中 `import '@fortawesome/fontawesome-free/css/all.css'`，还有相关的 webpack 配置，具体请参考 里的配置\n\n## 基本使用\n\n\n\n## 颜色及大小调整\n\nicon 基于字体实现，所以可以通过来控制它。\n\n\n\n## 使用图标链接\n\nicon 还可以使用 URL 地址，可以从 等网站下载图表的 svg 文件上传到服务器，然后使用对应的地址，比如\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | --------------------------------------- |\n| type | `string` | `icon` | 指定组件类型 |\n| className | `string` | | 外层 CSS 类名 |\n| icon | `string` | | icon 名，支持 fontawesome v4 或使用 url |\n","path":"/zh-CN/components/icon"},{"title":"iFrame","body":"\n## 基本使用\n\n内嵌外部站点，可用 iframe 来实现。\n\n\n\n## src 也可以从上下文获取\n\n> 1.1.6\n\n\n\n## 如何和 iframe 通信\n\n#### amis 向 iframe 通信\n\n在 iframe 页面中添加`message`事件监听器，在 iframe 初始化、更新或者接收到其他组件发送数据的时候，会通过 `postMessage` 发送当前数据域数据，iframe 页面的事件监听器中可以通过`e.data`进行获取：\n\n\n\n`e.data` 格式及参数说明：\n\n\n\n- **type**: 当前事件类型\n - amis:init：初始化的时候触发\n - amis:update：组件更新时触发\n - amis:receive：组件通过 target 接收到其他组件发送来数据的时候\n- **data**：当前数据源数据\n\n> 如果是 webpack 开发环境，注意过滤掉`webpackOk`类型消息\n\n#### iframe 页面向 amis 通信\n\n1. 首先在 amis 的 iframe 配置项中配置 events 对象，指明 iframe 需要触发的 amis 行为\n\n\n\n上面 `events` 对象中配置了`detail`事件，该行为会触发 amis 弹框行为，并在弹框中渲染`\"iframe 传给 amis 的 id 是：${iframeId}\"`这段模板。\n\n那么要如何触发该事件和传递数据呢？\n\n2. iframe 页面中，获取父级 window，并使用`postMessage`传递数据，格式如下，：\n\n\n\n`message`格式：\n\n- `type`: 标识要触发的 amis 行为，请使用 `amis:xxx` 的格式，这里我们设置为配置好的`detail`事件\n- `data`: 传给 amis 的数据，amis 会将该数据与当前数据域进行合并进行使用\n\n这样 amis 弹框中就会渲染内容:`iframe 传给 amis 的 id 是：111`\n\n## 设置高度自适应\n\n默认 amis 中只支持给 iframe 配置固定高度，我们可以通过上面说到的通信机制实现高度自适应。\n\n1. 首先在 iframe 页面中获取到页面高度\n2. 通过`amis:resize`事件，将高度信息发送给 amis\n\n\n\n这样就可以动态设置 iframe 组件高度\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ------------------ | ---------- | -------------------- |\n| type | `string` | `\"iframe\"` | 指定为 iFrame 渲染器 |\n| className | `string` | | iFrame 的类名 |\n| frameBorder | `Array` | | frameBorder |\n| style | `object` | | 样式对象 |\n| src | `string` | | iframe 地址 |\n| height | `number`或`string` | `\"100%\"` | iframe 高度 |\n| width | `number`或`string` | `\"100%\"` | iframe 宽度 |\n","path":"/zh-CN/components/iframe"},{"title":"Image 图片","body":"\n## 基本使用\n\n\n\n也可以配置`name`属性关联上下文数据\n\n\n\n## 配置标题和说明\n\n\n\n## 配置缩略图\n\n### 显示模式\n\n\n\n### 显示比例\n\n\n\n## 放大功能\n\n配置`\"enlargeAble\": true`，鼠标移动到图片上会显示可点击图标，点击可放大展示\n\n\n\n可以配置`originalSrc`，来指定原图资源地址，作为放大预览的图片地址\n\n\n\n`enlargeTitle`和`enlargeCaption`可以配置放大预览中的标题和描述\n\n\n\n## 设置高宽\n\n通过 `width` 和 `height` 可以设置缩率图显示的高宽\n\n\n\n## 原图模式\n\n> 1.2.3 及以上版本\n\n默认图片为缩略图模式，可以通过配置 imageMode: \"original\" 修改为原图模式，原图模式为块状展示，宽度尽可能占满。\n\n\n\n## 打开外部链接\n\n> 1.3.3 及以上版本\n\n可以设置 href 属性来支持图片点击打开链接，需要注意这和放大功能是冲突的，只能二选一。\n\n\n\nhref 也可以是模板\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 自定义点击行为\n\n> 1.5.0 及以上版本\n\n可以通过 `clickAction` 设置点击触发行为。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | ------------------------------------ | --------- | -------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"color\"`；在 Form 中用作静态展示，为`\"static-color\"` |\n| className | `string` | | 外层 CSS 类名 |\n| imageClassName | `string` | | 图片 CSS 类名 |\n| thumbClassName | `string` | | 图片缩率图 CSS 类名 |\n| height | `string` | | 图片缩率高度 |\n| width | `string` | | 图片缩率宽度 |\n| title | `string` | | 标题 |\n| imageCaption | `string` | | 描述 |\n| placeholder | `string` | | 占位文本 |\n| defaultImage | `string` | | 无数据时显示的图片 |\n| src | `string` | | 缩略图地址 |\n| href | | | 外部链接地址 |\n| originalSrc | `string` | | 原图地址 |\n| enlargeAble | `boolean` | | 支持放大预览 |\n| enlargeTitle | `string` | | 放大预览的标题 |\n| enlargeCaption | `string` | | 放大预览的描述 |\n| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |\n| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |\n| imageMode | `string` | `thumb` | 图片展示模式，可选：`'thumb'`, `'original'` 即：缩略图模式 或者 原图模式 |\n","path":"/zh-CN/components/image"},{"title":"Images 图片集","body":"\n图片集展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`、`Form`或`CRUD`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n通过 source 关联上下文数据，或者通过 name 关联。\n\n\n\n也可以静态展示，即不关联数据固定显示。\n\n\n\n## 值格式\n\n除了支持纯文本数组以外，也支持对象数组，如：\n\n\n\n### 配置预览图地址\n\n需要设置对象中预览图地址的`key`值为`image`\n\n\n\n如果`key`值不是`image`，也可以在 **images 组件** 上，通过配置`src`，使用数据映射，来获取图片地址\n\n\n\n### 配置原图地址\n\n需要设置对象中原图地址的`key`值为`src`\n\n\n\n如果原图数据的`key`值不是`src`，也可以在 **images 组件** 上，通过配置`originalSrc`，使用数据映射，来获取原图片地址\n\n\n\n### 配置标题和说明\n\n设置对象中标题的`key`值为`title`，说明的`key`为`description`或`caption`。\n\n\n\n## 显示比例和缩略图模式\n\n比如这个例子配置成 16:9 的比率展示缩略图，并裁剪部分去掉空白。\n\n\n\n## 配置放大预览\n\n在 **images 组件** 上，配置`enlargeAble`，支持放大预览\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中关联数据静态展示\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ------------------------------------------ | --------- | ---------------------------------------------------------------------------------------- |\n| type | `string` | `images` | 如果在 Table、Card 和 List 中，为`\"images\"`；在 Form 中用作静态展示，为`\"static-images\"` |\n| className | `string` | | 外层 CSS 类名 |\n| defaultImage | `string` | | 默认展示图片 |\n| value | `string`或`Array`或`Array` | | 图片数组 |\n| source | `string` | | 数据源 |\n| delimiter | `string` | `,` | 分隔符，当 value 为字符串时，用该值进行分隔拆分 |\n| src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 |\n| originalSrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 |\n| enlargeAble | `boolean` | | 支持放大预览 |\n| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |\n| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |\n","path":"/zh-CN/components/images"},{"title":"组件介绍","body":"\n从这个章节开始，我们将会介绍 amis 中内置的所有组件的使用方法\n","path":"/zh-CN/components/index"},{"title":"Json","body":"\nJSON 展示组件\n\n## 基本用法\n\n可以配置 `value` 展示 `json` 格式数据\n\n\n\n## 获取数据链值\n\n也可以通过配置 `source` 获取数据链中的值\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n## 主题\n\n可配置`jsonTheme`，指定显示主题，可选`twilight`和`eighties`，默认为`twilight`。\n\n\n\n## 配置默认展开层级\n\n\n\n如上，`levelExpand`配置为`0`，则默认不展开。\n\n## 开启 json 修改\n\n> since 1.2.3\n\n可配置`mutable` 为 true，展示 json 的同时支持修改。记得配置 name 属性。\n\n\n\n## 显示数据类型显示\n\n还可以使用 `displayDataTypes` 开启数据类型显示\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------- | ---------- | ------------------------------------------------------------------------------------ |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"json\"`；在 Form 中用作静态展示，为`\"static-json\"` |\n| className | `string` | | 外层 CSS 类名 |\n| value | `object`/`string` | | json 值，如果是 string 会自动 parse |\n| source | `string` | `''` | 通过数据映射获取数据链中的值 |\n| placeholder | `string` | `-` | 占位文本 |\n| levelExpand | `number` | `1` | 默认展开的层级 |\n| jsonTheme | `string` | `twilight` | 主题，可选`twilight`和`eighties` |\n| mutable | `boolean` | `false` | 是否可修改 |\n| displayDataTypes | `boolean` | `false` | 是否显示数据类型 |\n","path":"/zh-CN/components/json"},{"title":"Link 链接","body":"\n## 基本用法\n\n\n\n## 新标签页打开\n\n\n\n## 禁用超链接\n\n\n\n## 添加图标\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------- | ------ | ------------------------------------------------------------------------------------ |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"link\"`；在 Form 中用作静态展示，为`\"static-link\"` |\n| body | `string` | | 标签内文本 |\n| href | `string` | | 链接地址 |\n| blank | `boolean` | | 是否在新标签页打开 |\n| htmlTarget | `string` | | a 标签的 target，优先于 blank 属性 |\n| title | `string` | | a 标签的 title |\n| disabled | `boolean` | | 禁用超链接 |\n| icon | `string` | | 超链接图标，以加强显示 |\n| rightIcon | `string` | | 右侧图标 |\n\n## 事件表\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------------------------- | ---- |\n| click | `url: string` 链接地址
`blank: boolean` 是否在新标签页打开
`label: SchemaTpl` 标签内文本 | 点击 |\n\n## 动作表\n\n暂无\n","path":"/zh-CN/components/link"},{"title":"List 列表","body":"\n列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n\n\n或者你也可以使用 CRUD 的 \n\n## 单行点击操作\n\n> 1.4.0 及以上版本\n\n配置 itemAction 可以实现点击某一行后进行操作，支持 里的所有配置，比如弹框、刷新其它组件等。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------ | ------------------------------------ | --------------------- | ---------------------------------------------------------------------------- |\n| type | `string` | | `\"list\"` 指定为列表展示。 |\n| title | `string` | | 标题 |\n| source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持 |\n| placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 |\n| className | `string` | | 外层 CSS 类名 |\n| headerClassName | `string` | `amis-list-header` | 顶部外层 CSS 类名 |\n| footerClassName | `string` | `amis-list-footer` | 底部外层 CSS 类名 |\n| listItem | `Array` | | 配置单条信息 |\n| listItem.title | | | 标题 |\n| listItem.titleClassName | `string` | `h5` | 标题 CSS 类名 |\n| listItem.subTitle | | | 副标题 |\n| listItem.avatar | | | 图片地址 |\n| listItem.avatarClassName | `string` | `thumb-sm avatar m-r` | 图片 CSS 类名 |\n| listItem.desc | | | 描述 |\n| listItem.body | `Array` | | 内容容器，主要用来放置非表单项组件 |\n| listItem.actions | Array<> | | 按钮区域 |\n| listItem.actionsPosition | 'left' or 'right' | 默认在右侧 | 按钮位置 |\n","path":"/zh-CN/components/list"},{"title":"Log 实时日志","body":"\n用于实时显示日志或程序输出结果。\n\n## 基本用法\n\n通过设置 source 来获取日志，支持 ANSI 基本颜色显示。\n\n\n\n由于缺少线上服务，所以这个例子无法在线演，它的运行效果如下图所示\n\n\n\n### 后端实现参考\n\n后端需要通过流的方式输出结果，比如 Node 实现示例：\n\n```javascript\nconst http = require('http');\n\nlet app = http.createServer((req, res) => {\n res.writeHead(200, {\n 'Content-Type': 'text/plain',\n 'Access-Control-Allow-Origin': '*'\n });\n\n let index = 1;\n let timer = setInterval(() => {\n if (index < 50) {\n // 每次 write 都会立刻传给前端\n res.write(`line: ${index}\\n`);\n index += 1;\n } else {\n res.end('end');\n clearInterval(timer);\n }\n }, 100);\n});\n\napp.listen(3000, '127.0.0.1');\nconsole.log('Node server running on port 3000');\n```\n\n其它语言请查找如何使用 stream 的方式返回内容，比如 Spring 的 `StreamingResponseBody`：\n\n\n\n需要注意有些反向代理有 buffer 设置，比如 nginx 的 ，它会使得即便后端返回内容也需要等 buffer 满了才会真正返回前端，如果需要更实时的效果就需要关掉此功能。\n\n## 自动滚动到底部\n\n通过 `autoScroll` 可以关闭此功能\n\n## source 支持变量\n\n> 1.4.2 及以上版本\n\n可以初始设置为空，这样初始不会加载，而等这个变量有值的时候再加载\n\n\n\n## source 支持高级配置\n\n> 1.6.1 及以上版本\n\n可以类似 api 那样自定义 header、method 等，比如：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | ------ | ------------------ |\n| height | `number` | 500 | 展示区域高度 |\n| className | `string` | | 外层 CSS 类名 |\n| autoScroll | `boolean` | true | 是否自动滚动 |\n| placeholder | `string` | | 加载中的文字 |\n| encoding | `string` | utf-8 | 返回内容的字符编码 |\n| source | `string` | | 接口 |\n","path":"/zh-CN/components/log"},{"title":"Mapping 映射","body":"\n## 基本用法\n\n\n\n## 渲染 HTML\n\n\n\n## 支持数组\n\n> 1.5.0 及以上版本\n\n如果返回值是数组会显示为多个\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nList 的内容、Card 卡片的内容配置同上\n\n### Form 中静态展示\n\n\n\n### 布尔值映射\n\n\n\n或者\n\n\n\n### 远程拉取字典\n\n> since 1.1.6\n\n通过配置 `source` 接口来实现，接口返回字典对象即可，数据格式参考 map 配置。\n\n\n\n> 默认 source 是有 30s 缓存的，通常字典数据不长变更。如果想修改，请参考 文档配置缓存。\n\n### 关联上下文变量\n\n> since 1.1.6\n\n同样通过配置 `source` 来实现，只是格式是取变量。\n\n\n\n## 占位文本\n\n通过 `placeholder` 可以控制数据不存在时的展现\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ----------------- | ------ | -------------------------------------------------------------------------------------- |\n| className | `string` | | 外层 CSS 类名 |\n| placeholder | `string` | | 占位文本 |\n| map | `object` | | 映射配置 |\n| source | `string` or `API` | | |\n","path":"/zh-CN/components/mapping"},{"title":"Markdown 渲染","body":"\n> 1.1.6 版本开始\n\n## 基本用法\n\n\n\n## 动态数据\n\n动态数据可以通过 name 来关联，类似 组件\n\n## 基于 Editor 和数据联动来实现预览功能\n\n\n\n## 加载外部 markdown 文件\n\n> 1.6.5 及以上版本\n\n可以通过 `src` 属性来加载外部 markdown 文件，比如\n\n\n\n这个接口的返回格式可以是两种，一种是 JSON，类似\n\n\n\n另一种是返回 `content-type` 为 `text/markdown` 或 `text/x-markdown` 的纯文本。\n\n## 视频\n\n可以使用 `` 语法来嵌入视频。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | -------- |\n| name | `string` | | 名称 |\n| value | `string` | | 静态值 |\n| className | `string` | | 类名 |\n| src | `Api` | | 外部地址 |\n","path":"/zh-CN/components/markdown"},{"title":"Nav 导航","body":"\n用于展示链接导航\n\n## 基本用法\n\n\n\n## 配置多层级\n\n\n\n## 横向摆放\n\n\n\n### 响应式收纳\n\n横向（`\"stack\": false`）模式下配置`overflow`，实现导航响应式收纳。\n\n\n\n设置`maxVisibleCount`可以自定义强制展示的导航数量，不设置则自动处理。设置`overflowIndicator`自定义菜单按钮的图标。\n设置`overflowLabel`自定义菜单按钮文本。\n\n\n\n## 动态导航\n\n通过配置 source 来实现动态生成导航，source 可以是 api 地址或者变量，比如\n\n\n\n## 懒加载\n\n可以一次只加载部分层级，更深层次的选项可以标记为 `defer` 为 true，这样只有点开的时才会加载。\n\n\n\n## 更多操作\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------------------- | ----------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------- |\n| type | `string` | `\"nav\"` | 指定为 Nav 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |\n| source | `string` 或 | | 可以通过变量或 API 接口动态创建导航 |\n| deferApi | | | 用来延时加载选项详情的接口，可以不配置，不配置公用 source 接口。 |\n| itemActions | | | 更多操作相关配置 |\n| draggable | `boolean` | | 是否支持拖拽排序 |\n| dragOnSameLevel | `boolean` | | 仅允许同层级内拖拽 |\n| saveOrderApi | `string` 或 | | 保存排序的 api |\n| itemBadge | | | 角标 |\n| links | `Array` | | 链接集合 |\n| links[x].label | `string` | | 名称 |\n| links | | 链接地址 |\n| links[x].target | `string` | 链接关系 | |\n| links[x].icon | `string` | | 图标 |\n| links[x].children | `Array` | | 子链接 |\n| links[x].unfolded | `boolean` | | 初始是否展开 |\n| links[x].active | `boolean` | | 是否高亮 |\n| links | | 是否高亮的条件，留空将自动分析链接地址 |\n| links[x].defer | `boolean` | | 标记是否为懒加载项 |\n| links | | 可以不配置，如果配置优先级更高 |\n| overflow | `NavOverflow` | | 响应式收纳配置 |\n| overflow.enable | `boolean` | `false` | 是否开启响应式收纳 |\n| overflow.overflowLabel | `string \\| SchemaObject` | | 菜单触发按钮的文字 |\n| overflow.overflowIndicator | `SchemaIcon` | `\"fa fa-ellipsis\"` | 菜单触发按钮的图标 |\n| overflow.maxVisibleCount | `number` | | 开启响应式收纳后导航最大可显示数量，超出此数量的导航将被收纳到下拉菜单中，默认为自动计算 |\n| overflow.wrapperComponent | `string` | | 包裹导航的外层标签名，可以使用其他标签渲染 |\n| overflow.style | `React.CSSProperties` | | 自定义样式 |\n| overflow.overflowClassName | `string` | `\"\"` | 菜单按钮 CSS 类名 |\n| overflow.overflowPopoverClassName | `string` | `\"\"` | Popover 浮层 CSS 类名 |\n| overflow.overflowListClassName | `string` | `\"\"` | 菜单外层 CSS 类名 |\n","path":"/zh-CN/components/nav"},{"title":"Page 页面","body":"\nPage 组件是 amis 页面 JSON 配置中顶级容器组件，是整个页面配置的入口组件。\n\n## 基本用法\n\n我们这里在内容区中简单渲染一段文字。\n\n\n\n## 渲染组件\n\n内容区同样可以渲染各种组件，这里我们渲染一个表单。\n\n\n\n## 在其他区域渲染组件\n\nPage 默认将页面分为几个区域，分别是**内容区（`body`）**、**侧边栏（`aside`）** 和 **工具栏（`toolbar`）部分**，你可以在这些区域配置你想要的组件和内容。\n\n\n\n> 不同区域都是`Page`的子节点，也就是说都可以使用`Page`下数据作用域。\n\n## 页面初始化请求\n\n通过配置`initApi`，可以在初始化页面时请求所配置的接口。\n\n\n\n具体 API 规范查看 。\n\n## 轮询初始化接口\n\n想要在页面渲染后，轮询请求初始化接口，步骤如下：\n\n1. 配置 initApi；\n2. 配置 interval：单位为毫秒，最小 1000。\n\n\n\n如果希望在满足某个条件的情况下停止轮询，配置`stopAutoRefreshWhen`表达式。\n\n\n\n## 下拉刷新\n\n通过配置`pullRefresh`，可以设置下拉刷新功能（仅用于移动端）。\n\n\n\n配置下拉刷新文案\n\n\n\n## CSS 变量\n\n通过设置 CSS 变量几乎可以修改 amis 中任意组件的展现，具体细节请参考。\n\n\n\n## 自定义 CSS\n\n> 1.3.0 及以上版本\n\n虽然 amis 提供了很多内置样式，但想要更精细控制样式，最好的方式依然是编写自定义 CSS，在之前的版本中需要外部页面配合，从 1.3.0 开始 amis 可以直接在配置中支持自定义 CSS\n\n\n\n## aside 可调整宽度\n\n通过配置 `asideResizor`，可以让侧边栏支持动态调整宽度，同时可以通过 `asideMinWidth`、`asideMaxWidth` 设置 aside 最大最小宽度。\n\n\n\n上面的配置会自动创建一个 `