mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
1 line
1.1 MiB
1 line
1.1 MiB
{"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`，实现在任意操作前，弹出提示框确认是否进行该操作。同时可以通过配置 `confirmTitle` 来设置弹窗标题\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> 3.5.0 版本开始可以配置 `downloadFileName` 来覆盖下载文件名。注意：即便配置了 `downloadFileName`，api 依然需要返回 `Content-Disposition` 头。\n\n\n\n上面的例子由于环境原因没法测试，需要在返回的 header 中配置 `content-type` 和 `Content-Disposition`，比如\n\n\n\n如果接口存在跨域，除了常见的 cors header 外，还需要添加以下 header\n\n\n\n## 保存到本地\n\n> 1.10.0 及以上版本\n\n和前面的下载接口功能类似，但不需要返回 `Content-Disposition` header，只需要解决跨域问题，主要用于一些简单的场景，比如下载文本\n\n\n\n> 这个功能目前还没用到 env 里的 fetcher 方法，不支持 POST\n\n默认会自动取 url 中的文件名，如果没有的话就需要指定，比如\n\n\n\n## 倒计时\n\n主要用于发验证码的场景，通过设置倒计时 `countDown`（单位是秒），让点击按钮后禁用一段时间：\n\n> 如果同时使用多个倒计时组件时, 需要额外配置全局唯一的`name`或`id`属性, 避免多个组件之间的计时器冲突\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下面的表单中会优先校验按钮`required`属性包含的表单项，当所有的字段校验完毕后，才会校验表单中固有的项目。需要额外注意的是，当按钮中的 `required` 和对应表单项本身的 `required` 属性冲突时，最终校验方式是`\"required\": true`。\n\n\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| confirmTitle | | - | 确认框标题，前提是 confirmText 有内容，支持模版语法 |\n| reload | `string` | - | 指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。 |\n| tooltip | `string` | - | 鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。 |\n| disabledTip | `'string' \\| 'TooltipObject'` | - | 被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`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<string>` | - | 配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证 |\n\n### TooltipObject\n\n`TooltipObject` 为 属性配置，但是不需要配置如下属性 `type`、`body`、`wrapperComponent`、`className`、`inline`。\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | -------- | -------------- |\n| click | - | 点击时触发 |\n| mouseenter | - | 鼠标移入时触发 |\n| mouseleave | - | 鼠标移出时触发 |\n\n### click\n\n鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseenter\n\n鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseleave\n\n鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\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> `3.6.0`及以上版本\n\n配置`actions`属性，可以添加操作区域。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| -------------------- | ----------------------------------------- | --------- | -------------------------------------------------------- | --- |\n| type | `string` | `\"alert\"` | 指定为 alert 渲染器 |\n| title | `string` | | 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| actions | | | 操作区域 | `3.6.0` |\n","path":"/zh-CN/components/alert"},{"title":"AMIS 渲染器","body":"\n用于渲染数据中的 amis 配置\n\n## 基本使用\n\n只需要设置 schema 或 name，值可以是 JSON 对象或字符串的 JSON\n\n\n\n## 通过 name 绑定动态数据\n\n可以用在表单或 CRUD 中，下面示例演示了编辑后实时渲染的效果，因为使用了相同 的 name\n\n\n\n## 向下传递 props\n\n通过设置 props 向下传递，这个 props 会作为默认值\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | -------- | ------------------ |\n| type | `string` | `\"amis\"` | 指定为 amis 渲染器 |\n| name | `string` | | 绑定上下文变量名 |\n| props | `object` | | 向下传递的 props |\n","path":"/zh-CN/components/amis"},{"title":"AnchorNav 锚点导航","body":"\n锚点导航容器组件。\n\n## 基本用法\n\n`6.1.0`及以上版本垂直方向支持配置子节点\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 | | 区域 内容区，`6.1.0`及以上版本垂直方向支持配置子节点 |\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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------- | --------------------------------------------------- |\n| init | - | 组件实例被创建并插入 DOM 中时触发。2.4.1 及以上版本 |\n\n## 动作表\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ---------------- |\n| reload | - | 刷新（重新加载） |\n| setValue | `value: object` 更新的数据 | 更新数据 |\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- 第一个获取到了，显示正常\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\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| defaultAvatar | `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\n## 事件表\n\n> 6.1.0 及以上版本\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | -------- | -------------- |\n| click | - | 点击时触发 |\n| mouseenter | - | 鼠标移入时触发 |\n| mouseleave | - | 鼠标移出时触发 |\n\n### click\n\n鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseenter\n\n鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseleave\n\n鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\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 在 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| ------------- | ------------------------------------------- | --------- | ---------------------------------------------------------------------- |\n| mode | `string` | dot | 角标类型，可以是 dot/text/ribbon |\n| text | `string`\\|`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]` | [0, 0] | 角标位置，offset 相对于 position 位置进行水平、垂直偏移 |\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<Action>` | | |\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'` | | 触发 tooltip |\n| disabled | `'boolean'` | false | 按钮失效状态 |\n| disabledTip | `'string' \\| 'TooltipObject'` | | 按钮失效状态下的提示 |\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> 2.1.1 及以上版本\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<string>` | ` |\n| scheduleAction | `SchemaNode` | | 自定义日程展示 |\n| largeMode | `boolean` | `false` | 放大模式 |\n| todayActiveStyle | `Record<string, any>` | | 今日激活时的自定义样式 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | ------------------------ | ------------------ |\n| change | `value: string` 组件的值 | 时间值变化时触发 |\n| click | `value: string` 组件的值 | 点击日期时触发 |\n| mouseenter | `value: string` 组件的值 | 鼠标移入日期时触发 |\n| mouseleave | `value: string` 组件的值 | 鼠标移出日期时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的值 | 更新数据 |\n","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| useCardLabel | `boolean` | `true` | 卡片内容区的表单项 label 是否使用 Card 内部的样式 |\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设置`\"selectable\": true`, 卡片组开启多选模式\n\n\n\n卡片组默认支持多选，设置`\"multiple\": false`开启单选模式\n\n -->\n\n## 当 cards 在 crud 中且配置了批量操作按钮时可点选\n\n如果配置了 `checkOnItemClick`，当用户点击卡片时就能选中这个卡片，而不是只能点击勾选框才能选中\n\n\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| selectable | `boolean` | `false` | 卡片组是否可选 |\n| multiple | `boolean` | `true` | 卡片组是否为多选 |\n| checkOnItemClick | `boolean` | | 点选卡片内容是否选中卡片 |\n\n## 动作表\n\n> 6.4.0 或更高版本\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| select | `args.index` 可选，指定行数，支持表达式 <br /> `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合 index` | 设置列表的选中项 |\n| selectAll | - | 设置列表全部项选中 |\n| clearAll | - | 清空列表所有选中项 |\n| initDrag | - | 开启列表拖拽排序功能 |\n| cancelDrag | - | 放弃列表拖拽排序功能 |\n| setValue | `args.value`: object <br />`args.index` 可选，指定行数，支持表达式 <br /> `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合 | 更新列表记录 |\n| submitQuickEdit | | 快速编辑数据提交 |\n\n### select\n\n- `args.index` 可选，指定行数，支持表达式\n- `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合\n\n\n\n### selectAll\n\n\n\n### clearAll\n\n\n\n### initDrag & cancelDrag\n\n\n\n### setValue\n\n#### 更新列表记录\n\n\n\n#### 更新指定行记录\n\n可以通过指定`index`或者`condition`来分别更新指定索引的行记录和指定满足条件（条件表达式或者 ConditionBuilder）的行记录，另外`replace`同样生效，即可以完全替换指定行记录，也可以对指定行记录做合并。\n\n\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> `2.8.1` 及以上版本\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 | `number` | `500` | 切换动画时长（ms） |\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| multiple | `object` | `{count: 1}` | 多图展示，count 表示展示的数量 | `2.8.1` |\n| alwaysShowArrow | `boolean` | `false` | 是否一直显示箭头，为 false 时鼠标 hover 才会显示 | `2.8.1` |\n| icons | {prev: `SchemaCollection`; next: `SchemaCollection`;} | | 自定义箭头图标 | `2.8.1` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------------------------------- | ---------------- |\n| change | `activeIndex: number` 激活图片的索引 <br /> `prevIndex: number` 上一张图片的索引 | 轮播图切换时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| ---------- | ------------------------------------ | ---------- |\n| next | - | 下一张 |\n| prev | - | 上一张 |\n| goto-image | `activeIndex: number` 切换图片的索引 | 切换轮播图 |\n\n### next\n\n\n\n### prev\n\n\n\n### goto-image\n\n\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> Echarts 中有些配置不能为未定义，所以要使用变量，最好使用类似上面的 `${line || []}` 写法配置默认值，保证在数据加载完前渲染也不会报错\n\n其中 api 返回内容是如下写法，可以看到通过语法，我们可以将 api 放回结果中的 line 字段作为折线的数据。\n\n\n\n除了 `config` 中的 `data`，`config` 里的其它属性也都支持数据映射，还能支持数据映射中的各种过滤器。\n\n### 使用上层数据接口\n\n有时候数据是在上层获取的，比如通过 service 中返回了数据，这时需要通过 `trackExpression` 来指定跟踪什么数据，比如下面的例子，数据是从 service 获取的就需要配置 `trackExpression`。\n\n> 如果`trackExpression` 追踪的数据是**对象数据**，可以使用的`json`方法将数据序列化之后再比较，例如`\"trackExpression\": \"${fieldToTrack|json}\"`\n\n\n\n## 配置图表点击行为\n\n可以通过配置`\"clickAction\": {}`，来指定图表节点的点击行为，支持 amis 的 。\n\n然后在配置的行为中可以通过 的值，例如下面例子中可以通过`${value|json}`获取到点击节点的`传入的数据值`\n\n> 点击下面坐标中的节点查看效果！\n\n\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> 2.4.1 及以上版本\n\n新增了 `mapURL` 及 `mapName` 两个配置项\n\n\n\n## 加载百度地图\n\n配置 `loadBaiduMap` 后会加载百度地图，需要配置 `ak`\n\n\n\n## 动态处理 echart 配置\n\necharts 的 config 一般是静态配置的，支持简单的数据映射。如果你觉得还不够灵活可以通过自己手写逻辑代码来完成配置。\n\n通过配置 dataFiler 来处理。\n\n\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| dataFilter | `string` | | 自定义 echart config 转换，函数签名：function(config, echarts, data) {return config;} 配置时直接写函数体。其中 config 是当前 echart 配置，echarts 就是 echarts 对象，data 为上下文数据。 |\n| mapURL | | | 地图 geo json 地址 |\n| mapName | string | | 地图名称 |\n| loadBaiduMap | boolean | | 加载百度地图 |\n\n## 事件表\n\n> 2.4.1 及以上版本\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ------------------- | ------------------------------------------------------------------------------------ | --------------------------------------------------- |\n| init | - | 组件实例被创建并插入 DOM 中时触发。2.4.1 及以上版本 |\n| click | 查看 | 鼠标点击时触发 |\n| mouseover | 查看 | 鼠标悬浮时触发 |\n| legendselectchanged | 查看 | 切换图例选中状态时触发 |\n\n### init\n\n\n\n### click\n\n用户鼠标操作点击时触发，例如点击下图蓝色线条上的数据点，将弹出详情。\n\n\n\n### mouseover\n\n用户鼠标悬浮时触发，例如悬浮到下图蓝色线条上的数据点，将弹出详情。\n\n\n\n### legendselectchanged\n\n图例开关的行为会触发 legendselectchanged 事件。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ------------------------------------------ |\n| reload | - | 刷新（重新加载） |\n| setValue | `value: object` 更新的数据 | 更新数据，等于更新图表所依赖数据域中的变量 |\n\n2.4.1 及以上版本，除了以上动作，还支持直接触发，即通过`actionType`指定行为名称，行为配置通过`args: {动作配置项名称: xxx}`来配置具体的参数。\n\n### reload\n\n#### 只做刷新\n\n重新发送`api`请求，刷新 Chart 时，只配置`componentId`目标组件 ID 即可。\n\n\n\n#### 发送数据并刷新\n\n刷新 Chart 组件时，如果配置了`data`，将发送`data`给目标组件，并将该数据合并到目标组件的数据域中（如果配置`\"dataMergeMode\": \"override\"`将覆盖目标组件的数据），然后重新请求数据。\n\n\n\n### setValue\n\n通过`setValue`更新指定图表的数据。\n\n#### 合并数据\n\n默认`setValue`会将新数据与目标组件数据进行合并。\n\n\n\n#### 覆盖数据\n\n可以通过`\"dataMergeMode\": \"override\"`来覆盖目标组件数据。\n\n\n\n### 其他动作\n\n\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通过配置 `maxHeight` 可以实现最大高度，超出滚动\n\n\n\n## 自定义语言高亮\n\n还可以通过 `customLang` 参数来自定义高亮，详情参考。\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| maxHeight | `string`\\|`number` | | 最大高度 |\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## 类FieldSet样式\n\n当Collapse组件作为Form组件的子元素时，`enableFieldSetStyle`属性可以控制Collapse组件样式风格，开启后转换为类似的样式，默认开启。\n\n\n\n\n## CollapseGroup 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------ | ------------------------------------------------------ | ------------------ | ----------------------------------- | --- |\n| type | `string` | `\"collapse-group\"` | 指定为 collapse-group 渲染器 |\n| activeKey | `Array<string \\| number \\| never> \\| string \\| number` | - | 初始化激活面板的 key |\n| accordion | `boolean` | `false` | 手风琴模式 |\n| expandIcon | `SchemaNode` | - | 自定义切换图标 |\n| expandIconPosition | `string` | `\"left\"` | 设置图标位置，可选值`left \\| right` |\n| enableFieldSetStyle | `boolean` | `true` | 当Collapse作为Form组件的子元素时，开启该属性后组件样式设置为FieldSet组件的样式，默认开启 | `3.5.0` |\n\n\n## CollapseGroup 事件表\n\n当前组件会对外派发以下事件，可以通过 onEvent 来监听这些事件，并通过 actions 来配置执行的动作，在 actions 中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细查看事件动作。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| change | `activeKeys: Array<string \\| number>` 当前展开的索引列表 <br /> `collapseId: string \\| number` 折叠器索引 <br/> `collapsed: boolean` 折叠器状态 | 折叠面板折叠状态改变时触发 |\n\n### change\n\n折叠面板折叠状态改变时触发。\n\n\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## Collapse 事件表\n\n当前组件会对外派发以下事件，可以通过 onEvent 来监听这些事件，并通过 actions 来配置执行的动作，在 actions 中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细查看事件动作。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------- | ------------------------ |\n| change | `collapsed: boolean` 折叠器状态 | 折叠器折叠状态改变时触发 |\n\n### change\n\n折叠面板折叠状态改变时触发。\n\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` | | 默认颜色值 |\n| showValue | `boolean` | `true` | 是否显示右边的颜色值 |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.2` |\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\n## 事件表\n\n> 3.3.0 及以上版本\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | -------- | -------------- |\n| click | - | 点击时触发 |\n| mouseenter | - | 鼠标移入时触发 |\n| mouseleave | - | 鼠标移出时触发 |\n\n### click\n\n鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseenter\n\n鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseleave\n\n鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\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### 数据结构\n\nCRUD 组件对数据源接口的数据结构要求如下：\n\n- `items`或`rows`：用于返回数据源数据，格式是数组\n- `total`: 用于返回数据库中一共有多少条数据，用于生成分页\n\n\n\n如果想要通过接口控制当前所处在第几页，可以返回字段 `page`（或自定义字段 `pageField` 的值）。\n\n\n\n如果无法知道数据总数，只能知道是否有下一页，请返回如下格式，amis 会简单生成一个简单版本的分页控件。\n\n\n\n如果不需要分页，或者配置了 `loadDataOnce` 则可以忽略掉 `total` 和 `hasNext` 参数。\n\n### Query 参数\n\n数据源接口地址可以通过变量实现动态拼接，例如： `/api/mock2/sample/${id}`，但需要注意的是接口地址拼接变量后，amis 就不会自动追加默认参数了，例如：分页参数、查询参数等，如需追加，可以自行拼接，例如： `/api/mock2/sample/${id}?page=${page}&perPage=${perPage}`\n\n默认的分页参数是 `page` 和 `perPage`，page 代表页数，比如第一页，perPage 代表每页显示几行。\n\n如果要其它格式，比如转成 `limit` 和 `offset`，可以使用公式来转换，比如\n\n`/api/mock2/sample?limit=${perPage}&offset=${(page - 1) * perPage}`\n\n### 参数汇总\n\n这里汇总一下 CRUD 里默认用到的 query 列表\n\n| query 名 | 类型 | 说明 |\n| -------- | ------------ | ------------------------------ |\n| page | number | 分页，从 1 开始 |\n| perPage | number | 每页数量 |\n| orderBy | string | 排序字段，目前 CRUD 只支持一个 |\n| orderDir | 'asc'/'desc' | 排序方式 |\n| keywords | string | 搜索关键字 |\n\n### 解析 Query 原始类型\n\n> `3.5.0`及以上版本\n\n`syncLocation`开启后，CRUD 在初始化数据域时，将会对 url 中的 Query 进行转换，将原始类型的字符串格式的转化为同位类型。`3.6.0`版本后支持对象格式，该配置默认开启，且默认仅转化布尔值。\n\n#### ParsePrimitiveQueryOptions\n\n\n\n比如开启设置 `{\"parsePrimitiveQuery\": {\"enable\": true, \"types\": [\"boolean\", \"number\"]}}` 后：\n\n\n\n如果只想保持字符串格式，可以设置`\"parsePrimitiveQuery\": false` 或者 `\"parsePrimitiveQuery\": {\"enable\": false}` 关闭该特性，具体效果参考，通过表达式控制接口传递的参数类型。\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当行数据中存在 `children` 字段时，CRUD 会自动识别为树形数据，并支持展开收起。\n\n\n\n## 嵌套懒加载\n\n如果数据量比较大不适合一次性加载，可以配置 `deferApi` 接口，结合行数据中标记 `defer: true` 属性，实现懒加载。\n\n注意 `deferApi` 结果返回跟 `api` 返回不一样，`deferApi` 返回的是节点详情，而不是列表，列表应该是节点信息的 children 属性里面。也就是说 deferApi 还可以进一步完善节点信息。返回格式参考如下：\n\n\n\n\n\n## 查询条件表单\n\n大部分表格展示有对数据进行检索的需求，CRUD 自身支持通过配置`filter`，实现查询条件过滤表单。`filter` 配置实际上同 组件，因此支持绝大部分`form`的功能。\n\n在条件搜索区的 `Engine` 输入框中输入任意值查询会发现结果中 `ID` 为 1 - 3 的 `Rendering engine` 列因为返回值中没有对应字段值，被错误填入了与 `filter` 中相同 `name` 的字段值，这是因为表格 Cell 通过获取到了上层数据域 `filter` 中相同字段的数据值。这种情况可以在 CRUD `columns` 对应列配置`\"canAccessSuperData\": false`禁止访问父级数据域（比如: `Platform`列），或者 CRUD 追加`\"canAccessSuperData\": false`配置禁止所有列访问父级数据域。\n\n\n\n**请注意**：在默认没有自定义配置 api 数据映射时，提交查询条件表单，会自动将表单中的表单项值，发送给`crud`所配置的接口，然后通过后端接口，实现对数据的过滤操作，前端默认是不会进行任何的数据过滤操作\n\n如果想前端实现过滤功能，请看部分。\n\n### 自动生成查询区域\n\n通过设置`\"autoGenerateFilter\": true`开启查询区域，会根据列元素的 `searchable` 属性值，自动生成查询条件表单，只有 `searchable` 属性值为合法的组件 Schema 时才会生成查询条件。注意这个属性和 `filter` 冲突，开启 `filter` 后 `autoGenerateFilter` 将会失效。\n\n### autoGenerateFilter 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------- | ------ | -------------------- |\n| columnsNum | `number` | `3` | 过滤条件单行列数 |\n| showBtnToolbar | `boolean` | `true` | 是否显示设置查询字段 |\n| defaultCollapsed | `boolean` | `true` | 是否初始收起 |\n\n\n\n## 多个列表共用一套查询条件\n\n如果希望一个查询表单作用在多个列表中，可以直接 `form + n * crud` 的方式。将 form 的提交目标给到多个 crud。\n\n> 注意：如果一个页面有多个 crud，请控制同步地址栏的 crud 数量不要超过一个。否则会相互干扰\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> 如果想默认就基于某个字段排序，可以结合 `defaultParams` 一起配置。\n\n\n\namis 只负责生成排序组件，并将排序参数传递给接口，而不会在前端对数据进行排序处理。参数格式如下：\n\n\n\n你可以通过，在`api`中获取这些参数。\n\n### 快速搜索\n\n可以在列上配置`\"searchable\": true`，该列表头右侧会渲染一个可点击的搜索图标，点击可以输入关键字进行该列的搜索：\n\n\n\n也可以通过`searchable`来自定义搜索表单\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> 3.7.0 及以上版本\n\n通过配置 `searchable` 支持选项检索\n\n\n\n如果需要更细节的配置，可以使用 `searchConfig`，详细配置项参考 search-box 组件\n\n#### 下拉数据源\n\n过滤器的数据域支持 API 接口和上下文数据(`3.6.0`及以上版本)\n\n\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如果你的数据并不是很大，而且后端不方便做分页和条件过滤操作，那么通过配置`loadDataOnce`实现前端一次性加载并支持分页和条件过滤操作。\n\n<div class=\"p-4 text-base text-gray-800 rounded-lg bg-gray-50\" role=\"alert\">\n <span class=\"font-medium text-gray-800 block\">温馨提示</span>\n <span class=\"block\">开启<code>loadDataOnce</code>后，搜索和过滤将交给组件处理，默认对所有字段采用模糊匹配（比如：<code>mi</code>将会匹配<code>amis</code>）。如果首次加载数据时设置了预设条件，导致接口返回的数据集合未按照此规则过滤，则可能导致切换页码后分页错误。此时有2种方案处理：</span>\n <span class=\"block\" style=\"text-indent: 2em\">1. 将接口返回的列表数据按照所有字段模糊匹配的规则处理</span>\n <span class=\"block\" style=\"text-indent: 2em\">2. 配置<a href=\"#匹配函数\"><code>matchFunc</code></a>，自定义处理过滤</span>\n</div>\n\n\n\n配置一次性加载后，基本的分页、快速排序操作将会在前端进行完成。如果想实现前端检索(目前是模糊搜索)，可以在 table 的 `columns` 对应项配置 `searchable` 来实现。\n\n\n\n> **注意：**如果你的数据量较大，请务必使用服务端分页的方案，过多的前端数据展示，会显著影响前端页面的性能\n\n另外前端一次性加载当有查寻条件的时候，默认还是会重新请求一次，如果配置 `loadDataOnceFetchOnFilter` 为 `false` 则为前端过滤。\n\n\n\n`loadDataOnceFetchOnFilter` 配置成 `true` 则会强制重新请求接口比如以下用法\n\n> 此时如果不配置或者配置为 `false` 是前端直接过滤，不过记得配置 name 为行数据中的属性，如果行数据中没有对应属性则不会起作用\n\n\n\n##### 匹配函数\n\n> `3.5.0` 及以上版本\n\n支持自定义匹配函数`matchFunc`，当开启`loadDataOnce`时，会基于该函数计算的匹配结果进行过滤，主要用于处理列字段类型较为复杂或者字段值格式和后端返回不一致的场景，函数签名如下：\n\n\n\n具体效果请参考。\n\n### 批量操作\n\n在`headerToolbar`或者`footerToolbar`数组中添加`bulkActions`字符串，并且在 crud 上配置`bulkActions`行为按钮数组，可以实现选中表格项并批量操作的功能。\n\n> 需要设置`primaryField`用于标识选中状态，配置当前行数据中的某一**唯一标识字段**，例如`id`，否则可能会出现无法选中的问题\n\n\n\n#### 批量操作数据域\n\n批量操作会默认将下面数据添加到数据域中以供**按钮行为**使用，需要注意的是**静态**和**批量操作**时的数据域是不同的。**静态数据域**是指渲染批量操作区域时能够获取到的数据，**批量操作数据域**是指触发按钮动作时能够获取到的数据，具体区别参考下表：\n\n| 属性名 | 类型 | 所属数据域 | 说明 | 版本 |\n| ----------------- | --------------------- | -------------- | ------------------------------------------------------------------------------------ | ------- |\n| `currentPageData` | `Array<Column>` | 静态, 批量操作 | 当前分页数据集合，`Column`为当前 Table 数据结构定义 | `2.4.0` |\n| `selectedItems` | `Array<Column>` | 静态, 批量操作 | 选中的行数据集合 |\n| `unSelectedItems` | `Array<Column>` | 静态, 批量操作 | 未选中的行数据集合 |\n| `items` | `Array<Column>` | 批量操作 | `selectedItems` 的别名 |\n| `rows` | `Array<Column>` | 批量操作 | `selectedItems` 的别名，推荐用 `items` |\n| `ids` | `string` | 批量操作 | 多个 id 值用英文逗号隔开，前提是行数据中有 id 字段，或者有指定的 `primaryField` 字段 |\n| `event` | `object` | 事件动作 | 可以通过`event.data`获取批量操作按钮上绑定的事件动作产生的数据 |\n| `...rest` | `Record<string, any>` | 批量操作 | 选中的行数据集合的首个元素的字段，注意列字段如果和以上字段重名时，会被上述字段值覆盖 |\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**当前页最大勾选数**\n\n如果不需要在分页、搜索后，保留用户选择，即不需要配置`keepItemSelectionOnPageChange`，可以通过配置`maxItemSelectionLength`属性限制当前页条目的最大勾选数\n\n\n\n`maxItemSelectionLength`也可以和`keepItemSelectionOnPageChange`搭配使用，起到和`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> 注意：导出 CSV 时，默认使用 CRUD 的接口数据，不导出「操作」列\n\n\n\n#### 通过 api 导出 CSV\n\n> 1.4.0 及以上版本\n\n`export-csv` 可以单独配置 `api` 实现导出全量功能，这个 api 的返回结果和 CRUD 类似\n\n\n\n#### 自定义导出 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> 注意：导出 Excel 时，默认不导出「操作」列\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#### 指定导出行\n\n> 3.2.0 及以上版本\n\n可以通过配置 `rowSlice` 属性来控制导出哪些行\n\n\n\n`rowSlice` 支持以下写法\n\n- 取单个值 '1,2,3'，代表取 1、2、3 索引的内容\n- 取范围 '3:10'，代表取 3-9 索引的内容\n - ':' 代表所有行\n - '1:' 代表从第二行开始到结束\n - 结束可以是负数 ':-1'，代表除了最后一个元素的所有元素，开始为空代表 0\n- 前两种的组合 '1,3:10'，代表取 1 索引和 3-9 索引的内容\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### 导出 Excel 模板\n\n> 6.1 及以上版本\n\n配置是 `export-excel-template` 和前面 `export-excel` 不同，这个功能只导出表头，主要用于线下填数据，可以配合 input-excel 组件来上传填好的内容。\n\n\n\n### 显隐显示查询条件表单\n\n在`headerToolbar`或者`footerToolbar`数组中添加`filter-toggler`字符串，并且在 crud 中配置`\"filterTogglable\": true`后，可以渲染一个可以切换显示查询表单的功能按钮\n\n\n\n还可以定制文案和按钮如：\n\n\n\n### 刷新按钮\n\n> 1.5.0 及以上版本\n\n可以通过 `reload` 来展现刷新按钮\n\n\n\n它其实是个简化的 `button` 组件，可以参考 `button` 组件的文档做调整。\n\n#### 刷新 CRUD 触发方式\n\n触发 CRUD 刷新的方式有 3 种：\n\n1. **reload 类型按钮**：使用`{\"type\": \"reload\", ...}`，CRUD 内部会对点击事件做处理\n2. **reload 动作按钮**：使用`{\"type\": \"action\", \"actionType\": \"reload\", \"target\": \"targetName\", ...}`，指定`target`为要刷新的 CRUD 组件的`name`\n3. **reload 事件动作**：使用，指定`id`为要刷新的 CRUD 组件的`id`\n\n\n\n刷新后默认会重置当前已选行数据，即使设置了 `keepItemSelectionOnPageChange` 为 `true`，也会重置。\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<Item>` 数组格式，新的顺序，数组里面包含所有原始信息。\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`syncLocation`开启后，数据域经过地址栏同步后，原始值被转化为字符串同步回数据域，但布尔值（boolean）同步后不符合预期数据结构，导致组件渲染出错。比如查询条件表单中包含，该配置默认开启。\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| deferApi | | | 当行数据中有 defer 属性时，用此接口进一步加载内容 |\n| loadDataOnce | `boolean` | | 是否一次性加载所有数据（前端分页） |\n| loadDataOnceFetchOnFilter | `boolean` | `true` | 在开启 loadDataOnce 时，filter 时是否去重新请求 api |\n| source | `string` | | 数据映射接口返回某字段的值，不设置会默认使用接口返回的`${items}`或者`${rows}`，也可以设置成上层数据源的内容 |\n| filter | | | 设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。 |\n| filterTogglable | `boolean` \\| `{label: string; icon: string; activeLabel: string; activeIcon?: string;}` | `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| pageDirectionField | `string` | `\"pageDir\"` | 分页方向字段名可能是 forward 或者 backward |\n| perPageAvailable | `Array<number>` | `[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| maxKeepItemSelectionLength | `number` | `true` | 和`keepItemSelectionOnPageChange`搭配使用，限制最大勾选数。 |\n| maxItemSelectionLength | `number` | `true` | 可单独使用限制当前页的最大勾选数，也可以和`keepItemSelectionOnPageChange`搭配使用达到和 maxKeepItemSelectionLength 一样的效果。 |\n| headerToolbar | Array | `['bulkActions', 'pagination']` | 顶部工具栏配置 |\n| footerToolbar | Array | `['statistics', 'pagination']` | 底部工具栏配置 |\n| alwaysShowPagination | `boolean` | `false` | 是否总是显示分页 |\n| affixHeader | `boolean` | `true` | 是否固定表头(table 下) |\n| affixFooter | `boolean` | `false` | 是否固定表格底部工具栏 |\n| autoGenerateFilter | `Object \\| boolean` | | 是否开启查询区域，开启后会根据列元素的 `searchable` 属性值，自动生成查询条件表单 |\n| resetPageAfterAjaxItemAction | `boolean` | `false` | 单条数据 ajax 操作后是否重置页码为第一页 |\n| autoFillHeight | `boolean` 丨 `{height: number}` | | 内容区域自适应高度 |\n| canAccessSuperData | `boolean` | `true` | 指定是否可以自动获取上层的数据并映射到表格行数据上，如果列也配置了该属性，则列的优先级更高 |\n| matchFunc | `string` | | 自定义匹配函数, 当开启`loadDataOnce`时，会基于该函数计算的匹配结果进行过滤，主要用于处理列字段类型较为复杂或者字段值格式和后端返回不一致的场景 | `3.5.0` |\n| parsePrimitiveQuery | | `true` | 是否开启 Query 信息转换，开启后将会对 url 中的 Query 进行转换，默认开启，默认仅转化布尔值 | `3.6.0` |\n\n注意除了上面这些属性，CRUD 在不同模式下的属性需要参考各自的文档，比如\n\n- 默认。\n- 模式。\n- 模式。\n\n### 列配置属性表\n\n除了 Table 组件默认支持的列配置，CRUD 的列配置还额外支持以下属性：\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------ | ------------------------------------------------------------ | ------- | --------------------------------------------------------------------------- | ---- |\n| sortable | `boolean` | `false` | 是否可排序 |\n| searchable | `boolean` \\| `Schema` | `false` | 是否可快速搜索，开启`autoGenerateFilter`后，`searchable`支持配置`Schema` |\n| filterable | `boolean` \\| | `false` | 是否可快速搜索，`options`属性为静态选项，支持设置`source`属性从接口获取选项 |\n| quickEdit | `boolean` \\| | - | 快速编辑，一般需要配合`quickSaveApi`接口使用 |\n| quickEditEnabledOn | `SchemaExpression` | - | 开启快速编辑条件 | |\n| textOverflow | `string` | `default` | 文本溢出后展示形式，默认换行处理。可选值 `ellipsis` 溢出隐藏展示， `noWrap` 不换行展示(仅在列为静态文本时生效) | `6.9.0` |\n\n#### QuickFilterConfig\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------- | ----------------------------------------- | ------- | -------------------------------------------------------- | --------------------------- |\n| options | `Array<any>` | - | 静态选项 | |\n| multiple | `boolean` | `false` | 是否支持多选 | |\n| source | \\| `string` | - | 选项 API 接口 | `3.6.0`版本后支持上下文变量 |\n| refreshOnOpen | `boolean` | `false` | 配置 source 前提下，每次展开筛选浮层是否重新加载选项数据 | `2.9.0` |\n| strictMode | `boolean` | `false` | 严格模式，开启严格模式后，会采用 JavaScript 严格相等比较 | `2.3.0` |\n\n#### QuickEditConfig\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| --------------- | ------------------------- | ----------- | ------------------------------------------------------------------------------------------------------- | ------- |\n| type | `SchemaType` | - | 表单项组件类型 | |\n| body | `SchemaCollection` | - | 组件容器，支持多个表单项组件 | |\n| mode | `'inline' \\| 'popOver'` | `'popOver'` | 编辑模式，inline 为行内编辑，popOver 为浮层编辑 | |\n| icon | `string` | - | 自定义快速编辑按钮的图标 | `6.1.0` |\n| saveImmediately | `boolean` 或 `{api: Api}` | `false` | 是否修改后即时保存，一般需要配合`quickSaveItemApi`接口使用，也可以直接配置 | |\n| resetOnFailed | `boolean` | - | 接口请求失败时，是否重置数据 | |\n\n### columns-toggler 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ------------------------------ | --------- | -------------------------------------- |\n| label | `string` | | 按钮文字 |\n| tooltip | `string` | | 按钮提示文字 |\n| disabledTip | `string` | | 按钮禁用状态下的提示 |\n| align | `\"left\" \\| \"right\"` | `\"left\"` | 点击内容是否关闭 |\n| size | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\"` | | 按钮大小，参考 |\n| footerBtnSize | `\"xs\" \\| \"sm\" \\| \"md\" \\| \"lg\"` | | 弹窗底部按钮大小，参考 |\n| level | `string` | `default` | 按钮样式，参考 |\n| draggable | `boolean` | `false` | 是否可通过拖拽排序 |\n| defaultIsOpened | `boolean` | `false` | 默认是否展开 |\n| hideExpandIcon | `boolean` | `true` | 是否隐藏展开的图标 |\n| overlay | `boolean` | `false` | 是否显示遮罩层 |\n| closeOnOutside | `boolean` | | 点击外部是否关闭 |\n| closeOnClick | `boolean` | | 点击内容是否关闭 |\n| iconOnly | `boolean` | `false` | 是否只显示图标。 |\n| icon | `string` | | 按钮的图标 |\n| className | `string` | | 外层 CSS 类名 |\n| btnClassName | `string` | | 按钮的 CSS 类名 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------- |\n| fetchInited | `responseData` 接口数据返回 <br /> `responseStatus` 接口返回状态 <br /> `responseMsg` 响应消息 | 远程初始化数据接口请求完成时触发 |\n| quickSaveSucc | `result` 接口数据返回 <br /> `rows: object[]` 修改了的行集合 <br /> `rowsDiff: object[]` 与 rows 不同的地方时，对象中只有修改的部分和主键字段 <br /> `indexes: Array<string>` 修改的行索引，如果是树形模式，下标是字符串路劲如 `0.1` <br /> `rowsOrigin: object[]` 原始数据 | 快速编辑完后保存成功触发 |\n| quickSaveFail | `error` 错误原因 | 快速编辑完后保存失败 |\n| quickSaveItemSucc | `result` 接口数据返回 <br /> `item: object` 当亲修改的那行数据 <br /> `modified:object` 质只包含修改的部分 <br /> `origin: object` 原始数据 | 快速编辑单条保存成功后触发 |\n| quickSaveItemFail | `error` 错误原因 | 快速编辑单条保存失败后触发 |\n| saveOrderSucc | `result` 接口数据返回 <br /> `其他` 请参考 章节说明 | 拖拽排序保存成功后触发 |\n| saveOrderFail | `error` 错误原因 | 拖拽排序保存失败后触发 |\n| selectedChange | `selectedItems: item[]` 已选择行<br/>`unSelectedItems: item[]` 未选择行 | 手动选择表格项时触发 |\n| columnSort | `orderBy: string` 列排序列名<br/>`orderDir: string` 列排序值 | 点击列排序时触发 |\n| columnFilter | `filterName: string` 列筛选列名<br/>`filterValue: string \\| undefined` 列筛选值 | 点击列筛选时触发，点击重置后事件参数`filterValue`为`undefined` |\n| columnSearch | `searchName: string` 列搜索列名<br/>`searchValue: object` 列搜索数据 | 点击列搜索时触发 |\n| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 |\n| columnToggled | `columns: item[]` 当前显示的列配置数据 | 点击自定义列时触发 |\n| rowClick | `item: object` 行点击数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 点击整行时触发 |\n| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 移入整行时触发 |\n| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 移出整行时触发 |\n\n### selectedChange\n\n在开启批量操作后才会用到，可以尝试勾选列表的行记录。\n\n\n\n### columnSort\n\n列排序，可以尝试点击`Browser`列右侧的排序图标。\n\n\n\n### columnFilter\n\n列过滤，可以尝试点击`Rendering engine`列右侧的筛选图标。\n\n\n\n### columnSearch\n\n列检索，，可以尝试点击`ID`列右侧的检索图标。\n\n\n\n### columnToggled\n\n点击自定义列，可以尝试修改`自定义列`的配置。\n\n\n\n### orderChange\n\n在开启拖拽排序行记录后才会用到，排序确认后触发。\n\n\n\n### rowClick\n\n点击行记录。\n\n\n\n### rowMouseEnter\n\n鼠标移入行记录。\n\n\n\n### rowMouseLeave\n\n鼠标移出行记录。\n\n\n\n### 列的事件表\n\n表格的默认列定义的事件如下，即 click、mouseenter、mouseleave。如果列定义是其他组件，则事件表就是这个组件对应的事件表，例如列定义是 Switch 组件，则可以监听 。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | ----------------------------------- | ---------------------------------------------- |\n| click | `[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |\n| mouseenter | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |\n| mouseleave | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移出事件，表格数据鼠标移出时触发 |\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| --------------- | --------------------- | -------------------------- |\n| reload | - | 刷新列表请求 |\n| setValue | `value: object` | 更新列表记录 |\n| select | 转 table 组件动作说明 | 设置选中项 |\n| selectAll | 转 table 组件动作说明 | 设置表格全部项选中 |\n| clearAll | 转 table 组件动作说明 | 清空表格所有选中项 |\n| initDrag | 转 table 组件动作说明 | 开启表格拖拽排序功能 |\n| cancelDrag | 转 table 组件动作说明 | 取消表格拖拽排序功能 |\n| submitQuickEdit | 转 table 组件动作说明 | 快速编辑数据提交 |\n| toggleExpanded | 转 table 组件动作说明 | 切换某行数据是展开还是收起 |\n| setExpanded | 转 table 组件动作说明 | 展开或收起某行数据 |\n\nvalue 结构说明：\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | -------- | ------ | -------- |\n| items 或 rows | `item[]` | | 列表记录 |\n| count 或 total | `number` | | 记录总数 |\n\n### 初始选中行\n\n利用 `fetchInited` 事件和 `select` 动作可以完成初始选中行。\n\n\n\n### reload\n\n#### 只做刷新\n\n重新发送`api`请求，刷新 CRUD 时，只配置`componentId`目标组件 ID 即可。\n\n\n\n#### 追加请求参数并刷新\n\n刷新 CRUD 时，如果配置了`data`，将先发送`data`给目标 CRUD 组件，并将该数据合并到目标 CRUD 组件的数据域中，然后重启请求数据，并且自动追加`data`参数到请求中。\n\n\n\n通过`&: $$`追加触发事件的按钮所在数据域的所有数据，即`name、age、date`。\n\n\n\n#### 局部刷新（仅刷新指定行）\n\n> `6.3.0`及以上版本\n\n需要搭配 `deferApi` 属性使用，同时刷新动作指定 `args.index` 或者 `args.condition` 来指定刷新哪一行。\n\n\n\n### toggleExpanded\n\n> `6.3.0`及以上版本\n\n切换展开状态。通过指定 `args.index` 或者 `args.condition` 来指定切换哪一行。\n\n参考局部刷新里面的示例。\n\n### setExpanded\n\n> `6.3.0`及以上版本\n\n设置展开状态。通过指定 `args.index` 或者 `args.condition` 来指定切换哪一行，通过 `args.value` 来设置是展开还是收起。\n\n参考局部刷新里面的示例。\n\n### setValue\n\n通过`setValue`更新指定 CRUD 的数据。\n\n#### 合并数据\n\n默认`setValue`会将新数据与目标组件数据进行合并。\n\n\n\n#### 覆盖数据\n\n可以通过`\"dataMergeMode\": \"override\"`来覆盖目标组件数据。\n\n\n\n#### 更新列表记录\n\n\n\n#### 更新指定行记录\n\n可以通过指定`index`或者`condition`来分别更新指定索引的行记录和指定满足条件（条件表达式或者 ConditionBuilder）的行记录，另外`replace`同样生效，即可以完全替换指定行记录，也可以对指定行记录做合并。\n\n\n\n#### 提交数据更改\n\n通过表达式或者行号更新数据后，并不会提交到后端，需要添加 `submitQuickEdit` 动作来提交。\n\n\n\n#### 行记录中字段赋值\n\n需要通过表达式配置动态`id`和`componentId`。例如修改`engine`选中状态的同时选中`version`，勾选`id`的同时去掉对`engine`的选中。\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 2.0 实现自定义组件：\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 <ol>\n <li v-for=\"todo in todos\">\n {{ todo.text }}\n </li>\n </ol>\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', '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## 设置展示时区\n\n通过配置 `displayTimeZone` 参数，可以设置展示时区，默认展示当前时区。\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| displayFormat | `string` | `YYYY-MM-DD` | 展示格式, 更多格式类型请参考 | 版本号 3.4.0 及以上支持 |\n| valueFormat | `string` | `X` | 数据格式，默认为时间戳。更多格式类型请参考 |\n| fromNow | `boolean` | `false` | 是否显示相对当前的时间描述，比如: 11 小时前、3 天前、1 年前等，fromNow 为 true 时，format 不生效。 |\n| updateFrequency | `number` | `60000` | 更新频率， 默认为 1 分钟 |\n| displayTimeZone | `string` | | 设置日期展示时区，可设置清单参考：https://gist.github.com/diogocapela/12c6617fc87607d11fd62d2a4f42b02a |\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`。请注意点击“新增”按钮后 dialog 内 form 的数据域会直接继承 CRUD 所在的数据域，如果 CRUD 过滤器中查询字段和 dialog 表单中的字段相同时，会错误的将外部数据映射到表单数据域内，需要配置数据映射将相关字段绑定的数据删除`{\"&\": \"$$\", \"status\": \"__undefined\"}`\n\n## 多级弹框\n\n\n\n## 动作后关闭弹框\n\n在弹框中配置行为按钮，可以在按钮上配置`\"close\": true`，在行为完成后，关闭当前弹框。\n\n\n\n以上例子是关闭当前弹窗，如果希望关闭上层弹窗，则需要给目标弹窗设置 `name` 属性，然后配置按钮 `close` 属性为目标 `name` 属性如：\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\": false` 来禁止该默认特性。\n\n\n\n## feedback 反馈弹框\n\nfeedback 反馈弹框是指，在 ajax 请求后，可以显示一个弹框，进行反馈操作\n\n### feedback 基本使用\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`、`xl`、`full` |\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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------------------------ | ------------------ |\n| confirm | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |\n| cancel | `event.data: object` 弹窗数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击取消时触发 |\n\n### confirm\n\n\n\n### cancel\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ------------ |\n| confirm | - | 确认（提交） |\n| cancel | - | 取消（关闭） |\n| setValue | `value: object` 更新的数据 | 更新数据 |\n\n### confirm 动作\n\n\n\n### cancel 动作\n\n\n\n### setValue 动作\n\n通过`setValue`更新指定弹窗的数据。\n\n#### 合并数据\n\n默认`setValue`会将新数据与目标组件数据进行合并。\n\n\n\n#### 覆盖数据\n\n可以通过`\"dataMergeMode\": \"override\"`来覆盖目标组件数据。\n\n\n","path":"/zh-CN/components/dialog"},{"title":"Divider 分割线","body":"\n## 基本用法\n\n\n\n## 不同样式\n\n\n\n## 带标题的分割线\n\n> `3.5.0`及以上版本\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| --------- | -------- | ------------ | --------------------------------------- |---------- |\n| type | `string` | | `\"divider\"` 指定为 分割线 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| lineStyle | `string` | `solid` | 分割线的样式，支持`dashed`和`solid` |\n| direction | `string` | `horizontal` | 分割线的方向，支持`horizontal`和`vertical` | `3.5.0` |\n| color | `string` | | 分割线的颜色 | `3.5.0` |\n| rotate | `number` | | 分割线的旋转角度 | `3.5.0` |\n| title | | | 分割线的标题 | `3.5.0` |\n| titleClassName | `string` | | 分割线的标题类名 | `3.5.0` | \n| titlePosition | `string` | `center`| 分割线的标题位置，支持`left`、`center`和`right` | `3.5.0` |\n \n","path":"/zh-CN/components/divider"},{"title":"Drawer 抽屉","body":"\n## 基本用法\n\n\n\n## 多级弹框\n\n可以嵌套使用。\n\n\n\n## 指定弹出方向\n\n通过配置 `position`，可以指定抽屉弹出的方向，可选 `left`、`right`、`top` 和 `bottom`。默认为 `right`。\n\n\n\n## 抽屉尺寸\n\n通过设置 `size` 来控制抽屉的大小，可选值：`xs`、`sm`、`md`、`lg` 和 `xl`。\n\n\n\n## 自定义抽屉尺寸\n\n通过设置 `width`（`position` 为 `left` 或 `right` 时生效）和 `height`（`position` 为 `top` 或 `bottom` 时生效）来控制抽屉的尺寸。\n\n值如果是数字类型，单位默认使用 `px`, 如果是字符串类型，可以使用自定义 css 宽度变量，如：`%`、`vw`、`px` 等。\n\n\n\n## 可拖拽抽屉大小\n\n配置 `\"resizable\": true`，可以拖拽调整 `drawer` 大小。\n\n\n\n## 是否展示关闭按钮\n\n配置 `\"showCloseButton\": false`，可以隐藏关闭按钮。\n\n\n\n## 蒙层显示\n\n通过配置 `overlay`，来控制是否显示蒙层。默认为 `true`。\n\n\n\n## 关闭方式\n\n通过配置 `closeOnOutside`，即可在点击抽屉外部时，直接关闭抽屉。\n\n同时可以配置 `closeOnEsc`，让抽屉支持 <kbd>Esc</kbd> 键关闭。\n\n\n\n## 动作后关闭抽屉\n\n在抽屉中配置行为按钮，可以在按钮上配置 `\"close\": true`，在行为完成后，关闭当前抽屉。\n\n\n\n以上例子是关闭当前抽屉，如果希望关闭上层抽屉，则需要给目标抽屉设置 `name` 属性，然后配置按钮 `close` 属性为目标 `name` 属性如：\n\n\n\n> 3.3.0 及以上版本\n\n如果是表单，可以在表单上配置 `close: false`。\n\n\n\n## 配置抽屉的按钮\n\n默认抽屉会自动生成两个按钮，一个取消，一个确认。如果通过 `actions` 来自定义配置，则以配置的为准。\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` | `right` | 指定 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` | 是否支持按 <kbd>Esc</kbd> 关闭 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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过 `onEvent` 来监听这些事件，并通过 `actions` 来配置执行的动作，在 `actions` 中可以通过 `${事件参数名}` 或 `${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------------------------ | ------------------ |\n| confirm | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击确认提交时触发 |\n| cancel | `event.data: object` 抽屉数据<br/>`[name]: any` 当前数据域中指定字段的值 | 点击取消时触发 |\n\n### confirm\n\n\n\n### cancel\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定 `actionType: 动作名称`、`componentId: 该组件id` 来触发这些动作，动作配置可以通过 `args: {动作配置项名称: xxx}` 来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ------------ |\n| confirm | - | 确认（提交） |\n| cancel | - | 取消（关闭） |\n| setValue | `value: object` 更新的数据 | 更新数据 |\n\n### confirm 动作\n\n\n\n### cancel 动作\n\n\n\n### setValue 动作\n\n通过 `setValue` 更新指定抽屉的数据。\n\n#### 合并数据\n\n默认 `setValue` 会将新数据与目标组件数据进行合并。\n\n\n\n#### 覆盖数据\n\n可以通过 `\"dataMergeMode\": \"override\"` 来覆盖目标组件数据。\n\n\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<DropdownButton>` | | 配置下拉按钮 |\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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | ---------------------------- | --------------------------------------- |\n| mouseenter | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移入时触发 |\n| mouseleave | items: Array<DropdownButton> | 触发方式为 hover 模式下，鼠标移出时触发 |\n\n### mouseenter\n\n\n\n### mouseleave\n\n\n\n## 动作表\n\n暂无\n","path":"/zh-CN/components/dropdown-button"},{"title":"Each 循环渲染器","body":"\n## 基本用法\n\n通过 name 属性指定要循环的数组，items 属性指定循环的内容。\n\n\n\n### 如果是对象数组\n\n如果数组中的数据是对象，可以直接使用内部变量 xxx 来获取，或者通过 `item.xxxx`。另外能用 index 来获取数组索引。\n\n> 如果成员对象本身也有名字为 index 的字段就会覆盖到，获取不到索引了，请查看「循环嵌套」的章节解决\n\n\n\n### 循环嵌套\n\n如果存在嵌套使用，通过默认的 `item` 或者 `index` 始终是拿的最里面那层的信息，想要获取上层 each 的信息，则需要自定义 `itemKeyName` 和 `indexKeyName` 来指定字段名。\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> 3.5.0 版本开始支持\n\n表单项支持通过表达式配置动态表单项，可结合 `each` 组件一起使用。\n\n\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| itemKeyName | `string` | `item` | 获取循环当前数组成员 |\n| indexKeyName | `string` | `index` | 获取循环当前索引 |\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按钮可支持角标，在 options 中配置\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<object>`或`Array<string>` | | |\n| option.badge | `object` | | | `2.8.1` |\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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ---------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### reload\n\n只有选择器模式支持，即配置`source`，用于重新加载选择器的数据源。\n\n\n\n### setValue\n\n\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<object>`或`Array<string>` | | |\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当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ---------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据，多个值用`,`分隔 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### reload\n\n只有选择器模式支持，即配置`source`，用于重新加载选择器的数据源。\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/form/chain-select"},{"title":"ChartRadios 图表单选框","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| 属性名 | 类型 | 默认值 | 说明 |\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当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------- | ------------------ |\n| change | `[name]: boolean` 组件的值 | 选中状态变化时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string \\|number \\|boolean` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/form/checkbox"},{"title":"Checkboxes 复选框","body":"\n用于实现多选。\n\n## 基本用法\n\n\n\n## 结果是数组模式\n\n默认是拼接成字符串，如果希望结果是数组，可以设置 `\"joinValues\": false`\n\n\n\n如果只想提取 value，需要加上 `\"extractValue\": true`\n\n\n\n## 显示全选\n\n通过 `checkAll` 属性配置全选\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> 2.0.0 及以上版本\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\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| menuTpl | `string` | | 支持自定义选项渲染 |\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| optionType | `default` \\| `button` | `default` | 按钮模式 |\n| itemClassName | `string` | | 选项样式类名 |\n| labelClassName | `string` | | 选项标签样式类名 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------------------------------- | ----------------------------------------------------------------------------------------- | ------------------ |\n| change | `[name]: string` 选中值 | 选中值变化时触发 |\n| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 新增的节点信息<br/>`items: object[]`选项集合 | 新增节点提交时触发 |\n| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`item: object` 编辑的节点信息<br/>`items: object[]`选项集合 | 编辑节点提交时触发 |\n| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 删除的节点信息<br/>`items: object[]`选项集合 | 删除节点提交时触发 |\n\n### change\n\n\n\n### addConfirm\n\n配置 `creatable`后，可监听确认新增操作。\n\n\n\n### editConfirm\n\n配置 `editable`后，可监听确认编辑操作。\n\n\n\n### deleteConfirm\n\n配置 `removable`后，可监听确认删除操作。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据，多个值用`,`分隔 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### reload\n\n只有选择器模式支持，即配置`source`，用于重新加载选择器的数据源。\n\n\n\n### setValue\n\n\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也可以使用变量配置`minLength`和`maxLength`\n\n> 2.4.1 及以上版本\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<Condition> 数组，每个成员是一种类型\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默认删除单项按钮为\"x\"，可以通过配置 deleteBtn 属性自定义删除单项按钮，目前 deleteBtn 支持的属性有\n`string`和类型\n\n如下，当 deleteBtn 为`string`时，对应的值会被渲染成文本\n\n\n\n如果想要赋予删除按钮更多能力，则需要将 deleteBtn 配置成类型，还可以利用`index`参数动态控制按钮的显隐或禁用状态等。\n\n\n\n## 自定义新增按钮\n\n可以通过配置 `addBtn` 属性自定义新增按钮，在非 Tabs 模式下生效。目前 `addBtn` 支持属性 类型\n\n如果仅想更改新增按钮文本请使用 `addButtonText`, 仅想增添样式请使用 `addButtonClassName`\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------ | ---------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| formClassName | `string` | | 单组表单项的类名 |\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` | | 最少添加的条数，`2.4.1` 版本后支持变量 |\n| maxLength | `number` | | 最多添加的条数，`2.4.1` 版本后支持变量 |\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| addattop | `boolean` | `false` | 在顶部添加 |\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| subFormHorizontal | `Object` | `{\"left\":2, \"right\":10, justify: false}` | 当 subFormMode 为 `horizontal` 时有用，用来控制 label 的展示占比 |\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<string>` | `[]` | 配置同步字段。只有 `strictMode` 为 `false` 时有效。如果 Combo 层级比较深，底层的获取外层的数据可能不同步。但是给 combo 配置这个属性就能同步下来。输入格式：`[\"os\"]` |\n| nullable | `boolean` | `false` | 允许为空，如果子表单项里面配置验证器，且又是单条模式。可以允许用户选择清空（不填）。 |\n| itemClassName | `string` | | 单组 CSS 类 |\n| itemsWrapperClassName | `string` | | 组合区域 CSS 类 |\n| deleteBtn | or `string` | 自定义删除按钮 | 只有当`removable`为 `true` 时有效; 如果为`string`则为按钮的文本；如果为`Button`则根据配置渲染删除按钮。 |\n| addBtn | | 自定义新增按钮 | 可新增自定义配置渲染新增按钮，在`tabsMode: true`下不生效。 |\n| addButtonClassName | `string` | | 新增按钮 CSS 类名 |\n| addButtonText | `string` | `\"新增\"` | 新增按钮文字 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |\n| add | `[name]: object \\| object[]` 组件的值 | 添加组合项时触发 |\n| delete | `key: number` 移除项的索引<br />`item: object` 移除项<br />`[name]: object \\| object[]` 组件的值 | 删除组合项时触发 |\n| dragEnd | `index: number` 拖拽后的索引<br />`oldIndex: number` 拖拽前的索引<br />`item: object` 被拖拽的项<br />`value: object[]` 拖拽后组合项的值<br />`oldValue: object \\| object[]` 拖拽前组合项的值<br />`[name]: object \\| object[]` 组件的值 | 当组合项拖拽结束且位置发生变化时触发，`6.1.1` 版本后支持 |\n| tabsChange | `key: number` 选项卡索引<br />`item: object` 激活项<br />`[name]: object \\| object[]` 组件的值 | 当设置 tabsMode 为 true 时，切换选项卡时触发 |\n\n### add\n\n\n\n### delete\n\n\n\n### tabsChange\n\n监听 tab 切换，获取被激活的索引。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |\n| addItem | `item: object` 新增项的值 | 只有开启`multiple`模式才能使用, `multiple`模式下，给新增项添加默认值 |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: object \\| Array<object>` 更新的值<br/>`index?: number` 指定更新的数据索引， 1.10.1 及以上版本引入 | 更新数据，对象数组针对开启`multiple`模式, `multiple`模式下可以通过指定`index`来更新指定索引的数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n#### 复制数值\n\n> 1.10.1 及以上版本\n\n此示例主要用来演示如何通过已有数据快速填充 combo 某条数据。点击 copy 按钮会弹出一个 crud 列表，点击对应行上的复制按钮，将选中数据填充到外层的 combo.\n\n> 注意事项：\n>\n> 1. 需要给 combo 设置个 id 属性，用来给事件动作指定目标用。\n> 2. 弹窗按钮配置了数据映射 `{comboIndex: \"${index}\"}` 因为 crud 的行数据上也有 index 变量，派送动作时获取 index 变量是 crud 所在行的序号。所以弹出弹窗的时候，先把 combo 的序号赋值给 comboIndex\n> 3. crud 操作栏里面添加了个按钮，close: true 设置是让动作完成后关闭弹窗。\n> 4. 按钮里面添加了 onEvent 配置，click 时做 `setValue` 动作，并设置参数 index 为 '${comboIndex}' 值为 `${&}`。其中 `${&}` 是特殊语法，用来取整个上下数据。\n\n\n\n#### 更新所有记录\n\n\n\n#### 更新指定行记录\n\n\n\n#### 行记录内表单项联动\n\n在 combo 中行记录内表单项联动需要指定`componentName`为需要联动的表单项名称，以下示例中，当选择指定行内第一个下拉框的值时，将对应的修改所在行内第二个下拉框的值。\n\n\n\n通过来联动时比较特殊，需要配置动态的`componentId`或`componentName`，一般使用`index`索引来区分指定的表单项。例如下面的示例中，每行的第一个下拉框的选择来决定所在行记录中的第二个下拉框是否显示。\n\n\n\n#### 嵌套结构中行记录内表单项联动\n\n这里所说的是列表结构数据的嵌套。下面的示例中，combo 内包含一个表格编辑框，即 combo 数据是一个列表结构，它的记录中嵌套了另一个列表结构（input-table）。想要实现 input-table 内行记录【修改】操作只更新所在行记录中的表单项。通过`componentName`来指定所需更新的字段名，它将帮你定位到当前操作行。\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` 默认为 `\"select_equals\"`\n- `options` 选项列表，`Array<{label: string, value: any}>`\n- `source` 动态选项，请配置 api。\n- `searchable` 是否可以搜索\n- `autoComplete` 自动提示补全，每次输入新内容后，将调用接口，根据接口返回更新选项。\n- `maxTagCount` 可以限制标签的最大展示数量，超出数量的部分会收纳到 Popover 中，可以通过 `overflowTagPopover` 配置 Popover 相关的属性，注意该属性仅在多选模式开启后生效。\n\n\n\n配置`autoComplete`属性后，每次输入新内容后会自动调用接口加载新的选项，用数据映射，获取变量 term，为当前输入的关键字。\n\n\n\n### 自定义\n\n- `type` 字段配置中配置成 `\"custom\"`\n- `label` 字段名称\n- `placeholder` 占位符\n- `operators` 默认为空，需配置自定义判断条件，支持字符串或 key-value 格式\n- `defaultOp` 默认操作符\n- `value` 字段配置右边值需要渲染的组件，支持 amis 输入类组件或自定义输入类组件\n- `defaultValue` 右边值的默认值\n\n\n\n其中`operators`通过配置 values 还支持右边多个组件的渲染，`right`值格式为对象，`key`为组件的`name`\n\n\n\n## 字段选项远程拉取\n\n- 方式 1 配置 `source` 接口返回的数据对象 `data` 中存在 fields 变量即可。\n- 方式 2 关联上下文变量如 `source: \"${xxxxField}\"`\n\n\n\n## 字段选项类型\n\n> 2.3.0 及以上版本\n\n通过 selectMode 配置组合条件左侧选项类型，可配置项为`list`、`tree`、`chained`，默认为`list`。这三个数据格式基本类似，只是下拉框展示方式不同，`tree`是树形下拉，`chained`为多个级联的下拉。当存在多层 children 嵌套时，建议使用`tree`。\n\nselectMode 为`list`时\n\n\n\nselectMode 为`tree`时\n\n\n\n> 3.2.0 及以上版本\n\nselectMode 为`chained`时，使用`fields`字段\n\n\n\nselectMode 为`chained`时，使用`source`字段\n\n\n\n## 简易模式\n\n通过 builderMode 配置为简易模式，在这个模式下将不开启树形分组功能，输出结果只有一层，方便后端实现简单的 SQL 生成。\n\n\n\n在这个模式下还可以通过 `showANDOR` 来显示顶部的条件类型切换\n\n\n\n## 非内嵌模式\n\n当表单区域较窄时，可以使用非内嵌模式，弹窗设置具体信息\n\n\n\n## 拖拽控制\n\n当`draggable`为`false`时，关闭拖拽\n\n\n\n## 配合公式编辑器\n\n> `3.2.0` 及以上版本\n\n可以配置`formula`属性，将字段输入控件变成公式编辑器。\n\n\n\n## 开启条件设置\n\n通过配置 `showIf` 开启，开启后条件中额外还能配置启动条件。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| -------------------- | ----------------------------------- | -------- | ------------------------------------------------------------------------------------------------------------- | ------- |\n| className | `string` | | 外层 dom 类名 |\n| fieldClassName | `string` | | 输入字段的类名 |\n| source | `string` | | 通过远程拉取配置项 |\n| embed | `boolean` | true | 内嵌展示 |\n| title | `string` | | 弹窗配置的顶部标题 |\n| fields | | | 字段配置 |\n| showANDOR | `boolean` | | 用于 simple 模式下显示切换按钮 |\n| showNot | `boolean` | | 是否显示「非」按钮 |\n| draggable | `boolean` | true | 是否可拖拽 |\n| searchable | `boolean` | | 字段是否可搜索 |\n| selectMode | `'list'` \\| `'tree'` \\| `'chained'` | `'list'` | 组合条件左侧选项类型。`'chained'`模式需要`3.2.0及以上版本` |\n| addBtnVisibleOn | `string` | | 表达式：控制按钮“添加条件”的显示。参数为`depth`、`breadth`，分别代表深度、长度。表达式需要返回`boolean`类型 | `3.2.0` |\n| addGroupBtnVisibleOn | `string` | | 表达式：控制按钮“添加条件组”的显示。参数为`depth`、`breadth`，分别代表深度、长度。表达式需要返回`boolean`类型 | `3.2.0` |\n| inputSettings | `InputSettings` | | 开启公式编辑模式时的输入控件类型 | `3.2.0` |\n| formula | `object` | | 字段输入控件变成公式编辑器。 | `3.2.0` |\n| showIf | `boolean` | | 开启后条件中额外还能配置启动条件。 | `3.2.0` |\n| formulaForIf | `object` | | 给 showIF 表达式用的公式信息 | `3.4.0` |\n\n### InputSettings\n\n\n","path":"/zh-CN/components/form/condition-builder"},{"title":"Control 表单项包裹","body":"\n展示类的组件，如果直接放在表单项里面，不会有 `label` 和 `description` 之类的信息展示。\n\n\n\n如果想像文本输入框一样，可以配置 `label` 和 `description`，则可以通过这个组件包裹一下。\n\n\n","path":"/zh-CN/components/form/control"},{"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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ------------------------ |\n| change | `[name]: string` 组件的值 | 代码变化时触发 |\n| focus | `[name]: string` 组件的值 | 右侧输入框获取焦点时触发 |\n| blur | `[name]: string` 组件的值 | 右侧输入框失去焦点时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------------------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| focus | - | 获取焦点，焦点落在右侧编辑面板 |\n| setValue | `value: string` 更新的右侧编辑面板中的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### focus\n\n\n\n### setValue\n\n\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\namis 的编辑器是基于 monaco 开发的，如果想进行深度定制，比如自动完成功能，可以通过自定义 `editorDidMount` 属性来获取到 monaco 实例，它有两种写法，一种是在 JS 中直接用函数，示例如下：\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| placeholder | `string` | | 占位描述，没有值的时候展示 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------- |\n| change | `[name]: string` 组件的值 | 代码变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| focus | - | 获取焦点 |\n| setValue | `value: string` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### focus\n\n\n\n### setValue\n\n\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## 属性表\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| size | string | `` | 大小，支持 xs、sm、base、md、lg |\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> 2.4.0 及以上版本\n\n##### 静态配置\n\n通过配置`\"static\": true`来将表单项以静态形式展示 \n可以在查看支持静态展示的表单项的展示方式\n\n\n\n##### 通过条件配置静态/输入态\n\n也可以通过配置`staticOn`，来实现在某个条件下将当前表单项状态的的自动切换.\n\n\n\n##### 自定义展示态的展示方式\n\n通过配置`staticSchema`，可以自定义静态展示时的展示方式\n\n\n\n##### 限制选择器类组件的展示数量\n\n下拉选择器、多选框等组件，当选项过多静态展示时，若全部展示会占用页面很多空间，所以默认进行了限制（10 个） \n可以通过配置`staticSchema.limit`，可以自定义静态展示时的数量\n\n\n\n##### 通过事件动作切换表单项状态\n\n也支持使用 事件动作 切换表单项的 输入态和展示态（静态），也可以使用动作对整个表单进行状态切换\n\n\n\n##### 表单项静态展示优先级\n\n1. 表单项配置为`static: true` 时，始终保持静态展示；\n\n\n\n2. 表单项配置为`static: false` 或 `不配置` 时，跟随父表单的状态；\n\n\n\n3. 使用 `事件动作` 切换表单项 的 静态/展示态，优先级最高，将无视 `schema` 配置\n\n\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> 1.10.0 及之后版本（备注：可通过 1.9.1-beta.12 及之后版本提前试用）\n\n`value`支持表达式，也就是说可以直接配置类似于这样的语法：`${xxx}`，如果想要获取当前数据域中的某个变量，可以设置该表单项`value`为`${name1}`，如下：\n\n\n\n`value`也支持表达式运算，可以配置类似于这样的语法：`${num1 + 2}`，如下：\n\n\n\n`value`表达式支持，可以配置类似于这样的语法：`${window:document.title}`，意思是从全局变量中取页面的标题。如下：\n\n\n\n**tip：** value 表达式（`${xxx}`）支持 模板字符串、链式取值、过滤器，详细用法参考。\n\n我们也可以不设置 value 表达式，通过 name 来映射当前数据域中某个字段。比如我们表单数据域中有变量`\"text1\": \"hello world!\"`，然后我们设置表达项`\"name\": \"text1\"`，这样就可以自动映射值了。如下：\n\n\n\n关于优先级问题，当我们同时设置了 value 表达式`${xxx}`和`name`值映射，会优先使用 value 表达式`${xxx}`。只有当 value 为普通字符串`非${xxx}`时，才会使用`name`值映射。如下：\n\n\n\n**tip：** 默认在解析表达式时，遇到`$`字符会尝试去解析该变量并替换成对应变量，如果你想输出纯文本`\"${xxx}\"`，那么需要在`$`前加转义字符`\"\\\\\"`，即`\"\\\\${xxx}\"`，如下所示：\n\n\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/packages/amis-ui/src/locale/zh-CN.ts#L250\n\n\n\n### 表单项值发生变化即校验\n\n默认校验是当进行行为操作时，对表单项进行校验，如果你想每次表单项的值发生变化的时候就校验，请配置`\"validateOnChange\": true`\n\n### 支持的格式校验\n\n| 规则名称 | 说明 | 定义 | 版本 |\n| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------- |\n| `isEmail` | 必须是 Email。 | `(value: any) => boolean` | |\n| `isUrl` | 必须是 Url。 | `(value: any) => boolean` | |\n| `isNumeric` | 必须是 数值。 | `(value: any) => boolean` | |\n| `isAlpha` | 必须是 字母。 | `(value: any) => boolean` | |\n| `isAlphanumeric` | 必须是 字母或者数字。 | `(value: any) => boolean` | |\n| `isInt` | 必须是 整形。 | `(value: any) => boolean` | |\n| `isFloat` | 必须是 浮点形。 | `(value: any) => boolean` | |\n| `isLength:length` | 是否长度正好等于设定值。 | `(value: any) => boolean` | |\n| `minLength:length` | 最小长度。 | `(value: any, length: number) => boolean` | |\n| `maxLength:length` | 最大长度。 | `(value: any, length: number) => boolean` | |\n| `maximum:number` | 最大值。 | `(value: any, maximum: number) => boolean` | |\n| `minimum:number` | 最小值。 | `(value: any, minimum:number) => boolean` | |\n| `equals:xxx` | 当前值必须完全等于 xxx。 | `(value: any, targetValue: any) => boolean` | |\n| `equalsField:xxx` | 当前值必须与 xxx 变量值一致。 | `(value: any, field: string) => boolean` | |\n| `isJson` | 是否是合法的 Json 字符串。 | `(value: any) => boolean` | |\n| `isUrlPath` | 是 url 路径。 | `(value: any) => boolean` | |\n| `isPhoneNumber` | 是否为合法的手机号码 | `(value: any) => boolean` | |\n| `isTelNumber` | 是否为合法的电话号码 | `(value: any) => boolean` | |\n| `isZipcode` | 是否为邮编号码 | `(value: any) => boolean` | |\n| `isId` | 是否为身份证号码，支持 18 位和 15 位验证，单个验证请使用 `isId18` / `isId15` | `(value: any) => boolean` |\n| `matchRegexp:/foo/` | 必须命中某个正则。 | `(value: any, regexp: string \\| RegExp) => boolean` | |\n| `matchRegexp${n}:/foo/` | 必须命中某个正则。 设置正则表达式时属性名需以 `matchRegexp` 开头，`n`支持`1-9`，且 `validations` 及 `validationsErrors` 中属性名需匹配。 | `(value: any, regexp: string \\| RegExp) => boolean` | |\n| `isDateTimeSame` | 日期和目标日期相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetDate: any, granularity?: string) => boolean` | `2.2.0` |\n| `isDateTimeBefore` | 日期早于目标日期，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetDate: any, granularity?: string) => boolean` | `2.2.0` |\n| `isDateTimeAfter` | 日期晚于目标日期，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetDate: any, granularity?: string) => boolean` | `2.2.0` |\n| `isDateTimeSameOrBefore` | 日期早于目标日期或和目标日期相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetDate: any, granularity?: string) => boolean` | `2.2.0` |\n| `isDateTimeSameOrAfter` | 日期晚于目标日期或和目标日期相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetDate: any, granularity?: string) => boolean` | `2.2.0` |\n| `isDateTimeBetween` | 日期处于目标日期范围，支持指定粒度和区间的开闭形式，默认到毫秒 `millisecond`，左右开区间`'()'` | `(value: any, lhs: any, rhs: any, granularity?: string, inclusivity?: '()' \\| '[)' \\| '(]' \\| '[]') => boolean` | `2.2.0` |\n| `isTimeSame` | 时间和目标时间相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetTime: any, granularity?: string) => boolean` | `2.2.0` |\n| `isTimeBefore` | 时间早于目标时间，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetTime: any, granularity?: string) => boolean` | `2.2.0` |\n| `isTimeAfter` | 时间晚于目标时间，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetTime: any, granularity?: string) => boolean` | `2.2.0` |\n| `isTimeSameOrBefore` | 时间早于目标时间或和目标时间相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetTime: any, granularity?: string) => boolean` | `2.2.0` |\n| `isTimeSameOrAfter` | 时间晚于目标时间或和目标时间相同，支持指定粒度，默认到毫秒 `millisecond` | `(value: any, targetTime: any, granularity?: string) => boolean` | `2.2.0` |\n| `isTimeBetween` | 时间处于目标时间范围，支持指定粒度和区间的开闭形式，默认到毫秒 `millisecond`，左右开区间`'()'` | `(value: any, lhs: any, rhs: any, granularity?: string, inclusivity?: '()' \\| '[)' \\| '(]' \\| '[]') => boolean` | `2.2.0` |\n| `isVariableName` | 是否为合法的变量名，默认规则为 `/^[a-zA-Z_]+[a-zA-Z0-9]*$/` 可以自己指定如 `{isVariableName: /^a.*$/}` | `(value: any) => boolean` | `2.5.0` |\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通过配置 \"autoFill.api\" 为自动填充数据源接口地址；amis 可以将返回数据自动填充到表单中，例如如下配置；\n\n\n\n自动填充接口返回格式如下：\n注意：amis 仅处理接口返回结果仅有一项的数据，默认自动填充相关字段\n\n\n\n或者是\n\n\n\n### 配置参照录入\n\n设置 autoFill.showSuggestion 为 true；同时在 autoFill 中配置如下示例参数，可以进行数据的参照录入「当前表单项聚焦或者值变化时弹出 dialog/drawer/popOver 供用户操作」例如如下配置\n\nfillMapping 配置 支持变量取值和表达式；\n如下配置中，如果想一次选中多条数据并映射可如下配置表达式，其中 items 默认为选中的 1 至 N 条数据：\n仅挑选 platform,version 字段追加数据并去重：combo：'${UNIQ(CONCAT(combo, ARRAYMAP(items, item => {platform: item.platform, version: item.version})))}'\n数据替换并去重：combo：'${UNIQ(ARRAYMAP(items, item => {platform: item.platform, version: item.version}))}'\n数据替换：combo: ${items}\n\n`autoFill.defaultSelection` 可以用来配置默认选中\n\n\n\n## 及时获取其他表单项的值\n\n默认为了提高性能，给表单项下发的数据不是最新，只有自己的值变化才是最新的，如果想及时的获取其他表单项的值，比如描述中想获取其他表单项值来展示不同的描述。需要配置 `strictMode` 为 false。\n\n\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| labelAlign | `\"right\" \\| \"left\"` | `\"right\"` | 表单项标签对齐方式，默认右对齐，仅在 `mode`为`horizontal` 时生效 |\n| labelRemark | | | 表单项标签描述 |\n| description | | | 表单项描述 |\n| placeholder | `string` | | 表单项描述 |\n| inline | `boolean` | | 是否为 内联 模式 |\n| strictMode | `boolean` | | 通过配置 false 可以及时获取所有表单里面的数据，否则可能会有不同步 |\n| submitOnChange | `boolean` | | 是否该表单项值发生变化时就提交当前表单。 |\n| disabled | `boolean` | | 当前表单项是否是禁用状态 |\n| disabledOn | | | 当前表单项是否禁用的条件 |\n| visible | | | 当前表单项是否禁用的条件 |\n| visibleOn | | | 当前表单项是否禁用的条件 |\n| required | `boolean` | | 是否为必填。 |\n| requiredOn | 来配置当前表单项是否为必填。 |\n| validations | | | 表单项值格式验证，支持设置多个，多个规则用英文逗号隔开。 |\n| validateApi | | | 表单校验接口 |\n| autoFill | | | 数据录入配置，自动填充或者参照录入 |\n| autoFill.showSuggestion | `boolean` | | true 为参照录入，false 自动填充 |\n| autoFill.api | | | 自动填充接口/参照录入筛选 CRUD 请求配置 |\n| autoFill.silent | `boolean` | | 是否展示数据格式错误提示，默认为 true |\n| autoFill.fillMappinng | | | 自动填充/参照录入数据映射配置，键值对形式，值支持变量获取及表达式 |\n| autoFill.trigger | `string` | | showSuggestion 为 true 时，参照录入支持的触发方式，目前支持 change「值变化」｜ focus 「表单项聚焦」 |\n| autoFill.mode | `string` | | showSuggestion 为 true 时，参照弹出方式 dialog, drawer, popOver |\n| autoFill.labelField | `string` | | showSuggestion 为 true 时，设置弹出 dialog,drawer,popOver 中 picker 的 labelField |\n| autoFill.position | `string` | | showSuggestion 为 true 时，参照录入 mode 为 popOver 时，可配置弹出位置 |\n| autoFill.size | `string` | | showSuggestion 为 true 时，参照录入 mode 为 dialog 时，可设置大小 |\n| autoFill.columns | `Array<Column>` | | showSuggestion 为 true 时，数据展示列配置 |\n| autoFill.filter | | | showSuggestion 为 true 时，数据查询过滤条件 |\n| static | `boolean` | | `2.4.0` 当前表单项是否是静态展示，目前支持静 |\n| staticClassName | `string` | | `2.4.0` 静态展示时的类名 |\n| staticLabelClassName | `string` | | `2.4.0` 静态展示时的 Label 的类名 |\n| staticInputClassName | `string` | | `2.4.0` 静态展示时的 value 的类名 |\n| staticSchema | | | `2.4.0` 自定义静态展示方式 |\n| staticSchema.limit | `number` | 10 | `2.4.0` select、checkboxes 等选择类组件多选时展示态展示的数量 |\n\n## 支持静态展示的表单项\n\n可以在查看支持静态展示的表单项的展示方式\n\n- form 表单\n- button-group-select 按钮点选\n- chained-select 链式下拉框\n- chart-radios 图表单选框\n- checkbox 勾选框\n- checkboxes 复选框\n- combo 组合\n- input-kv 键值对\n- input-array 数组输入框\n- input-city 城市选择器\n- input-color 颜色选择器\n- input-date 日期选择器\n- input-date-range 日期范围选择器\n- input-datetime-range 日期时间选择器\n- input-time-range 时间范围选择器\n- input-group 输入框组合\n- input-month-range 月份范围\n- input-number 数字输入\n- input-quarter-range 季度范围\n- input-range 滑块\n- input-rating 评分\n- input-tag 标签选择器\n- input-text 输入框\n- input-password 密码输入框\n- input-email 邮箱输入框\n- input-url url 输入框\n- native-date native 日期选择器\n- native-time native 时间选择器\n- native-number native 数字输入\n- input-tree 树形选择器\n- input-year-range 年份范围\n- list-select 列表选择器\n- location-picker 地理位置\n- matrix-checkboxes 矩阵勾选\n- nested-select 级联选择器\n- radios 单选框\n- select 下拉框\n- multi-select 多选下拉框\n- switch 开关\n- tabs-transfer 组合穿梭器\n- tabs-transfer-picker 组合穿梭选择器\n- textarea 多行输入框\n- transfer 穿梭器\n- transfer-picker 穿梭选择器\n- tree-select 属性选择器\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 | `string` | | 定义个名字，当某个按钮的目标指定为此值后，会触发一次公式应用。这个机制可以在 `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#### 两端对齐\n\n有时表单内容需要两端对齐，可在 horizontal 中增加 justify 配置，注意只对内联控件生效\n\n\n\n#### label 对齐模式\n\n水平模式下 `labelAlign` 可以设置标签文本的对齐方式，支持`right`和`left`，默认为`right`。该属性的优先级：表单项 > 表单。\n\n\n\n### 内联模式\n\n使用内联模式展现表单项\n\n\n\n### 自定义 label 宽度\n\n水平模式下 `labelWidth` 可以设置标签文本的自定义宽度，默认单位为`px`。该属性的优先级：表单项 > 表单。\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> 2.4.0 及以上版本\n\n在一些场景，表单提交后需要将填写的内容静态展示\n\n### 设置初始状态\n\n通过配置`static: true`将整个表单设置为静态展示，单个表单项也支持此配置\n\n\n\n### 切换输入态和展示态\n\n也支持使用切换表单的 输入态和展示态（静态），也可以使用动作对单个表单项进行状态切换 \n可以在查看表单项的静态展示方式\n\n\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注意这里的 `data` 会进行数据映射，如果想不映射，需要进行转义，比如下面的例子\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`可以查看当前表单的数据域数据详情，方便数据映射、表达式等功能调试，如下，你可以修改表单项查看数据域变化。`debugConfig`可以额外配置 debug 区域的相关配置，具体配置请参考。\n\n> 2.2.0 及以上版本支持`debugConfig`\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### 限制只存储某些 key\n\n> 2.3.0 及以上版本\n\n如果只想存储部分 key，可以配置 `\"persistDataKeys\": [\"key1\", \"key2\"]`，这样就只有 name 为 key1 和 key2 的表单项数据会持久化\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\":2, \"right\":10, \"justify\": false}` | 当 mode 为 `horizontal` 时有用，用来控制 label 的展示占比 |\n| labelAlign | `\"right\" \\| \"left\"` | `\"right\"` | 表单项标签对齐方式，默认右对齐，仅在 `mode`为`horizontal` 时生效 |\n| labelWidth | `number \\| string` | | 表单项标签自定义宽度 |\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| persistDataKeys | `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| inheritData | `boolean` | `true` | 默认表单是采用数据链的形式创建个自己的数据域，表单提交的时候只会发送自己这个数据域的数据，如果希望共用上层数据域可以设置这个属性为 false，这样上层数据域的数据不需要在表单中用隐藏域或者显式映射才能发送了。 |\n| static | `boolean` | | `2.4.0` 整个表单静态方式展示，详情请查看 |\n| staticClassName | `string` | | `2.4.0` 表单静态展示时使用的类名 |\n| closeDialogOnSubmit | `boolean` | | 提交的时候是否关闭弹窗。当 form 里面有且只有一个弹窗的时候，本身提交会触发弹窗关闭，此属性可以关闭此行为 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------- |\n| 事件名称 | 事件参数 | 说明 |\n| inited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 |\n| change | `event.data: object` 当前表单数据 | 表单值变化时触发 |\n| formItemValidateSucc | `event.data: object` 当前表单数据 | 表单项校验成功时触发（只有`validateOnChange`为`true`或者点击提交过表单又去修改表单项信息的时候才会触发） |\n| formItemValidateError | `event.data: object` 当前表单数据 | 表单项校验失败时触发（只有`validateOnChange`为`true`或者点击提交过表单又去修改表单项信息的时候才会触发） |\n| validateSucc | `event.data: object` 当前表单数据 | 表单校验成功时触发 |\n| validateError | `event.data: object` 当前表单数据 | 表单校验失败时触发 |\n| submit | `event.data: object` 当前表单数据 | 点击提交按钮或者触发表单提交动作的时候触发（配置了该事件后将不会触发表单提交时的校验、提交到 api 或者 target 等行为，所有行为需要自己配置） |\n| submitSucc | `event.data.result: object` api 远程请求成功后返回的结果数据 | 提交成功时触发 |\n| submitFail | `event.data.error: object` api 远程请求失败后返回的错误信息 | 提交失败时触发 |\n| asyncApiFinished | `[name]: any` 当前数据域中指定字段的值 | asyncApi 远程请求轮训结束 |\n\n### inited\n\n\n\n### change\n\n\n\n### formItemValidateSucc\n\n只有`validateOnChange`为`true`或者点击提交过表单又去修改表单项信息的时候才会触发。\n\n\n\n### formItemValidateError\n\n只有`validateOnChange`为`true`或者点击提交过表单又去修改表单项信息的时候才会触发。\n\n\n\n### validateSucc\n\n\n\n### validateError\n\n\n\n### submit\n\n\n\n### submitSucc\n\n\n\n### submitFail\n\n\n\n### asyncApiFinished\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| ---------------- | --------------------------------------------------------------------------------------------------------- | -------------------------- |\n| validate | `outputVar: string` 校验结果，默认为 validateResult | 校验表单 |\n| submit | `outputVar: string` 提交结果，默认为 submitResult | 提交表单 |\n| setValue | `value: object` 更新的表单数据 | 更新数据，对数据进行 merge |\n| reload | - | 刷新（重新加载） |\n| reset | - | 重置表单 |\n| clear | - | 清空表单 |\n| static | - | 表单切换为静态展示 |\n| nonstatic | - | 表单切换为普通输入态 |\n| validateFormItem | `componentId: string` 要校验的表单项的 id;<br>`outputVar: string` 校验结果，默认为 validateFormItemResult | 校验表单项 |\n\n### validate\n\n校验结果默认缓存在`${event.data.validateResult}`，`true`表示校验成功，`false`表示检验失败。可以通过添加`outputVar`配置来修改缓存的变量。\n\n校验结果的结构如下：\n\n\n\n\n\n### submit\n\n提交结果默认缓存在`${event.data.submitResult}`，可以通过添加`outputVar`配置来修改缓存的变量。\n\n提交结果的结构如下：\n\n\n\n\n\n### setValue\n\n通过`setValue`更新指定表单的数据。\n\n#### 合并数据\n\n默认`setValue`会将新数据与目标组件数据进行合并。\n\n\n\n#### 覆盖数据\n\n可以通过`\"dateMergeMode\": \"override\"`来覆盖目标组件数据。\n\n\n\n### reload\n\n#### 只做刷新\n\n重新发送`initApi`请求，刷新 Form 时，只配置`componentId`目标组件 ID 即可。\n\n\n\n#### 发送数据并刷新\n\n刷新 Form 组件时，如果配置了`data`，将发送`data`给目标组件，并将该数据合并到目标组件的数据域中（如果配置`\"dataMergeMode\": \"override\"`将覆盖目标组件的数据），然后重新请求数据。\n\n\n\n### reset\n\n通过`reset`将表单数据重置为初始数据，初始数据可以是静态数据或初始化接口返回的数据。\n\n\n\n### clear\n\n通过`clear`来清空表单中的表单项数据，不包含`hidden`类型、未绑定表单项的初始化数据字段。\n\n\n\n### static 和 nonstatic\n\n\n\n### validateFormItem\n\n> 3.6.4 及以上版本\n\n对单个表单项进行校验，通过配置`actionType: 'validateFormItem'`实现表单项的校验 \n校验结果默认缓存在`${event.data.validateFormItemResult}`中，可以通过添加`outputVar`配置来修改缓存的变量\n\n校验结果的结构如下：\n\n\n\n\n","path":"/zh-CN/components/form/index"},{"title":"InputArray 数组输入框","body":"\nInputArray 是一种简化的 ，提交的时将以数组的形式提交。\n\n## 基本用法\n\n\n\n## 新增成员默认值\n\n部分情况下，期望新增元素时使用默认值，这时可以通过设置`scaffold`属性配置新增成员的默认值。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ------------------------------------------- | --------- | ------------------------------------------------------------------------ |\n| type | `string` | `\"input-array\"` | 指明为`array`组件 |\n| items | | | 配置单项表单类型 |\n| addable | `boolean` | | 是否可新增。 |\n| removable | `boolean` | | 是否可删除 |\n| draggable | `boolean` | `false` | 是否可以拖动排序, 需要注意的是当启用拖动排序的时候，会多一个\\$id 字段 |\n| draggableTip | `string` | | 可拖拽的提示文字，默认为：`\"可通过拖动每行中的【交换】按钮进行顺序调整\"` |\n| addButtonText | `string` | `\"新增\"` | 新增按钮文字 |\n| minLength | `number` | | 限制最小长度 |\n| maxLength | `number` | | 限制最大长度 |\n| scaffold | `any` | | 新增成员时的默认值，一般根据`items`的数据类型指定需要的默认值 |\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可以通过 `itemClassName` 指定下拉框样式，如配置最小宽度\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当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ----------------------------------- | ---------------- |\n| change | `[name]: number \\| string` 组件的值 | 选中值变化时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string \\| number` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n\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## hexa (8 digits HEX)\n\n将 `format` 设置为 hexa 支持 8位 HEX，参考 `https://drafts.csswg.org/css-color/`。\n\n\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------- | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |\n| format | `string` | `hex` | 请选择 `hex`、`hexa`、`hls`、`rgb`或者`rgba`。 |\n| presetColors | `Array<string>` | | 选择器底部的默认颜色，数组内为空则不显示默认颜色 |\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通过 value 设置默认值，除了实际值，比如\n\n\n\n还可以是相对值，比如最近一周内\n\n\n\n支持的相对值关键字有：\n\n- today: 当前日期\n- day 或 days: 天\n- week 或 weeks: 周\n- month 或 months: 月\n- year 或 years: 年\n\n或者用公式来配置复杂情况， 比如本周一到周日\n\n\n\n> 因为默认周日是第一天，所以需要往后加一天\n\n再看个上月第一天到上月最后一天的例子\n\n\n\n## 快捷键\n\n`shortcuts`属性支持自定义快捷选择日期范围快捷键\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> 3.1.0 及以上版本\n\n\n\n## 内嵌模式\n\n\n\n## 存成两个字段\n\n默认日期范围存储一个字段，用 `delemiter` 分割，如果配置 `extraName` 则会存两个字段。\n\n\n\n## 数据处理函数\n\n> `3.5.0`及以上版本\n\n默认情况下，日期范围选择器组件的绑定值的开始时间为所选时间当天的 0 点（使用`moment().startOf('day')`处理），结束时间为所选时间当天的 23 时 59 分 59 秒 999 毫秒（使用`moment().endOf('day')`处理）。如果设置了`timeFormat`（时间格式），则会基于`timeFormat`配置决定**最小时间单位**，举例：\n\n- 不设置`timeFormat`（时间格式），默认按照天(day)级处理：\n\n \n\n- `timeFormat`（时间格式）为 `\"HH:mm:ss\"`，则会按照秒(second)级处理：\n\n \n\n- `timeFormat`（时间格式）为 `\"HH:mm\"`，则会按照分钟(minute)级处理：\n\n \n\n- `timeFormat`（时间格式）为 `\"HH\"`，则会按照小时(hour)级处理：\n\n \n\n部分情况下，即使配置`timeFormat`也无法满足需求，此时可以使用`transform`函数对时间值做进一步处理, 函数签名如下：\n\n\n\n\n\n上面的示例使用 `transform` 函数，将结束时间的值设置为当前时间\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------------ | ---------------------------------------------------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----------------------- |\n| valueFormat | `string` | `X` | | 3.4.0 版本后支持 |\n| displayFormat | `string` | `YYYY-MM-DD` | | 3.4.0 版本后支持 |\n| placeholder | `string` | `\"请选择日期范围\"` | 占位文本 |\n| shortcuts | `string \\| string[] \\| Array<{label: string; startDate: string; endDate: string}>` | `\"yesterday,7daysago,prevweek,thismonth,prevmonth,prevquarter\"` | 日期范围快捷键 | `3.1.0`版本后支持表达式 |\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| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n| extraName | `string` | | 是否存成两个字段 | `3.3.0` |\n| transform | `string` | | 日期数据处理函数，用来处理选择日期之后的的值，返回值为 `Moment`对象 | `3.5.0` |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | ----------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，，依赖格式`format`，例如：'1650556800,1652889599' |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n\n","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### 通过 js 来控制\n\n> 3.3.0 及以上版本\n\n可以通过 `disabledDate` 字符函数来控制，比如不允许选择周一、周六、周日\n\n函数签名: `(currentDate: moment.Moment, props: any) => boolean` \n示例： `\"return currentDate.day() == 1 || currentDate.day() == 0 || currentDate.day() == 6\"`\n\n\n\n## 快捷键\n\n你也可以配置`shortcuts`属性支持快捷选择日期\n\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快捷键也支持使用表达式的写法，可以使用这种方式自定义快捷键\n\n> 3.1.0 及以上版本\n\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| valueFormat | `string` | `X` | 日期选择器值格式，更多格式类型请参考 | 3.4.0 版本后支持 |\n| displayFormat | `string` | `YYYY-MM-DD` | 日期选择器显示格式，即时间戳格式，更多格式类型请参考 | 3.4.0 版本后支持 |\n| closeOnSelect | `boolean` | `false` | 点选日期后，是否马上关闭选择框 |\n| placeholder | `string` | `\"请选择日期\"` | 占位文本 |\n| shortcuts | `string \\| string[] \\| Array<{\"label\": string; date: string}>` | | 日期快捷键，字符串格式为预设值，对象格式支持写表达式 | `3.1.0`版本后支持表达式 |\n| minDate | `string` | | 限制最小日期 |\n| maxDate | `string` | | 限制最大日期 |\n| utc | `boolean` | `false` | 保存 utc 值 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n| disabledDate | `string` | | 用字符函数来控制哪些天不可以被点选 |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1650556800' |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n\n","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`shortcuts`属性支持自定义日期时间范围快捷键\n\n\n\n快捷键也支持使用表达式的写法，可以使用这种方式自定义快捷键\n\n> 3.1.0 及以上版本\n\n\n\n## 存成两个字段\n\n默认日期范围存储一个字段，用 `delemiter` 分割，如果配置 `extraName` 则会存两个字段。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------------ | ---------------------------------------------------------------------------------- | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ----------------------- |\n| valueFormat | `string` | `X` | | 3.4.0 版本后支持 |\n| displayFormat | `string` | `YYYY-MM-DD` | | 3.4.0 版本后支持 |\n| placeholder | `string` | `\"请选择日期范围\"` | 占位文本 |\n| shortcuts | `string \\| string | `3.1.0`版本后支持表达式 |\n| minDate | `string` | | 限制最小日期时间，用法同 |\n| maxDate | `string` | | 限制最大日期时间，用法同 |\n| utc | `boolean` | `false` | |\n| clearable | `boolean` | `true` | 是否可清除 |\n| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n| extraName | `string` | | 是否存成两个字段 | `3.3.0` |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，依赖格式`format`，例如 '1650556800,1652889599' |\n","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### 控制时间范围\n\n通过 `timeConstraints` 属性可以控制时间输入范围\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### 通过 js 来控制\n\n> 3.3.0 及以上版本\n\n可以通过 `disabledDate` 字符函数来控制，比如不允许选择周一、周六、周日\n\n函数签名: `(currentDate: moment.Moment, props: any) => boolean`\n示例： `\"return currentDate.day() == 1 || currentDate.day() == 0 || currentDate.day() == 6\"`\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快捷键也支持使用表达式的写法，可以使用这种方式自定义快捷键\n\n> 3.1.0 及以上版本\n\n\n\n## UTC\n\n\n\n## 内嵌模式\n\n\n\n## 确认模式\n\n> `3.6.0`及以上版本\n\n设置`\"closeOnSelect\": false`，点选日期时间后，不会自动关闭浮层，需要点击底部工具栏的确认才会关闭。点击**取消按钮**或者**浮层外部区域**也会关闭浮层，并将值重置为初始状态。\n\n> 注意：该特性仅对`input-datetime`有效，其他日期时间组件无效。开启内嵌模式后，该特性无效。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------------ | -------------------------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------- | ----------------------- |\n| value | `string` | | |\n| valueFormat | `string` | `X` | 日期时间选择器值格式，更多格式类型请参考 | 3.4.0 版本后支持 |\n| displayFormat | `string` | `YYYY-MM-DD HH:mm:ss` | 日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 | 3.4.0 版本后支持 |\n| placeholder | `string` | `\"请选择日期以及时间\"` | 占位文本 |\n| shortcuts | `string \\| string[] \\| Array<{\"label\": string; date: string}>` | | 日期时间快捷键 | `3.1.0`版本后支持表达式 |\n| minDate | `string` | | 限制最小日期时间 |\n| maxDate | `string` | | 限制最大日期时间 |\n| utc | `boolean` | `false` | 保存 utc 值 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联 |\n| timeConstraints | `object` | `true` | 请参考 里的说明 |\n| isEndDate | `boolean` | `false` | 如果配置为 true，会自动默认为 23:59:59 秒 |\n| disabledDate | `string` | | 用字符函数来控制哪些天不可以被点选 |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0`版本后支持 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1650556800' |\n","path":"/zh-CN/components/form/input-datetime"},{"title":"InputExcel 解析 Excel","body":"\n这个组件是通过前端对 Excel 进行解析，将结果作为表单项，使用它有两个好处：\n\n1. 节省后端开发成本，无需再次解析 Excel\n2. 可以前端实时预览效果，比如配合 input-table 组件进行二次修改\n\n> 2.10.0 以上版本支持 xls 文件格式，2.9.0 及以下版本只支持 xlsx\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> 2.6.0 及以上版本\n\n通过配置 `parseImage` 来支持解析 excel 里的图片\n\n\n\n默认情况下解析结果是 data URI 格式，如果不想要这个前缀可以通过 `\"imageDataURI\": false` 关闭\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> `3.5.0`及以上版本\n\n文件解析成功后，可以使用`autoFill`属性，在当前组件所在的数据域中填充值，`input-excel`组件特有的保留字段请查看下方定义，`InputExcelData`中的字段可以用变量获取。通常可以利用这个属性为`input-excel`所在的表单追加文件名称。\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| placeholder | `string` | `\"拖拽 Excel 到这，或点击上传\"` | 占位文本提示 | `2.8.1` |\n| autoFill | `Record<string, string>` | | 自动填充 | `3.5.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------ | ------------------------ |\n| change | `[name]: Array<object>` 组件的值（excel 解析后的数据） | excel 上传解析完成后触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------------------------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: Array<object>` 更新的 excel 解析后数据 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n\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可以配置`maxSize`来限制文件大小\n\n\n\n## 手动上传\n\n默认`\"autoUpload\": true`，即添加文件后自动上传。可以设置`\"autoUpload\": false`关闭自动上传，此时通过点击上传按钮上传。\n\n\n\n## 作为表单项上传\n\n如果不希望 InputFile 组件在提交 Form 之前上传，可以配置 `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还可以通过 `concurrency` 控制并行数量，默认是 3\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除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ------------------------------ | ---------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |\n| receiver | | | 上传文件接口 |\n| accept | `string` | `text/plain` | 默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx` |\n| capture | `string` | `undefined` | 用于控制 input[type=file] 标签的 capture 属性，在移动端可控制输入来源 |\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| concurrency | `number` | | 分块上传时并行个数 |\n| documentation | `string` | | 文档内容 |\n| documentLink | `string` | | 文档链接 |\n| initAutoFill | `boolean` | `true` | 初表单反显时是否执行 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`file`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |\n| change | `[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 上传文件值变化时触发(上传失败同样会触发) |\n| remove | `item: FileValue` 被移除的文件<br/>`[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 移除文件时触发 |\n| success | `item: FileValue` 上传的文件<br/>`result: any` 远程上传请求成功后接口返回的结果数据<br/>`[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 上传成功时触发 |\n| fail | `item: FileValue` 上传的文件 <br /> `error: object` 远程上传请求失败后返回的错误信息<br/>`[name]: FileValue` \\| `Array<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当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------- | ---- |\n| clear | - | 清空 |\n\n### clear\n\n\n","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设置`\"inputMode\": \"input-group\"`可以切换编辑器的展示模式为输入框组合模式，1.10.0 及以上版本。\n\n\n\n## 变量展示模式\n\n设置不同`variableMode`字段切换变量展示模式，树形结构：\n\n\n\nTab 结构：\n\n\n\n## 模板模式\n\n当配置 `evalMode` 为 false 时则为模板模式，意思是说默认不当做表达式，只有 `${`和`}`包裹的部分才是表达式。\n\n\n\n## 混合模式\n\n混合模式的意思是支持输入文本和输入公式两种格式的值，当输入公式时值会自动用 `${` 和 `}` 包裹，如果不是这种格式则认为是输入普通的字符串。通过 `mixedMode` 为 true 启用这种模式\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' \\| 'input-group'` | - | 控件的展示模式 |\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 内配置的表单项上配置校验规则\n3. 如果 input-group 的子元素配置了`label`, 则会在校验失败时作为标识符展示, 否则仅使用索引值作为标识符\n4. 单个子元素多条校验信息会使用`; `分隔\n5. 可以使用`\"errorMode\": \"full\" | \"partial\"`设置错误提示风格, `full`整体飘红, `partial`仅错误元素飘红, 默认为`\"full\"`\n\n> 细粒度错误提示需`2.7.1`及以上版本\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ---------------- | ----------------------------------------- | -------- | ----------------------------------------------------- | ------- |\n| className | `string` | | CSS 类名 | |\n| body | Array<> | | 表单项集合 | |\n| validationConfig | `Record<'errorMode' \\| 'delimiter', any>` | - | 校验相关配置, 具体配置属性如下 | `2.8.0` |\n| +errorMode | `\"full\" \\| \"partial\"` | `\"full\"` | 错误提示风格, `full`整体飘红, `partial`仅错误元素飘红 | `2.8.0` |\n| +delimiter | `string` | `\"; \"` | 单个子元素多条校验信息的分隔符 | `2.8.0` |\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配置 `maxSize`，限制文件大小，单位为 `B`。\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## 手动上传\n\n默认`\"autoUpload\": true`，即添加文件后自动上传。可以设置`\"autoUpload\": false`关闭自动上传，此时通过点击底部上传按钮上传。\n\n\n\n### 隐藏上传按钮\n\n设置 `\"hideUploadButton\": true` 隐藏手动上传的按钮。\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### 其他表单项填充\n\n\n\n### initAutoFill 初始化时自动同步\n\n当表单反显时，可通过`initAutoFill`控制`autoFill`在数据反显时是否执行。\n\n\n\n## 拖拽排序\n\n可配置 `draggable` 为 `true` 启动拖拽排序。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | ----------------------------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |\n| receiver | | | 上传文件接口 |\n| accept | `string` | `.jpeg,.jpg,.png,.gif` | 支持的图片类型格式，请配置此属性为图片后缀，例如`.jpg,.png` |\n| capture | `string` | `undefined` | 用于控制 input[type=file] 标签的 capture 属性，在移动端可控制输入来源 |\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| uploadBtnText | `string` \\| | | 上传按钮文案。支持 tpl、schema 形式配置。 |\n| dropCrop | `boolean` | `true` | 图片上传后是否进入裁剪模式 |\n| initCrop | `boolean` | `false` | 图片选择器初始化后是否立即进入裁剪模式 |\n| draggable | `boolean` | false | 开启后支持拖拽排序改变图片值顺序 |\n| draggableTip | `string` | '拖拽排序' | 拖拽提示文案 |\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当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`file`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- |\n| change | `[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 上传文件值变化时触发(上传失败同样会触发) |\n| remove | `item: FileValue` 被移除的文件<br/>`[name]: FileValue` \\| `Array<FileValue>` 组件的值 | 移除文件时触发 |\n| success | `item: FileValue` 上传的文件<br/>`result: any` 远程上传请求成功后接口返回的结果数据<br/>`id: string` id<br />`[name]: FileValue` 组件的值 | 上传成功时触发 |\n| fail | `item: FileValue` 上传的文件 <br /> `error: object` 远程上传请求失败后返回的错误信息<br/>`[name]: FileValue` \\| `Array<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当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------- | ---- |\n| clear | - | 清空 |\n\n### clear\n\n\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## 自定义 value 的 schema\n\n> 3.1.0 及以上版本\n\n默认创建的 value schema 是\n\n\n\n前面的配置可以改其中的 type 或 placeholder，而这个新的 `valueSchema` 配置就能做到替换所有配置，比如\n\n\n\n## 自定义 key schema\n\n> 3.1.0 及以上版本\n\n和前面的 value schema 类似，还可以自定义 key 的 schema\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| autoParseJSON | `boolean` | `true` | 是否自动转换 json 对象字符串 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------------------------------------------------------ | ---------------- |\n| add | `[name]: string \\| string[]` 组件的值 | 添加组合项时触发 |\n| delete | `key: number` 移除项的索引<br />`item: string` 移除项<br />`[name]: object` 组件的值 | 删除组合项时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: object` 更新的值 | 更新数据 |\n","path":"/zh-CN/components/form/input-kv"},{"title":"InputKVS 键值对象","body":"\n> 2.1.0 及以上版本\n\n这个组件的功能和 `input-kv` 类似，`input-kv` 的 value 值只支持一个对象，`input-kvs` 的最大不同就是 value 支持对象和数组，可以用来支持深层结构编辑\n\n## 基本用法\n\n\n\n其中 `keyItem` 可以用来修改 key 值控件，比如可以改成下拉框\n\n\n\n而 `valueItems` 是用来控制值的控件，这里的配置和 combo 的 items 一样，唯一限制是不允许有 `\"name\": \"_key\"` 值的情况，因为这个值被当成对象 key 了。\n\n## 水平模式\n\n通过 `\"mode\": \"horizontal\"` 设置，需要分别在 `keyItem` 和 `valueItems` 里设置\n\n\n\n## 嵌套的场景\n\n`valueItems` 可以进一步嵌套，比如里面又嵌一个 `input-kvs` 实现深层结构编辑\n\n\n\n前面的嵌套会多一个层级，如果想去掉这个层级 `column`，可以将 `\"name\": \"column\"` 改成 `\"name\": \"_value\"`，这时值就会直接放入\n\n\n\n除了前面的对象，值也可以是数组，需要配置一下 `valueIsArray`\n\n\n","path":"/zh-CN/components/form/input-kvs"},{"title":"InputMonthRange 月份范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 存成两个字段\n\n默认月份范围存储一个字段，用 `delemiter` 分割，如果配置 `extraName` 则会存两个字段。\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| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n| extraName | `string` | | 是否存成两个字段 | `3.3.0` |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，依赖格式`format`，例如 '1646064000,1651334399' |\n","path":"/zh-CN/components/form/input-month-range"},{"title":"InputMonth 月份","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中月份，可以看到默认显示月份的格式是像`01`这样的格式，如果你想要自定义显示格式，那么可以配置`displayFormat`。\n\n例如你想显示`01月`这样的格式，查找 moment 文档可知配置格式应为 `MM月`，即：\n\n\n\n调整月份，观察显示格式\n\n## 值格式\n\n选中任意月份，可以看到默认表单项的值格式是像`1582992000`这样的时间戳格式。\n\n\n\n如果你想要其他格式的月份值，那么可以配置`valueFormat`参数用于调整表单项的值格式。\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| valueFormat | `string` | `X` | 月份选择器值格式，更多格式类型请参考 | `3.4.0` |\n| displayFormat | `string` | `YYYY-MM` | 月份选择器显示格式，即时间戳格式，更多格式类型请参考 | `3.4.0` |\n| placeholder | `string` | `\"请选择月份\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | --------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`valueFormat`，例如：'1646064000' |\n","path":"/zh-CN/components/form/input-month"},{"title":"InputNumber 数字输入框","body":"\n## 基本用法\n\n\n\n## 设置精度\n\n`precision` 设置数字的显示精度，一般需要配合 `step` 属性使用，以实现细粒度调整。注意带有单位的输入不支持配置精度属性。若设置了 `step` 值，则会基于 `step` 和 `precision` 的值，选择更高的精度。若输入的内容不满足精度要求，组件会按照精度自动处理，遵循四舍五入规则。\n\n\n\n## 重置值\n\n清空/重置组件输入后，组件绑定的值将被设置为 `resetValue`，默认为 `\"\"`。若 `resetValue` 为合法数字时，会根据 `min`、`max` 和 `precision` 属性，将组件值设置为满足条件的值。若 `resetValue` 为非数字，则组件清空/重置后设置为该值。\n\n\n\n## 前后缀、千分分隔\n\n\n\n## 带单位数字\n\n> 1.4.0 及以上版本\n\n可以通过 `unitOptions` 设置数字的单位选项，和前面的前后缀不同，它的输出结果也将会是字符串，包含单位，默认取选项的第一个。\n\n\n\n## 加强版输入框\n\n\n\n## 是否是大数\n\n> 2.3.0 及以上版本\n\n默认情况下使用 JavaScript 原生数字类型，但如果要支持输入超过 JavaScript 支持范围的整数或浮点数，可以通过 `\"big\": true` 开启大数支持，开启之后输入输出都将是字符串。\n\n\n\n## 内容清空时删除字段\n\n> 2.8.0 及以上版本\n\n如果设置了 `\"clearValueOnEmpty\": true`，当输入框的值清空时，会从数据域中删除该表单项对应的值。比较常见的用法是在 `combo`、`input-array` 等组件中避免 `input-number` 清空后提交空字符串。\n\n\n\n## 原生数字组件\n\n原生数字组件将直接使用浏览器的实现，最终展现效果和浏览器有关，并且只支持 `min`、`max` 和 `step` 这几个属性设置，这个功能主要是给移动端浏览器使用的，PC 下不建议使用。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ----------------- | --------------------------------------- | -------- | ------------------------------------------- | ------- |\n| min | | | 最小值 |\n| max | | | 最大值 |\n| step | `number` | | 步长 |\n| precision | `number` | | 精度，即小数点后几位，支持 0 和正整数 |\n| showSteps | `boolean` | `true` | 是否显示上下点击按钮 |\n| readOnly | `boolean` | `false` | 只读 |\n| prefix | `string` | | 前缀 |\n| suffix | `string` | | 后缀 |\n| unitOptions | `string[]` | | 单位选项 | `1.4.0` |\n| kilobitSeparator | `boolean` | `false` | 千分分隔 |\n| keyboard | `boolean` | `true` | 键盘事件（方向上下） |\n| big | `boolean` | `false` | 是否使用大数 | `2.3.0` |\n| displayMode | `\"base\" \\| \"enhance\"` | `\"base\"` | 样式类型 |\n| borderMode | `\"full\" \\| \"half\" \\| \"none\"` | `\"full\"` | 边框模式，全边框，还是半边框，或者没边框 |\n| resetValue | `number \\| string` | `\"\"` | 清空输入内容时，组件值将设置为 `resetValue` |\n| clearValueOnEmpty | `boolean` | `false` | 内容为空时从数据域中删除该表单项对应的值 | `2.8.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过 `onEvent` 来监听这些事件，并通过 `actions` 来配置执行的动作，在 `actions` 中可以通过 `${事件参数名}` 或 `${event.data.。\n\n> `[name]` 表示当前组件绑定的名称，即 `name` 属性，如果没有配置 `name` 属性，则通过 `value` 取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ---------------- |\n| change | `[name]: number` 组件的值 | 输入值变化时触发 |\n| blur | `[name]: number` 组件的值 | - |\n| focus | `[name]: number` 组件的值 | - |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定 `actionType: 动作名称`、`componentId: 该组件id` 来触发这些动作，动作配置可以通过 `args: {动作配置项名称: xxx}` 来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为 `resetValue`，若没有配置 `resetValue`，则清空 |\n| setValue | `value: number` 更新的数值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/form/input-number"},{"title":"InputPassword 密码输入框","body":"\n## 基本用法\n\n\n\n## 配置密码显/隐藏\n\n`revealPassword`属性可以设置是否展示密码显/隐按钮，默认为`true`。\n\n\n\n## 属性表\n\n请参考\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | --------- | ------ | --------------------- |\n| revealPassword | `boolean` | `true` | 是否展示密码显/隐按钮 |\n\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默认季度范围存储一个字段，用 `delemiter` 分割，如果配置 `extraName` 则会存两个字段。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------------ | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |\n| valueFormat | `string` | `X` | | `3.4.0` |\n| displayFormat | `string` | `YYYY-DD` | | `3.4.0` |\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| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n| extraName | `string` | | 是否存成两个字段 | `3.3.0` |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，依赖格式`format`，例如 '1640966400,1664553600' |\n","path":"/zh-CN/components/form/input-quarter-range"},{"title":"InputQuarter 季度","body":"\n## 基本用法\n\n\n\n更多用法和配置可以参考 ，quarter 就是 date 的特定配置，所以 date 的所有配置都能使用。\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1640966400' |\n","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。`3.3.0`版本后支持使用变量。\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在打开`showInput`输入框且设置了`unit`单位的前提下，开启`showInputUnit`可在 input 框中显示已配置的单位。\n\n\n\n## 显示标签\n\n标签默认在 hover 和拖拽过程中展示，通过`tooltipVisible`或者`tipFormatter`可指定标签是否展示。标签默认展示在滑块上方，通过`tooltipPlacement`可指定标签展示的位置。\n\n\n\n## 存成两个字段\n\n默认滑块多选存储一个字段，用 `delemiter` 分割，如果配置 `extraName` 则会存两个字段。\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 \\| string` | `0` | 最小值，支持变量 | `3.3.0`后支持变量 |\n| max | `number \\| string` | `100` | 最大， 支持变量值 | `3.3.0`后支持变量 |\n| disabled | `boolean` | `false` | 是否禁用 |\n| step | `number \\| string` | `1` | 步长，支持变量 | `3.3.0`后支持变量 |\n| showSteps | `boolean` | `false` | 是否显示步长 |\n| parts | `number` or `number[]` | `1` | 分割的块数<br/>主持数组传入分块的节点 |\n| marks | <code>{ [number | string]: string | number | SchemaObject }</code> or <code>{ [number | string]: { style: CSSProperties, label: string } }</code> | | 刻度标记<br/>- 支持自定义样式<br/>- 设置百分比 |\n| tooltipVisible | `boolean` | `false` | 是否显示滑块标签 |\n| tooltipPlacement | `auto` or `bottom` or `left` or `right` | `top` | 滑块标签的位置，默认`auto`，方向自适应<br/>前置条件：tooltipVisible 不为 false 时有效 |\n| tipFormatter | `function` | | 控制滑块标签显隐函数<br/>前置条件：tooltipVisible 不为 false 时有效 |\n| multiple | `boolean` | `false` | 支持选择范围 |\n| joinValues | `boolean` | `true` | 默认为 `true`，选择的 `value` 会通过 `delimiter` 连接起来，否则直接将以`{min: 1, max: 100}`的形式提交<br/>前置条件：开启`multiple`时有效 |\n| delimiter | `string` | `,` | 分隔符 |\n| unit | `string` | | 单位 |\n| clearable | `boolean` | `false` | 是否可清除<br/>前置条件：开启`showInput`时有效 |\n| showInput | `boolean` | `false` | 是否显示输入框 |\n| showInputUnit | `boolean` | `false` | 是否显示输入框单位<br/>前置条件：开启`showInput`且配置了`unit`单位时有效 | `6.0.0`后支持变量 |\n| onChange | `function` | | 当 组件 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 |\n| onAfterChange | `function` | | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ---------------------------------------------------------------- | ------------------------------------------------- |\n| change | `[name]: number \\| string \\|{min: number, max: number}` 组件的值 | 当值变化时触发的事件 |\n| blur | `[name]: number \\| string \\|{min: number, max: number}` 组件的值 | 当设置 showInput 为 true 时，输入框失去焦点时触发 |\n| focus | `[name]: number \\| string \\|{min: number, max: number}` 组件的值 | 当设置 showInput 为 true 时，输入框获取焦点时触发 |\n\n### change\n\n\n\n### blur\n\n当设置 `showInput` 为 true 时，输入框失去焦点时触发。\n\n\n\n### focus\n\n当设置 `showInput` 为 true 时，输入框获取焦点时触发。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------------------------------------------- | ------------------------------------------------ |\n| clear | - | 清除输入框 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: number \\| string \\| {min: number, max: number}` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\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当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------- |\n| change | `[name]: number` 组件的值 | 分值变化时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: number` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n\n","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> amis 2.1.0 版本升级到了 tinymce 6，导致 plugins 的写法有变化\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## 图片保存为 base64\n\n当使用 tinymce 编辑器的时候，如果配置文件接收器为空，当选择图片的时候，会自动转成 base64 格式存储\n\n\n\n## 扩充 tinymce 插件\n\n需要在调用 amis 的时候，通过 `env.loadTinymcePlugin` 来加载自定义插件，可以查考： 文件中的示例。\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 `仅支持 froala 编辑器` |\n| fileField | string | | 上传文件时的字段名 |\n| size | `string` | | 框的大小，可设置为 `md` 或者 `lg` |\n| options | `object` | | 需要参考 的文档 |\n| buttons | `Array<string>` | | froala 专用，配置显示的按钮，tinymce 可以通过前面的 options 设置 字符串 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n> | 事件名称 | 事件参数 | 说明 |\n> | -------- | ------------------------------------- | ------------------------------------------- |\n> | change | `[value]: object` 富文本组件的值<br/> | 富文本值改变时触发 |\n","path":"/zh-CN/components/form/input-rich-text"},{"title":"inputSignature 签名面板","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| width | `number` | | 组件宽度，最小 300 |\n| height | `number` | | 组件高度，最小 160 |\n| color | `string` | `#000` | 手写字体颜色 |\n| bgColor | `string` | `#EFEFEF` | 面板背景颜色 |\n| clearBtnLabel | `string` | `清空` | 清空按钮名称 |\n| undoBtnLabel | `string` | `撤销` | 撤销按钮名称 |\n| confirmBtnLabel | `string` | `确认` | 确认按钮名称 |\n| embed | `boolean` | | 是否内嵌 |\n| embedConfirmLabel | `string` | `确认` | 内嵌容器确认按钮名称 |\n| ebmedCancelLabel | `string` | `取消` | 内嵌容器取消按钮名称 |\n| embedBtnIcon | `string` | | 内嵌按钮图标 |\n| embedBtnLabel | `string` | `点击签名` | 内嵌按钮文案 |\n","path":"/zh-CN/components/form/input-signature"},{"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> 6.6.0 起支持配置 `copyData` 属性，来指定复制的数据。默认值为 `{&: \"$$\"}`\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另外还可以配置`payload`，直接将数据添加到目标表格。\n\n\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可以配置`perPage`属性设置一页显示多少条数据。如果不配置此属性，则不会显示分页器\n\n\n\n## 前端过滤与排序\n\n> 6.10.0 及以上版本\n\n在列上配置 `searchable`、`sortable` 或者 `filterable` 来开启对应功能，用法与 一致。\n\n\n\n默认前端只是简单的过滤，如果要有复杂过滤，请通过 `matchFunc` 来实现，函数签名 `(items: Record<string, any>[], itemsRaw: Record<string, any>[], options: {query: string, columns: Column[], matchSorter: (a: any, b: any) => number}) => Record<string, any>[]`\n\n- `items` 当前表格数据\n- `itemsRaw` 与 items 一样，（历史用法，保持不变）\n- `options` 配置\n- `options.query` 查询条件\n- `options.columns` 列配置\n- `options.matchSorter` 系统默认的排序方法\n\n\n\n## 可拖拽\n\n配置`\"draggable\": true`，实现可拖拽调整顺序\n\n\n\n## 限制个数\n\n可以配置`minLength`和`maxLength`配置 InputTable 可添加的条数\n\n\n\n也可以使用变量配置`minLength`和`maxLength`\n\n> 2.4.1 及以上版本\n\n\n\n## 非确认模式\n\n配置`\"needConfirm\": false`，以实现新增**单行数据**时不需要确认即可提交到数据域。\n\n\n\n## 树形模式\n\n配置 `childrenAddable` 为 true，可以开启新增子节点功能。\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> 2.8.1 及以上版本\n\n列信息 `columns` 的对应项为表单项时，可以设置表单项的校验规则，来实现对该项的校验，校验配置可以查看 \n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------------- | ----------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"input-table\"` | 指定为 Table 渲染器 |\n| addable | `boolean` | `false` | 是否可增加一行 |\n| copyable | `boolean` | `false` | 是否可复制一行 |\n| copyData | `PlainObject` | | 控制复制时的数据映射，不配置时复制整行数据 |\n| childrenAddable | `boolean` | `false` | 是否可增加子级节点 |\n| editable | `boolean` | `false` | 是否可编辑 |\n| removable | `boolean` | `false` | 是否可删除 |\n| showTableAddBtn | `boolean` | `true` | 是否显示表格操作栏添加按钮，前提是要开启可新增功能 |\n| showFooterAddBtn | `boolean` | `true` | 是否显示表格下方添加按，前提是要开启可新增功能 |\n| addApi | | - | 新增时提交的 API |\n| footerAddBtn | | - | 底部新增按钮配置 |\n| updateApi | | - | 修改时提交的 API |\n| deleteApi | | - | 删除时提交的 API |\n| addBtnLabel | `string` | | 增加按钮名称 |\n| addBtnIcon | `string` | `\"plus\"` | 增加按钮图标 |\n| subAddBtnLabel | `string` | | 子级增加按钮名称 |\n| subAddBtnIcon | `string` | `\"sub-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| minLength | `number` | `0` | 最小行数, `2.4.1`版本后支持变量 |\n| maxLength | `number` | `Infinity` | 最大行数, `2.4.1`版本后支持变量 |\n| perPage | `number` | - | 每页展示几行数据，如果不配置则不会显示分页器 |\n| columns | `array` | [] | 列信息 |\n| columns[x].quickEdit | `boolean` 或者 `object` | - | 配合 editable 为 true 一起使用 |\n| columns[x].quickEditOnUpdate | `boolean` 或者 `object` | - | 可以用来区分新建模式和更新模式的编辑配置 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过 onEvent 来监听这些事件，并通过 actions 来配置执行的动作，在 actions 中可以通过${事件参数名}或${event.data.[事件参数名]}来获取事件产生的数据，详细查看事件动作。\n\n| 事件名称 | 事件参数 | 说明 |\n| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |\n| add | `index: number` 新增行记录索引 <br />`indexPath: string` 新增行记录索引路径 <br /> `item: object` 新增行记录 <br/> `value: object[]` 列表记录 | 点击左下角添加按钮 或 某一行右侧操作栏添加按钮时触发 |\n| addConfirm | `index: number` 新增行记录索引 <br /> `item: object` 新增行记录 <br/>`indexPath: string` 新增行记录索引路径 <br /> `value: object[]`列表记录 | 开启`needConfirm`，点击添加按钮，填入数据后点击“保存”按钮后触发 |\n| addSuccess | `index: number` 新增行记录索引 <br /> `item: object` 新增行记录 <br/>`indexPath: string` 新增行记录索引路径 <br /> `value: object[]`列表记录 | 开启`needConfirm`并且配置`addApi`，点击“保存”后调用接口成功时触发 |\n| addFail | `index: number` 新增行记录索引 <br /> `item: object` 新增行记录 <br/>`indexPath: string` 新增行记录索引路径 <br /> `value: object[]`列表记录<br />`error: object` `addApi`请求失败后返回的错误信息 | 开启`needConfirm`并且配置`addApi`，点击“保存”后调用接口失败时触发 |\n| edit | `index: number` 所在行记录索引 <br /> `item: object` 所在行记录 <br/>`indexPath: string` 所在行记录索引路径 <br /> `value: object[]`列表记录 | 点击某一行右侧操作栏“编辑”按钮时触发 |\n| editConfirm | `index: number` 所在行记录索引 <br /> `item: object` 所在行记录 <br/>`indexPath: string` 所在行记录索引路径 <br /> `value: object[]`列表记录 | 开启`needConfirm`，点击“编辑”按钮，填入数据后点击“保存”按钮后触发 |\n| editSuccess | `index: number` 所在行记录索引 <br /> `item: object` 所在行记录 <br/>`indexPath: string` 所在行记录索引路径 <br /> `value: object[]`列表记录 | 开启`needConfirm`并且配置`updateApi`，点击“保存”后调用接口成功时触发 |\n| editFail | `index: number` 所在行记录索引 <br /> `item: object` 所在行记录 <br/>`indexPath: string` 所在行记录索引路径 <br /> `value: object[]`列表记录<br />`error: object` `updateApi`请求失败后返回的错误信息 | 开启`needConfirm`并且配置`updateApi`，点击“保存”后调用接口失败时触发 |\n| delete | `index: number` 所在行记录索引 <br /> `item: object` 所在行记录 <br/>`indexPath: string` 所在行记录索引路径 <br /> `value: object[]`列表记录 | 点击某一行右侧操作栏“删除”按钮时触发 |\n| deleteSuccess | `index: number` 所在行记录索引 <br /> `item: object` 所在行记录 <br/>`indexPath: string` 所在行记录索引路径 <br /> `value: object[]`列表记录 | 配置了`deleteApi`，调用接口成功时触发 |\n| deleteFail | `index: number` 所在行记录索引 <br /> `item: object` 所在行记录 <br/>`indexPath: string` 所在行记录索引路径 <br /> `value: object[]`列表记录<br />`error: object` `deleteApi`请求失败后返回的错误信息 | 配置了`deleteApi`，调用接口失败时触发 |\n| change | `value: object[]` 列表记录 | 组件数据发生改变时触发 |\n| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 |\n| rowClick | `item: object` 行点击数据<br/>`index: number` 行索引 <br/>`indexPath: string` 行索引路径 | 单击整行时触发 |\n| rowDbClick | `item: object` 行点击数据<br/>`index: number` 行索引 <br/>`indexPath: string` 行索引路径 | 双击整行时触发 |\n| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 <br/>`indexPath: string` 行索引路径 | 移入整行时触发 |\n| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 <br/>`indexPath: string` 行索引路径 | 移出整行时触发 |\n\n### add\n\n点击左下角添加按钮 或 某一行右侧操作栏添加按钮时触发。\n\n\n\n### addConfirm\n\n开启`needConfirm`，点击添加按钮，填入数据后点击“保存”按钮后触发。\n\n\n\n### addSuccess\n\n开启`needConfirm`并且配置`addApi`，点击“保存”后调用接口成功时触发。\n\n\n\n### addFail\n\n开启`needConfirm`并且配置`addApi`，点击“保存”后调用接口失败时触发。\n\n\n\n### edit\n\n点击某一行右侧操作栏“编辑”按钮时触发\n\n\n\n### editConfirm\n\n开启`needConfirm`，点击“编辑”按钮，填入数据后点击“保存”按钮后触发.\n\n\n\n### editSuccess\n\n开启`needConfirm`并且配置`updateApi`，点击“保存”后调用接口成功时触发。\n\n\n\n### editFail\n\n开启`needConfirm`并且配置`updateApi`，点击“保存”后调用接口失败时触发。\n\n\n\n### delete\n\n点击某一行右侧操作栏“删除”按钮时触发。\n\n\n\n### deleteSuccess\n\n开启`needConfirm`并且配置`updateApi`，点击“保存”后调用接口成功时触发。\n\n\n\n### deleteFail\n\n配置了`deleteApi`，调用接口失败时触发。\n\n\n\n### change\n\n组件数据发生改变时触发。\n\n\n\n### orderChange\n\n在开启拖拽排序行记录后才会用到，排序确认后触发。\n\n\n\n### rowClick\n\n点击行记录。\n\n\n\n### rowDbClick\n\n双击行记录。\n\n\n\n### rowMouseEnter\n\n鼠标移入行记录。\n\n\n\n### rowMouseLeave\n\n鼠标移出行记录。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定 actionType: 动作名称、componentId: 该组件 id 来触发这些动作，动作配置可以通过 args: {动作配置项名称: xxx}来配置具体的参数，详细请查看事件动作。\n\n| 动作名称 | 动作配置 | 说明 |\n| ---------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- |\n| addItem | `item: object\\|Array<object>` 添加的数据<br />`index: number` 指定添加的位置，如果未指定则在数据尾端插入 | 在已有数据的基础上插入数据 |\n| deleteItem | `condition:` 删除条件，用于支持批量删除的场景<br /> `index: number ` 指定删除哪一行数据 | 删除某一行数据 |\n| setValue | `value: object \\| Array<object>` 替换的值<br /> `index?: number` 可选，替换第几行数据，如果没有指定，则替换全部表格数据 | 替换表格数据 |\n| clear | - | 清空表格数据 |\n| reset | - | 将表格数据重置为`resetValue`，若没有配置`resetValue`，则清空表格数据 |\n| initDrag | - | 开启表格拖拽排序功能 |\n| cancelDrag | - | 取消表格拖拽排序功能 |\n\n### addItem\n\n\n\n### deleteItem\n\n\n\n### setValue\n\n#### 更新列表记录\n\n\n\n#### 更新指定行记录\n\n可以通过指定`index`或者`condition`来分别更新指定索引的行记录和指定满足条件（条件表达式或者 ConditionBuilder）的行记录。\n\n\n\n#### 行记录内表单项联动\n\n需要通过表达式配置动态 `id` 和 `componentId`。\n\n\n\n### clear\n\n\n\n### reset\n\n\n\n### initDrag & cancelDrag\n\n> 6.4.0 版本开始支持\n\n\n","path":"/zh-CN/components/form/input-table"},{"title":"InputTag 标签选择器","body":"\n## 基本使用\n\n\n\n## 限制标签最大展示数量\n\n> 1.10.0 及以上版本\n\n`maxTagCount`可以限制标签的最大展示数量，超出数量的部分会收纳到 Popover 中，可以通过`overflowTagPopover`配置 Popover 相关的，注意该属性仅在多选模式开启后生效。\n\n\n\n## 批量输入\n\n> 2.0.0 及以上版本\n\n可以设置`\"enableBatchAdd\": true`开启批量输入模式，默认的分隔符为`\"-\"`，可以使用`\"separator\"`属性自定义分隔符，注意避免和`\"delimiter\"`属性冲突。\n\n\n\n## 数量&文本长度限制\n\n> 2.0.0 及以上版本\n\n可以设置`max`限制输入的标签数量，设置`maxTagLength`限制单个标签的最大文本长度。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | ----------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| optionsTip | `Array<object>`或`Array<string>` | `\"最近您使用的标签\"` | 选项提示 |\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| max | `number` | | 允许添加的标签的最大数量 |\n| maxTagLength | `number` | | 单个标签的最大文本长度 |\n| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |\n| overflowTagPopover | `TooltipObject` | `{\"placement\": \"top\", \"trigger\": \"hover\", \"showArrow\": false, \"offset\": |\n| enableBatchAdd | `boolean` | `false` | 是否开启批量添加模式 |\n| separator | `string` | `\"-\"` | 开启批量添加后，输入多个标签的分隔符，支持传入多个符号，默认为\"-\" |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ----------------------------------------------------------------------------------------------------------------- | -------------------- |\n| change | `[name]: string` 组件的值（多个以逗号分割）<br/>`selectedItems: Option[]` 选中的项<br/>`items: Option[]` 所有选项 | 选中值变化时触发 |\n| blur | `[name]: string` 组件的值<br/>`selectedItems: Option[]` 选中的项<br/>`items: Option[]` 所有选项 | 输入框失去焦点时触发 |\n| focus | `[name]: string` 组件的值<br/>`selectedItems: Option[]` 选中的项<br/>`items: Option[]` 所有选项 | 输入框获取焦点时触发 |\n\n### change\n\n\n\n### blur\n\n\n\n### focus\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据，多个值用`,`分隔 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### reload\n\n只有选择器模式支持，即配置`source`，用于重新加载选择器的数据源。\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/form/input-tag"},{"title":"InputText 输入框","body":"\n## 基本使用\n\n\n\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`prefix` 和 `suffix` 属性支持数据映射。\n\n\n\n## 显示计数器\n\n配置`\"showCounter\": true`后输入框将显示计数器，一般会配合`maxLength`属性以限制输入长度，如果不设置`maxLength`，则仅展示计数器，并不会限制用户的输入长度。\n\n\n\n## 自动转换值\n\n可以配置 transform，来自动转换值，支持转小写或大写。\n\n> 注意下面第一个示例，只有输入的内容才会触发 transform，下拉框选中的值是不会处理的。\n\n\n\n## 文本内容为空时去掉这个值\n\n> 2.4.0 及以上版本\n\n如果设置了 `\"clearValueOnEmpty\": true`，当输入框的值清空时，提交的表单项里就不会有这个值\n\n\n\n## 自动补全\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\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| clearValueOnEmpty | `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| borderMode | `\"full\"\\| \"half\" \\| \"none\"` | `\"full\"` | 输入框边框模式，全边框，还是半边框，或者没边框。 |\n| inputControlClassName | `string` | | control 节点的 CSS 类名 |\n| nativeInputClassName | `string` | | 原生 input 标签的 CSS 类名 |\n| nativeAutoComplete | `string` | `off` | 原生 input 标签的 `autoComplete` 属性，比如配置集成 `new-password` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ---------------------------------------------- |\n| click | `[name]: string` 组件的值 | 点击输入框时触发，只针对选择器模式的输入框有效 |\n| enter | `[name]: string` 组件的值 | 回车时触发，只针对选择器模式的输入框有效 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |\n| change | `[name]: string` 组件的值 | 值变化时触发 |\n| clear | `[name]: string` 组件的值 | 点击清除按钮时触发 |\n\n### enter\n\n选择器模式下，回车时触发。\n\n\n\n### focus\n\n当设置 `showInput` 为 true 时，输入框获取焦点时触发。\n\n\n\n### blur\n\n当设置 `showInput` 为 true 时，输入框失去焦点时触发。\n\n\n\n### change\n\n\n\n### clear\n\n配置`clearable`为 true，点击清除按钮时触发。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | -------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 重置 |\n| focus | - | 获取焦点 |\n| reload | - | 刷新（重新加载），只针对配置了`source`的输入框有效 |\n| setValue | `value: string` 更新的值 | 更新数据，开启`multiple`多选时用`,`分隔 |\n\n### clear\n\n如果配置了`clearValueOnEmpty: true`，则清空时将置为`undefined`，否则置为空字符串。\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### focus\n\n\n\n### reload\n\n只有选择器模式支持，即配置`source`，用于重新加载选择器的数据源。\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/form/input-text"},{"title":"InputTimeRange 时间范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 显示秒\n\n默认显示的是时和分，请参考以下配置，其中若`valueFormat`非时间戳格式时需与`displayFormat`精确度相同\n\n\n\n## 存成两个字段\n\n默认季度范围存储一个字段，用 `delemiter` 分割，如果配置 `extraName` 则会存两个字段。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------------ | --------- | ------------------ | --------------------------------------------------------------------- | ------- |\n| valueFormat | `string` | `HH:mm` | | `3.4.0` |\n| displayFormat | `string` | `HH:mm` | | `3.4.0` |\n| placeholder | `string` | `\"请选择时间范围\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| embed | `boolean` | `false` | 是否内联模式 |\n| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n| extraName | `string` | | 是否存成两个字段 | `3.3.0` |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，依赖格式`format`，例如 '1617206400,1743436800' |\n","path":"/zh-CN/components/form/input-time-range"},{"title":"InputTime 时间","body":"\n## 基本用法\n\n\n\n## 显示格式\n\n选中任意时间，可以看到默认显示时间的格式是像`01:01`这样的格式，如果你想要自定义显示格式，那么可以配置`displayFormat`。\n\n例如你想显示`01时01分`这样的格式，查找 moment 文档可知配置格式应为 `HH时mm分`，即：\n\n\n\n调整时间，观察显示格式\n\n## 值格式\n\n选中任意时间，可以看到默认表单项的值格式是像`1591862818`这样的时间戳格式。\n\n\n\n如果你想要其他格式的日期值，那么可以配置`valueFormat`参数用于调整表单项的值格式。\n\n例如你调整值为`01:11`这样的格式，查找 moment 文档可知配置格式应为 `HH:mm`，即：\n\n\n\n调整时间，观察数据域中表单项值的变化\n\n## 显示秒\n\n默认显示的是时和分，要显示秒可通过配置`displayFormat`实现，请参考以下配置，若配置`valueFormat`需与`displayFormat`精确度相同\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> 设置了`timeConstraints`后，点击「此刻」会选择最接近当前时间的有效值\n\n\n\n## 原生时间组件\n\n原生时间组件将直接使用浏览器的实现，最终展现效果和浏览器有关，而且只支持 `min`、`max`、`step` 这几个属性设置。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------------ | --------- | -------------- | ----------------------------------------------------------------------------------- | ---------------- |\n| value | `string` | | |\n| valueFormat | `string` | `X` | 时间选择器值格式，更多格式类型请参考 | 3.4.0 版本后支持 |\n| displayFormat | `string` | `HH:mm` | 时间选择器显示格式，即时间戳格式，更多格式类型请参考 | 3.4.0 版本后支持 |\n| placeholder | `string` | `\"请选择时间\"` | 占位文本 |\n| clearable | `boolean` | `true` | 是否可清除 |\n| timeConstraints | `object` | `true` | |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1648746120' |\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> since 1.9.0\n\n`autoCheckChildren`默认为 true，选中父节点会自动选中子节点，可以设置`\"autoCheckChildren\": false`，不自动选中子节点\n\n\n\n## 选中父节点自动选中子节点，数据是否包含父子节点的值\n\n`cascade`默认为 false，子节点禁止反选，值不包含子节点值，配置`\"cascade\": true`，子节点可以反选，值包含父子节点值（1.9.0 之前的版本 cascade 配置为 true 的效果为：选中父节点不默认选中子节点）\n\n> 6.9.0 以上版本 autoCancelParent 配置为 true 的效果为：取消子节点，自动去除父节点的值（仅在多选和 cascade 为 true 时生效）\n\n\n\n`withChildren`默认为 false，子节点禁止反选，值包含父子节点值，配置`withChildren\": true`，子节点禁止反选，值包含父子节点值\n\n\n\n也可以设置`onlyChildren`，实现只包含子节点的值\n\n\n\n## 只允许选择叶子节点\n\n> 1.10.0 及以上版本\n\n在单选时，可通过 `onlyLeaf` 可以配置只允许选择叶子节点\n\n\n\n## 默认展开\n\n默认是展开所有子节点的，如果不想默认展开，则配置`\"initiallyOpen\": false`\n\n\n\n如果层级较多，也可以配置`unfoldedLevel`指定展开的层级数，默认展开第 1 层\n\n下例中设置`\"unfoldedLevel\": 2`，表示展开第 2 层\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> `2.8.0` 及以上版本\n\n使用`menuTpl`属性，自定义下拉选项的渲染内容。\n\n\n\n## 选项搜索\n\n> `2.8.0` 及以上版本\n\n开启`\"searchable\": true`后，支持搜索当前数据源内的选项\n\n\n\n### searchApi\n\n> `3.6.0` 及以上版本\n\n**发送**\n\n默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。\n\n**响应**\n\n格式要求如下：\n\n\n\n适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景。未配置 searchApi 是前端检索，配置之后就只能通过后端检索。\n\n## 节点行为配置\n\n> 6.9.0 以上版本\n\n设置`nodeBehavior`属性，可以更改节点的行为，默认为选中行为，支持配置多个行为。\n\n\n\n## 自定义选项操作\n\n> 6.9.0 以上版本\n\n> 使用`itemActions`属性，自定义下拉选项的操作。\n\n\n\n## 工具栏区域\n\n> 6.9.0 以上版本\n> 使用`toolbar`属性，自定义工具栏区域。（仅开启检索时生效）\n\n\n\n## 虚拟列表\n\n> 6.9.0 以上版本, 开启 heightAuto 后，虚拟列表将自适应高度\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ---------------------- | -------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\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| deferField | `string` | `\"defer\"` | 懒加载字段 | `3.6.0` |\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` | 是否可检索 | `2.8.0`前仅`tree-select`支持 |\n| hideRoot | `boolean` | `true` | 如果想要显示个顶级节点，请设置为 `false` |\n| rootLabel | `boolean` | `\"顶级\"` | 当 `hideRoot` 不为 `false` 时有用，用来设置顶级节点的文字。 |\n| showIcon | `boolean` | `true` | 是否显示图标 |\n| showRadio | `boolean` | `false` | 是否显示单选按钮，`multiple` 为 `false` 是有效。 |\n| showOutline | `boolean` | `false` | 是否显示树层级展开线 |\n| initiallyOpen | `boolean` | `true` | 设置是否默认展开所有层级。 |\n| unfoldedLevel | `number` | `1` | 设置默认展开的级数，只有`initiallyOpen`不是`true`时生效。 |\n| autoCheckChildren | `boolean` | `true` | 当选中父节点时级联选择子节点。 |\n| cascade | `boolean` | `false` | autoCheckChildren 为 true 时生效；默认行为：子节点禁用，值只包含父节点值；设置为 true 时，子节点可反选，值包含父子节点值。 |\n| withChildren | `boolean` | `false` | cascade 为 false 时生效，选中父节点时，值里面将包含父子节点的值，否则只会保留父节点的值。 |\n| onlyChildren | `boolean` | `false` | autoCheckChildren 为 true 时生效，不受 cascade 影响；onlyChildren 为 true，ui 行为级联选中子节点，子节点可反选，值只包含子节点的值。 |\n| onlyLeaf | `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| highlightTxt | `string` | | 标签中需要高亮的字符，支持变量 |\n| itemHeight | `number` | `32` | 每个选项的高度，用于虚拟渲染 |\n| virtualThreshold | `number` | `100` | 在选项数量超过多少时开启虚拟渲染 |\n| menuTpl | `string` | | 选项自定义渲染 HTML 片段 | `2.8.0` |\n| enableDefaultIcon | `boolean` | `true` | 是否为选项添加默认的前缀 Icon，父节点默认为`folder`，叶节点默认为`file` | `2.8.0` |\n| heightAuto | `boolean` | `false` | 默认高度会有个 maxHeight，即超过一定高度就会内部滚动，如果希望自动增长请设置此属性 | `3.0.0` |\n| nodeBehavior | `Array<'unfold' \\| 'check' \\| ''>` | `['check']` | 节点行为配置，支持配置多个行为 | `6.9.0` |\n| autoCancelParent | `boolean` | `false` | 子节点取消时自动取消父节点的值，仅在多选且 cascade 为 true 时生效 | `6.9.0` |\n| toolbar | `SchemaNode` | | 工具栏区域，仅开启检索时生效 | `6.9.0` |\n| toolbarClassName | `string` | | 工具栏区域类名 | `6.9.0` |\n| itemActions | `SchemaNode` | | 节点操作栏区域 | `6.9.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| change | `value: any`表单项的值，值格式取决于具体配置<br/>`items: object[]`选项集合（3.6.0 及以上版本）<br/>`item: object`选中的节点（6.2.0 及以上版本）单选时才有值<br/> `selectedItems: object[]` 当前选中的项，单选多选都值，且值格式始终是数组（6.4.0 及以上版本） <br /> `[name]: string` 组件的值 | 选中值变化时触发 |\n| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 新增的节点信息<br/>`items: object[]`选项集合 | 新增节点提交时触发 |\n| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`item: object` 编辑的节点信息<br/>`items: object[]`选项集合 | 编辑节点提交时触发 |\n| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 删除的节点信息<br/>`items: object[]`选项集合 | 删除节点提交时触发 |\n| deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`result: object` deferApi 懒加载远程请求成功后返回的数据 <br/>`items: object[]`选项集合 | 懒加载接口远程请求成功时触发 |\n| itemClick (6.9.0 以上版本) | `value: any`表单项的值，值格式取决于具体配置<br/>`item: object` 点击的节点信息 | 节点点击时触发 |\n| add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |\n| edit（不推荐） | `[name]: object` 编辑的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 编辑节点提交时触发 |\n| delete（不推荐） | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 删除节点提交时触发 |\n| loadFinished（不推荐） | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 |\n\n### change\n\n\n\n### addConfirm\n\n配置 `creatable`后，可监听确认新增操作。\n\n\n\n### editConfirm\n\n配置 `editable`后，可监听确认编辑操作。\n\n\n\n### deleteConfirm\n\n配置 `removable`后，可监听确认删除操作。\n\n\n\n### deferLoadFinished\n\n\n\n### itemClick\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------- |\n| expand | openLevel: `number` | 展开指定层级 |\n| collapse | - | 收起 |\n| add | `item: Option, parentValue?: any` | item 新增的数据项；parentValue 父级数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） |\n| edit | `item: Option, originValue: any` | item 编辑后的数据项；originValue 编辑前数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） |\n| delete | value: ` any` | 删除数据项的 value，（如果配置了 valueField，以 valueField 的字段值为准） |\n| reload | - | 刷新 |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n| search | `keyword: string` 检索的值 | 检索数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### search\n\n\n","path":"/zh-CN/components/form/input-tree"},{"title":"验证码输入 InputVerificationCode","body":"\n注意 InputVerificationCode, 可通过<b>粘贴</b>完成填充数据。\n\n## 基本用法\n\n基本用法。\n\n\n\n## 密码模式\n\n指定 masked = true，可开启密码模式。\n\n\n\n## 自定义分隔符\n\n指定 separator 可以自定义渲染分隔符。\n\n\n\n## 状态\n\n<p>指定 disabled = true，可开启禁用模式。</p>\n指定 readOnly = true，可开启只读模式。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------- | ------ | ------------------------------------------------------------------------------ |\n| length | `number` | 6 | 验证码的长度，根据长度渲染对应个数的输入框 |\n| masked | `boolean` | false | 是否是密码模式 |\n| separator | `string` | | 分隔符，支持表达式, 表达式`只`可以访问 index、character 变量, 参考自定义分隔符 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------- | -------------------------- |\n| finish | - | 输入框都被填充后触发的回调 |\n| change | - | 输入值改变时触发的回调 |\n\n### 事件\n\nfinish 输入框都被填充。可以尝试通过`${event.data.value}`获取填写的数据。\n\n\n\nchange 输入值改变。可以尝试通过`${event.data.value}`获取填写的数据。\n\n\n","path":"/zh-CN/components/form/input-verification-code"},{"title":"InputYearRange 年份范围","body":"\n## 基本用法\n\n\n\n## 内嵌模式\n\n\n\n## 存成两个字段\n\n默认年份范围存储一个字段，用 `delemiter` 分割，如果配置 `extraName` 则会存两个字段。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------------ | --------- | ------------------ | ---------------------------------------------------------------------------- | ------- |\n| valueFormat | `string` | `X` | | `3.4.0` |\n| displayFormat | `string` | `YYYY` | | `3.4.0` |\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| animation | `boolean` | `true` | 是否启用游标动画 | `2.2.0` |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 | `6.4.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | -------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间区间值，用`,`隔开 | 更新数据，依赖格式`format`，例如 '1648746120,1648760760' |\n","path":"/zh-CN/components/form/input-year-range"},{"title":"Year 年份选择","body":"\n## 基本用法\n\n\n\n更多用法和配置可以参考 ，year 就是 data 的特定配置，所以 data 的所有配置都能使用。\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值 | 时间值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` 更新的时间值 | 更新数据，依赖格式`format`，例如：'1617206400' |\n","path":"/zh-CN/components/form/input-year"},{"title":"JSONSchema Editor","body":"\n## 基本用法\n\n> 1.9.0 及以上版本\n\n\n\n## 顶级类型可配置\n\n\n\n## 预设类型\n\n通过设置 definitions 属性可以提供一些默认类型，可以减少类型的定义成本。\n\n\n\n## 开启高级配置\n\n通过 `enableAdvancedSetting` 可以开启高级配置，同时通过 `advancedSettings` 可以定制弹窗中的配置面板。\n\n\n\n## Mini 版本\n\n通过设置 `mini` 属性可以开启 mini 版本，适用于宽度窄的情况。同时通过 `advancedSettings` 可以定制弹窗中的配置面板。\n\n\n\n## 占位提示\n\n> 2.8.0 及以上版本\n\n设置`placeholder`属性，可以修改属性控件的默认占位提示文本，当前属性值会和默认值做合并\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| --------------- | ----------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------- |\n| rootTypeMutable | `boolean` | false | 顶级类型是否可配置 |\n| showRootInfo | `boolean` | false | 是否显示顶级类型信息 |\n| disabledTypes | `Array<string>` | | 用来禁用默认数据类型，默认类型有：string、number、interger、object、number、array、boolean、null |\n| definitions | `object` | | 用来配置预设类型 |\n| mini | `boolean` | | 用来开启迷你模式，适应于边栏面板，宽度较低的情况 |\n| placeholder | `SchemaEditorItemPlaceholder` | `{key: \"字段名\", title: \"名称\", description: \"描述\", default: \"默认值\", empty: \"<空>\",}` | 属性输入控件的占位提示文本 | `2.8.0` |\n\n### SchemaEditorItemPlaceholder\n\n\n","path":"/zh-CN/components/form/json-schema-editor"},{"title":"JSONSchema","body":"\n## 基本用法\n\n> 1.10.0 及以上版本\n\n这个组件可以基于 JSON Schema 生成表单项，方便对接类似 OpenAPI/Swagger Specification 的接口规范，可基于接口定义自动生成 amis 表单项。\n\n> 此组件还在实验阶段，很多 json-schema 属性没有对应实现，使用前请先确认你要的功能满足了需求\n\n基于 json-schema 定义生成表单输入项。\n\n\n\n## 复杂 case\n\n\n\n## 搭配公式使用\n\n> 6.4.0 及以上版本\n\n通过配置 `formula` 属性，可以配合公式使用。\n\n\n\n## 远程获取 schema\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------------------- | ------ | ---------------- |\n| schema | `object` \\| `string` | | 指定 json-schema |\n","path":"/zh-CN/components/form/json-schema"},{"title":"ListSelect 列表","body":"\nListSelect 一般用来实现选择，可以单选也可以多选，和 Radio/Checkboxs 最大的不同是在展现方面支持带图片。\n\n## 基本用法\n\n\n\n## 选项带图片\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | ---------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### reload\n\n只有选择器模式支持，即配置`source`，用于重新加载选择器的数据源。\n\n\n\n### setValue\n\n\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` 为 `gaode`，并且需要设置 `ak`。其中的 ak 参数为随机值， 请替换为自己申请的 `ak` ， 高德地图的 `ak` 申请地址：\n\n请注意: **_高德地图不支持坐标转换_**\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------- | ------------------ | ------------------------------------ | -------------------------------------------------------------------------------- |\n| value | `LocationData` | 参考 | |\n| vendor | 'baidu' \\| 'gaode' | 'baidu' | 地图厂商，目前只实现了百度地图和高德地图 |\n| ak | `string` | 无 | 百度/高德地图的 ak |\n| clearable | `boolean` | false | 输入框是否可清空 |\n| placeholder | `string` | '请选择位置' | 默认提示 |\n| autoSelectCurrentLoc | `boolean` | false | 是否自动选中当前地理位置 |\n| onlySelectCurrentLoc | `boolean` | false | 是否限制只能选中当前地理位置，设置为 true 后，可用于充当定位组件 |\n| coordinatesType | 'bd09' \\| 'gcj02' | 'bd09' | 坐标系类型，默认百度坐标，使用高德地图时应设置为'gcj02'， 高德地图不支持坐标转换 |\n\n### 坐标系说明\n\n- bd09：百度坐标系，在 GCJ02 坐标系基础上再次加密。\n- gcj02：火星坐标系，是由中国国家测绘局制定的地理坐标系统。\n\n### LocationData\n\n| 属性值 | 类型 | 是否必填 | 说明 |\n| ------- | ------------------ | -------- | ----------------------- |\n| address | `string` | 是 | 地址信息 |\n| lng | `number` | 是 | 经度，范围：[-180, 180] |\n| lat | `number` | 是 | 维度，范围：[-90, 90] |\n| vendor | 'baidu' \\| 'gaode' | 否 | 地图厂商类型 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------- | ---------------- |\n| change | `[name]: LocationData` 组件的值 | 选中值变化时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value` | 参考 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/form/location-picker"},{"title":"MatrixCheckboxes 矩阵","body":"\n矩阵类型的输入框。\n\n## 基本用法\n\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<column>` | | 列信息，数组中 `label` 字段是必须给出的 |\n| rows | `Array<row>` | | 行信息， 数组中 `label` 字段是必须给出的 |\n| rowLabel | `string` | | 行标题说明 |\n| source | | | Api 地址，如果选项组不固定，可以通过配置 `source` 动态拉取。 |\n| multiple | `boolean` | `true` | 是否多选 |\n| singleSelectMode | `string` | `\"column\"` | 设置单选模式，`multiple`为`false`时有效，可设置为`cell`, `row`, `column` 分别为全部选项中只能单选某个单元格、每行只能单选某个单元格，每列只能单选某个单元格 |\n| textAlign | `string` | `\"center\"` | 当开启多选+全选时，默认为'left' |\n| yCheckAll | `boolean` | `false` | 列上的全选 |\n| xCheckAll | `boolean` | `false` | 行上的全选 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------ | ---------------- |\n| change | `[name]: Array` 组件的值 | 选中值变化时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ----------------------- | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: Array` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### reload\n\n只有选择器模式支持，即配置`source`，用于重新加载选择器的数据源。\n\n\n\n### setValue\n\n\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> 1.8.0 及以上版本，如果是之前版本可以在对应的节点上不设置 value 实现\n\n在单选时，可以通过 `onlyLeaf` 来设置只允许选择叶子节点，即便分支节点有 `value` 也不会被选中。\n\n\n\n在多选时，也可以通过 `onlyLeaf` 并且搭配 `cascade` 来设置只允许选择叶子节点，即便分支节点有 `value` 也不会有选中动作,\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配置`\"searchable\": true`后，输入框内输入内容时，下拉数据源会进行前端过滤，过滤的关键字段默认为`value`或`label`。如果通过属性，则会选择对应的字段进行过滤。\n\n\n\n## 限制标签最大展示数量\n\n> 3.3.0 及以上版本\n\n`maxTagCount`可以限制标签的最大展示数量，超出数量的部分会收纳到 Popover 中，可以通过`overflowTagPopover`配置 Popover 相关的，注意该属性仅在多选模式开启后生效。\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------ | ----------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ------- |\n| options | `Array<object>`或`Array<string>` | | |\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| onlyLeaf | `boolean` | `false` | 只允许选择叶子节点 |\n| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 | `3.3.0` |\n| overflowTagPopover | `TooltipObject` | `{\"placement\": \"top\", \"trigger\": \"hover\", \"showArrow\": false, \"offset\": | `3.3.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------- |\n| change | `[name]: string` 组件的值 | 选中值变化时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据，开启`multiple`时，多个值用`,`分隔 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### reload\n\n只有选择器模式支持，即配置`source`，用于重新加载选择器的数据源。\n\n\n\n### setValue\n\n\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### 单一选项禁用\n\n如果需要禁用某个单独选项，让用户不可选。可以给`options`中某一项配置`disabled`属性为`true`。\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或者直接返回内容\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还可以通过 `checkAll` 开启全选。\n\n\n\n默认多选的值格式为逗号拼接 value 值，例如：`1,2,3`，如果需要改变值格式，请阅读下面 配置项。\n\n如果值太多折行可以通过 `valuesNoWrap` 来避免折行。\n\n\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> 2.2.0 及以上版本\n\n通过 `addDialog` 来控制弹框属性，比如通过 `size` 来调大，其它属性请参考 的属性表\n\n\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> 2.2.0 及以上版本\n\n通过 `editDialog` 来控制弹框属性，比如通过 `size` 来调大，其它属性请参考 的属性表\n\n\n\n## 删除选项\n\n配置 `removable: true` 支持删除选项，支持该功能的组件有：CheckBoxes、Select、Tree、Table-formitem\n\n\n\n### 配置删除接口 deleteApi\n\n配置 `deleteApi`使用接口进行删除\n\n\n\n点开下拉框，鼠标悬浮在选项上，可以看到右侧会有删除图标，点击可请求删除接口进行删除\n\n## 自动填充 autoFill\n\n> 支持该配置项的有：ButtonGroup、List、NestedSelect、Picker、Radios、Select、InputFile、InputImage、InputExcel\n\n一些选择器组件，支持配置`autoFill`，将当前已选中的选项的某个字段的值，自动填充到表单中某个表单项中，支持\n\n\n\n上例中我们配置了`\"autoFill\": {\"option.instantValidate\": \"${label}\"}`，表示将选中项中的`label`的值，自动填充到当前表单项中`name`为`option.instantValidate`的文本框中。可以额外配置`\"validateOnChange\": true`，实现自动填充后立即校验填充项。\n\n**多选模式**\n\n当表单项为多选模式时，不能再直接取选项中的值了，而是通过 `items` 变量来取，通过它可以获取当前选中的选项集合。\n\n\n\n**初始不填充**\n\n从 3.1.0 版本开始，表单初始化时，选项有值时也会执行「自动填充」逻辑，从版本 6.1.0 版本开始 可以通过 `initAutoFill` 配置成 `false` 来关闭。\n\n`initAutoFill` 有三种值分别如下，默认为 `fillIfNotSet`。\n\n- `fillIfNotSet` 如果目标值不存在则填充，如果目标值存在则不填充。\n- `true` 总是填充，如果目标值存在则覆盖。\n- `false` 总是不填充，如果目标值存在则不填充。\n\n## 控制选项高度\n\n> 1.10.0 及以上版本\n\n下拉框在数据量较大时（超过 100，可以通过 `virtualThreshold` 控制）会自动切换到虚拟渲染模式，如果选项的内容较长会导致内容重叠，这时需要设置 `itemHeight` 来避免。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------------------------------------------------------------------------- | --------- | ---------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | 选项组，供用户选择 |\n| source | | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |\n| multiple | `boolean` | `false` | 是否支持多选 |\n| labelField | `boolean` | `\"label\"` | 标识选项中哪个字段是`label`值 |\n| valueField | `boolean` | `\"value\"` | 标识选项中哪个字段是`value`值 |\n| deferField | `string` | `\"defer\"` | 标识选项中哪个字段是`defer`值 |\n| joinValues | `boolean` | `true` | 是否拼接`value`值 |\n| extractValue | `boolean` | `false` | 是否将`value`值抽取出来组成新的数组，只有在`joinValues`是`false`是生效 |\n| itemHeight | `number` | `32` | 每个选项的高度，用于虚拟渲染 |\n| virtualThreshold | `number` | `100` | 在选项数量超过多少时开启虚拟渲染 |\n| valuesNoWrap | `boolean` | `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可以配置`visibleOn`属性控制 picker 显隐来支持更复杂的表单场景。如果 picker 的初始值需要绑定上层数据域变量，可以通过配置事件动作来更新上层数据域变量。\n\n\n\n## 限制标签最大展示数量\n\n设置`overflowConfig`后可以限制标签的最大展示数量，该属性仅在多选模式开启后生效，包含以下几个配置项：\n\n- `maxTagCount`：最大展示数量，是范围为 0 - 选项总数量的整数，超出数量的部分会收纳到 Popover 中。\n- `displayPosition`：收纳标签生效的位置，类型为字符串数组，未开启内嵌模式默认为**选择器**, 开启后默认为**选择器**和**CRUD 顶部**，可选值为`'select'`(选择器)、`'crud'`(增删改查)。\n- `overflowTagPopover`配置收纳标签 Popover 相关。\n- `overflowTagPopoverInCRUD`可以配置**CRUD 顶部**收纳标签的 Popover 相关。\n\n> `3.4.0` 及以上版本\n\n\n\n内嵌模式下\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| -------------- | -------------------------------------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------------------- | ---- |\n| options | `Array<object>`或`Array<string>` | | |\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| modalTitle | `string` | `\"请选择\"` | 设置模态框的标题 |\n| modalMode | `string` | `\"dialog\"` | 设置 `dialog` 或者 `drawer`，用来配置弹出方式。 |\n| pickerSchema | `string` | `{mode: 'list', listItem: {title: '${label}'}}` | 即用 List 类型的渲染，来展示列表信息。更多配置参考 |\n| embed | `boolean` | `false` | 是否使用内嵌模式 |\n| overflowConfig | `OverflowConfig` | 参考 | 开启最大标签展示数量的相关配置 `3.4.0` |\n\n### OverflowConfig\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------ | ------------------------ | ------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------- |\n| maxTagCount | `number` | `-1` | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效，默认为`-1` 不开启 `3.4.0` |\n| displayPosition | `('select' \\| 'crud')[]` | `['select', 'crud']` | 收纳标签生效的位置，未开启内嵌模式默认为选择器, 开启后默认为选择器和 CRUD 顶部，可选值为`'select'`(选择器)、`'crud'`(增删改查) `3.4.0` |\n| overflowTagPopover | `TooltipObject` | `{\"placement\": \"top\", \"trigger\": \"hover\", \"showArrow\": false, \"offset\": `3.4.0` |\n| overflowTagPopoverInCRUD | `TooltipObject` | `{\"placement\": \"bottom\", \"trigger\": \"hover\", \"showArrow\": false, \"offset\": `3.4.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| --------- | --------------------------------------------------------------------------------------------------------------------------- | ---------------- |\n| change | `[name]: string` 组件的值（多个以逗号分隔)<br/>`selectedItems: object` \\| `object[]`选中项（< 2.3.2 及以下版本 为`option`） | 选中值变化时触发 |\n| itemClick | `item: Option` 所点击的选项 | 选项被点击时触发 |\n\n### change\n\n\n\n### itemClick\n\n输入框内已被选中的选项被点击时触发。\n\n\n","path":"/zh-CN/components/form/picker"},{"title":"Radio 单选框","body":"\n实现组合中的单选功能，此组件只有在 `combo` 和 `input-table` 中有意义。\n\n## combo 中使用\n\n\n\n## input-table 中使用\n\n\n\n## 配置真假值\n\n默认情况：\n\n- 单选框勾选时，表单项值为：true\n- 单选框取消勾选时，表单项值为：false\n\n如果你想调整这个值，可以配置`trueValue`和`falseValue`\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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`来获取事件产生的数据（`< 2.3.2 及以下版本 为 ${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------- | ------------------ |\n| change | `[name]: boolean` 组件的值 | 选中状态变化时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------- | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string \\|number \\|boolean` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/form/radio"},{"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通过 `selectFirst` 属性配置\n\n\n\n## 动态选项\n\n可以配置 `source` 来从上下文或远程 api 拉取选项数据\n\n\n\n远程 api\n\n\n\napi 返回内容需要包含 options 字段\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------ | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| labelField | `string` | `\"label\"` | |\n| valueField | `string` | `\"value\"` | |\n| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |\n| inline | `boolean` | `true` | 是否显示为一行 |\n| selectFirst | `boolean` | `false` | 是否默认选中第一个 |\n| autoFill | `object` | | |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | --------------------------------------------------------------------------------------------- | ---------------- |\n| change | `[name]: string` 组件的值<br/>`selectedItems: Option` 选中的项<br/>`items: Option[]` 选项集合 | 选中值变化时触发 |\n\n### change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### reload\n\n只有选择器模式支持，即配置`source`，用于重新加载选择器的数据源。\n\n\n\n### setValue\n\n\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### 表格模式\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默认通过搜索过滤 value,label 中的值\n\n可通过`filterOption`自定义搜索过滤函数\n\n\n\n### searchApi\n\n**发送**\n\n默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。\n\n**响应**\n\n格式要求如下：\n\n\n\n适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。\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## 限制标签最大展示数量\n\n> 1.10.0 及以上版本\n\n`maxTagCount`可以限制标签的最大展示数量，超出数量的部分会收纳到 Popover 中，可以通过`overflowTagPopover`配置 Popover 相关的，注意该属性仅在多选模式开启后生效。\n\n\n\n## 自定义下拉区域宽度与对齐方式\n\n> 2.8.0 以上版本\n\n使用字符串或数字，使用数字时单位为`px`；支持单位: `%`、`px`、`rem`、`em`、`vw`。\n\n\n\n使用相对数值，如：`-20px` 相当于 `100% - 20px`；`+10vw` 相当于 `100% + 10vw`。支持如上相同单位。\n\n\n\n## 多选全选\n\n开启全选后，默认开启`\"checkAllBySearch\": true`，检索状态下全选内容为当前过滤项。如果设置了`\"checkAllBySearch\": false`，则无论是否在检索状态下，全选都会选择全部数据源。\n\n> 2.8.1 及以上版本`checkAllBySearch`默认开启\n\n\n\n## 自动补全 autoComplete\n\n可以在`autoComplete`配置中，用数据映射，获取变量`term`，为当前输入的关键字。\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------ | --------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| options | `Array<object>`或`Array<string>` | | |\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` | `true` | 有检索时只全选检索命中的项 |\n| defaultCheckAll | `boolean` | `false` | 默认是否全选 |\n| creatable | `boolean` | `false` | |\n| multiple | `boolean` | `false` | |\n| searchable | `boolean` | `false` | |\n| filterOption | `string` | `(options: Option[], inputValue: string, option: {keys: string[]}) => Option[]` | |\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<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |\n| leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |\n| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |\n| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |\n| maxTagCount | `number` | | 标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效 |\n| overflowTagPopover | `TooltipObject` | `{\"placement\": \"top\", \"trigger\": \"hover\", \"showArrow\": false, \"offset\": |\n| optionClassName | `string` | | 选项 CSS 类名 |\n| popOverContainerSelector | `string` | | 弹层挂载位置选择器，会通过`querySelector`获取 |\n| clearable | `boolean` | | 是否展示清空图标 |\n| overlay | `{ width: string \\| number, align: \"left\" \\| \"center\" \\| \"right\" }` | | 弹层宽度与对齐方式 `2.8.0 以上版本` |\n| showInvalidMatch | `boolean` | `false` | 选项值与选项组不匹配时选项值是否飘红 |\n| noResultsText | `string` | `\"未找到任何结果\"` | 无结果时的文本 |\n\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| change | `[name]: string` 组件的值<br/>`selectedItems: Option \\| Option[]` 选中的项<br/>`items: Option[]` 选项集合（< 2.3.2 及以下版本 为`options`） | 选中值变化时触发 |\n| blur | `[name]: string` 组件的值<br/>`items: Option[]` 选项集合（< 2.3.2 及以下版本 为`options`） | 输入框失去焦点时触发 |\n| focus | `[name]: string` 组件的值<br/>`items: Option[]` 选项集合（< 2.3.2 及以下版本 为`options`） | 输入框获取焦点时触发 |\n| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 新增的节点信息<br/>`items: object[]`选项集合 | 新增节点提交时触发 |\n| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`item: object` 编辑的节点信息<br/>`items: object[]`选项集合 | 编辑节点提交时触发 |\n| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 删除的节点信息<br/>`items: object[]`选项集合 | 删除节点提交时触发 |\n| add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |\n| edit（不推荐） | `[name]: object` 编辑的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 编辑节点提交时触发 |\n| delete（不推荐） | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 删除节点提交时触发 |\n\n### change\n\n\n\n### focus\n\n\n\n### blur\n\n\n\n### addConfirm\n\n配置 `creatable`后，可监听确认新增操作。\n\n\n\n### editConfirm\n\n配置 `editable`后，可监听确认编辑操作。\n\n\n\n### deleteConfirm\n\n配置 `removable`后，可监听确认删除操作。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| reload | - | 重新加载，调用 `source`，刷新数据域数据刷新（重新加载） |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### 刷新数据源 reload\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/form/select"},{"title":"Static 静态展示","body":"\n> 推荐在`2.4.0`版本后使用来实现该功能\n> 常用表单项已支持静态展示：\n> 新版静态展示还可以实现整个表单的静态展示及切换，具体用法请参考\n\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## 配置真假值\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### 使用 Schema 配置文本\n\n> `3.6.0` 版本之后支持\n\n\n\n## 默认值\n\n和其它表单项一样，如果要设置默认值，可以使用 value 属性\n\n\n\n## 不同尺寸\n\n> `2.0.0` 及以上版本\n\n\n\n## 加载状态\n\n> `3.6.0` 及以上版本\n\n设置`\"loading\": true`, 标识开关操作的异步任务仍在执行中。另外`loadingOn`支持表达式\n\n\n\n配合`ajax`动作，实现开关操作后台异步任务：\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ---------- | ------------------------------------------ | ------- | -------------------- | ------------------ |\n| option | `string` | | 选项说明 |\n| onText | `string \\| IconSchema \\| SchemaCollection` | | 开启时开关显示的内容 | `3.6.0`支持 Schema |\n| offText | `string \\| IconSchema \\| SchemaCollection` | | 关闭时开关显示的内容 | `3.6.0`支持 Schema |\n| trueValue | `boolean \\| string \\| number` | `true` | 标识真值 |\n| falseValue | `boolean \\| string \\| number` | `false` | 标识假值 |\n| size | `\"sm\" \\| \"md\"` | `\"md\"` | 开关大小 |\n| loading | `boolean` | `false` | 是否处于加载状态 | `3.6.0` |\n\nIconSchema 配置\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | --------- | ------------ |\n| type | `string` | | `icon` |\n| icon | `string` | | icon 的类型 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------ | ---------------- |\n| change | `[name]: string \\| boolean` 组件的值 | 开关值变化时触发 |\n\n### change\n\nswitch 值更新时弹出确认提示，确认后发送请求。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------- | ---------------------------------------------------------------------- | --- |\n| clear | - | 清空，6.3.1 及以上版本支持 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue`，6.3.1 及以上版本支持 | |\n| setValue | `value: string \\| boolean` 更新的数据 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\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\": \"https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/form/saveForm\",\n \"body\": [\n {\n \"label\": \"选人\",\n \"type\": \"tabs-transfer-picker\",\n \"name\": \"a\",\n \"sortable\": true,\n \"selectMode\": \"tree\",\n \"pickerSize\": \"md\",\n \"menuTpl\": \"<div class='flex justify-between'><span>${label}</span>${email ? `<div class='text-muted m-r-xs text-sm text-right'>${email}<br />${phone}</div>`: ''}</div>\",\n \"valueTpl\": \"${label}(${value})\",\n \"options\": [\n {\n \"label\": \"成员\",\n \"selectMode\": \"tree\",\n \"searchable\": true,\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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------------------------------------- | ------------------------- |\n| change | `[name]: string` 组件的值<br/>`items: object[]` 选项集合 | picker 弹窗确认提交时触发 |\n| focus | `[name]: string` 组件的值 | 获取焦点(非内嵌模式) |\n| blur | `[name]: string` 组件的值 | 失去焦点(非内嵌模式) |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | -------------------------------------------------------- | ---------------- |\n| change | `[name]: string` 组件的值<br/>`items: Option[]` 选项集合 | 选中值变化时触发 |\n| tab-change | `key: number` 当前激活的选项卡索引 | 选项卡切换时触发 |\n\n### change\n\n\n\n### tab-change\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| ------------ | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| selectAll | - | 全选 |\n| changeTabKey | `activeKey: number` 选中的 Tab | 修改当前选中 tab，来选择其他选项 |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\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配置`\"showCounter\": true`后输入框将显示计数器，一般会配合`maxLength`属性以限制输入长度，如果不设置`maxLength`，则仅展示计数器，并不会限制用户的输入长度。\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\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | -------------------------- | -------------------- |\n| change | `[name]: string` 组件的值 | 值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |\n| blur | `[name]: string ` 组件的值 | 输入框失去焦点时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | ------------------------------------------------ |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| focus | - | 获取焦点 |\n| setValue | `value: string` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### focus\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/form/textarea"},{"title":"TransferPicker 穿梭选择器","body":"\n在的基础上扩充了弹窗选择模式，展示值用的是简单的 input 框，但是编辑的操作是弹窗个穿梭框来完成。\n\n\n\n## 自定义选项展示\n\n\n\n## 属性表\n\n下面属性为`transfer-picker`独占属性，更多属性用法，参考\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------------------------------- | ------ | -------------------------------------------------------------- |\n| borderMode | `'full'` \\| `'half'` \\| `'none'` | | 边框模式，`'full'`为全边框，`'half'`为半边框，`'none'`为没边框 |\n| pickerSize | string | | 弹窗大小，支持: xs、sm、md、lg、xl、full |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ----------------------------------------------------------------------------------------- | -------------------------------- |\n| change | `[name]: string` 组件的值<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | picker 弹窗确认提交时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点(非内嵌模式)时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点(非内嵌模式)时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | --------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\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`leftOptions` 动态加载，默认 `source` 接口是返回 options 部分，而 `leftOptions` 是没有对应的接口可以动态返回了。为了方便，目前如果 `source` 接口返回的选中中，第一个 option 是以下这种格式则也会把 options[0].leftOptions 当成 `leftOptions`, options[0].children 当 options。同时 options[0].leftDefaultValue 可以用来配置左侧选项的默认值。\n\n\n\n### 延时加载\n\n\n\n### 支持搜索\n\n#### 左侧搜索功能\n\n通过 `searchable` 字段来控制左侧选项栏的搜索功能。\n\n在不设置 `searchApi` 情况下，对输入框内容和对应列表项的 value、label 进行匹配，匹配成功就会左侧面板中显示。\n\n\n\n#### 右侧结果搜索功能\n\n右侧结果搜索是通过`resultSearchable`字段开启，设置该字段为 true 时开启。\n\n开启结果搜索后，目前默认通过 value、label 对输入内容进行模糊匹配。\n\n目前树的延时加载不支持结果搜索功能。\n\n\n\n#### searchApi\n\n设置这个 api，可以实现左侧选项搜索结果的检索。\n\n默认 GET，携带 term 变量，值为搜索框输入的文字，可从上下文中取数据设置进去。\n\n\n\n##### 响应\n\n格式要求如下：\n\n\n\n适用于需选择的数据/信息源较多时，用户可直观的知道自己所选择的数据/信息的场景，一般左侧框为数据/信息源，右侧为已选数据/信息，被选中信息同时存在于 2 个框内。\n\n### 结果面板跟随模式\n\n`resultListModeFollowSelect` 开启结果面板跟随模式。\n\n#### 表格跟随模式\n\n\n\n#### 树形跟随模式\n\n\n\n### 自定义选项展示\n\n\n\n## 分页\n\n> `3.6.0`及以上版本\n\n当数据量庞大时，可以开启数据源分页，此时左侧列表底部会出现分页控件，相关配置参考属性表。通常在提交表单中使用分页场景，处理数据量较大的数据源。如果需要在表单中回显已选值，建议同时设置`{\"joinValues\": false, \"extractValue\": false}`，因为已选数据可能位于不同的分页，如果仅使用 value 值作为提交值，可能会导致右侧结果区无法正确渲染。\n\n> 仅列表（list）和表格（table）展示模式支持分页，接口的数据结构参考\n\n\n\n### 前端分页\n\n> `3.6.0`及以上版本\n\n当使用数据域变量作为数据源时，支持实现前端一次性加载并分页\n\n\n\n## 属性表\n\n除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ----------------------------------- | ----------------------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| delimeter | `string` | `false` | |\n| joinValues | `boolean` | `true` | |\n| extractValue | `boolean` | `false` | |\n| searchApi | | | 如果想通过接口检索，可以设置这个 api。 |\n| resultListModeFollowSelect | `boolean` | `false` | 结果面板跟随模式，目前只支持`list`、`table`、`tree`（tree 目前只支持非延时加载的`tree`） |\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| searchable | `boolean` | `false` | 左侧列表搜索功能，当设置为 true 时表示可以通过输入部分内容检索出选项项。 |\n| searchPlaceholder | `string` | | 左侧列表搜索框提示 |\n| columns | `Array<Object>` | | 当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。 |\n| leftOptions | `Array<Object>` | | 当展示形式为 `associated` 时用来配置左边的选项集。 |\n| leftMode | `string` | | 当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。 |\n| rightMode | `string` | | 当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。 |\n| resultSearchable | `boolean` | `false` | 结果（右则）列表的检索功能，当设置为 true 时，可以通过输入检索模糊匹配检索内容（目前树的延时加载不支持结果搜索功能） |\n| resultSearchPlaceholder | `string` | | 右侧列表搜索框提示 |\n| menuTpl | `string` \\| | | 用来自定义选项展示 |\n| valueTpl | `string` \\| | | 用来自定义值的展示 |\n| itemHeight | `number` | `38` | 每个选项的高度，用于虚拟渲染 |\n| virtualThreshold | `number` | `100` | 在选项数量超过多少时开启虚拟渲染 |\n| pagination | `object` | | 分页配置 | `3.6.0` |\n| pagination.className | `string` | | 分页控件 CSS 类名 | `3.6.0` |\n| pagination.enable | `boolean` | | 是否开启分页 | `3.6.0` |\n| pagination.layout | `string` \\| `string[]` | `[\"pager\"]` | 通过控制 layout 属性的顺序，调整分页结构布局 | `3.6.0` |\n| pagination.perPageAvailable | `number[]` | `[10, 20, 50, 100]` | 指定每页可以显示多少条 | `3.6.0` |\n| pagination.maxButtons | `number` | `5` | 最多显示多少个分页按钮，最小为 5 | `3.6.0` |\n| pagination.popOverContainerSelector | `string` | | 切换每页条数的控件挂载点 | `3.6.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| --------- | ----------------------------------------------------------------------------------------- | ---------------- |\n| change | `[name]: string` 组件的值<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 选中值变化时触发 |\n| selectAll | `items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 全选时触发 |\n\n### change\n\n\n\n### selectAll\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| ----------- | ------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| clearSearch | `left: boolean` 左侧搜索、`right:boolean`右侧搜索 | 默认清除所有搜索态，可以单独配置`left`、`right`为`true`来清空对应左侧或者右侧面板(`3.4.0`及以上版本支持） |\n| selectAll | - | 全选 |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\n\n### setValue\n\n\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> 1.8.0 及以上版本\n\n在单选时，可通过 `onlyLeaf` 可以配置只允许选择叶子节点\n\n\n\n## 如何让某些节点无法点？\n\n只需要对应的节点没有 value 就行，比如下面例子的目录节点都无法点，只能点文件节点\n\n\n\n## 搜索选项\n\n> `2.7.1` 及以上版本\n\n配置`autoComplete`接口可以实现从远程数据搜索目标结果，搜索的关键字段为`term`，注意搜索的逻辑需要在服务端实现。\n\n\n\n## 自定义选项渲染\n\n> `2.8.0` 及以上版本\n\n使用`menuTpl`属性，自定义下拉选项的渲染内容。\n\n\n\n## 属性表\n\n下列属性为`tree-select`独占属性, 更多属性用法，参考\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ----------------- | --------- | ------- | ------------------------------------------------- | ---- |\n| hideNodePathLabel | `boolean` | `false` | 是否隐藏选择框中已选择节点的路径 label 信息 | |\n| onlyLeaf | `boolean` | `false` | 只允许选择叶子节点 | |\n| searchable | `boolean` | `false` | 是否可检索，仅在 type 为 `tree-select` 的时候生效 | |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |\n| change | `[name]: string` 组件的值 <br/>`item: object`选中的节点（6.2.0 及以上版本）<br/>`items: object[]`选项集合（3.6.0 及以上版本） | 选中值变化时触发 |\n| blur | `[name]: string` 组件的值 <br/>``item: object`选中的节点（6.2.0 及以上版本）<br/>items: object[]`选项集合（3.6.4 及以上版本） | 输入框失去焦点时触发 |\n| focus | `[name]: string` 组件的值 <br/>`item: object`选中的节点（6.2.0 及以上版本）<br/>`items: object[]`选项集合（3.6.4 及以上版本） | 输入框获取焦点时触发 |\n| addConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 新增的节点信息<br/>`items: object[]`选项集合 | 新增节点提交时触发 |\n| editConfirm (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`item: object` 编辑的节点信息<br/>`items: object[]`选项集合 | 编辑节点提交时触发 |\n| deleteConfirm (3.6.4 及以上版本) | `[name]: string` 组件的值<br/>`item: object` 删除的节点信息<br/>`items: object[]`选项集合 | 删除节点提交时触发 |\n| deferLoadFinished (3.6.4 及以上版本) | `[name]: object` 组件的值<br/>`result: object` deferApi 懒加载远程请求成功后返回的数据 <br/>`items: object[]`选项集合 | 懒加载接口远程请求成功时触发 |\n| itemClick (6.9.0 以上版本) | `value: any`表单项的值，值格式取决于具体配置<br/>`item: object` 点击的节点信息 | 节点点击时触发 |\n| add（不推荐） | `[name]: object` 新增的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 新增节点提交时触发 |\n| edit（不推荐） | `[name]: object` 编辑的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 编辑节点提交时触发 |\n| delete（不推荐） | `[name]: object` 删除的节点信息<br/>`items: object[]`选项集合（< 2.3.2 及以下版本 为`options`） | 删除节点提交时触发 |\n| loadFinished（不推荐） | `[name]: object` deferApi 懒加载远程请求成功后返回的数据 | 懒加载接口远程请求成功时触发 |\n\n### change\n\n\n\n### focus\n\n\n\n### blur\n\n\n\n### addConfirm\n\n配置 `creatable`后，可监听确认新增操作。\n\n\n\n### editConfirm\n\n配置 `editable`后，可监听确认编辑操作。\n\n\n\n### deleteConfirm\n\n配置 `removable`后，可监听确认删除操作。\n\n\n\n### deferLoadFinished\n\n\n\n### itemClick\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------------------- | ---------------------------------------------------------------------------------------------------------- |\n| add | `item: Option, parentValue?: any` | item 新增的数据项；parentValue 父级数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） |\n| edit | `item: Option, originValue: any` | item 编辑后的数据项；originValue 编辑前数据项的 value（如果配置了 valueField，以 valueField 的字段值为准） |\n| delete | value: ` any` | 删除数据项的 value，（如果配置了 valueField，以 valueField 的字段值为准） |\n| reload | - | 刷新 |\n| clear | - | 清空 |\n| reset | - | 将值重置为初始值。6.3.0 及以下版本为`resetValue` |\n| setValue | `value: string` \\| `string[]` 更新的值 | 更新数据，开启`multiple`支持设置多项，开启`joinValues`时，多值用`,`分隔，否则多值用数组 |\n\n### clear\n\n\n\n### reset\n\n如果配置了`resetValue`，则重置时使用`resetValue`的值，否则使用初始值。\n\n\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| contentClassName | `string` | | 列表项内容 css 类名 |\n| value | `Array<object>` | | 图片数组 |\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","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## 使用 v5/v6 版本的 fontawesome\n\n`icon`默认支持，如果想要支持 v5 以及 v6 版本的 fontawesome 请设置`vendor`为空字符串。\n\n### fontawesome v5 版本\n\nv5 用 far/fas 等表示前缀，可参考官网\n\n\n\n### fontawesome v6 版本\n\nv6 用 fa-regular / fa-solid 等表示前缀，可参考官网\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ------------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `icon` | 指定组件类型 |\n| className | `string` | | 外层 CSS 类名 |\n| icon | 或 通过 registerIcon 注册的 icon、或使用 url |\n| vendor | `string` | | icon 类型，默认为`fa`, 表示 fontawesome v4。也支持 iconfont, 如果是 fontawesome v5 以上版本或者其他框架可以设置为空字符串 |\n\n## 事件表\n\n> 2.6.1 及以上版本\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | -------- | -------------- |\n| click | - | 点击时触发 |\n| mouseenter | - | 鼠标移入时触发 |\n| mouseleave | - | 鼠标移出时触发 |\n\n### click\n\n鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseenter\n\n鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseleave\n\n鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n","path":"/zh-CN/components/icon"},{"title":"iFrame","body":"\n## 基本使用\n\n内嵌外部站点，可用 iframe 来实现。\n\n\n\n## src 使用动态数据\n\n### 数据域变量\n\n> 1.1.6\n\n\n\n## 其它原生 iframe 属性\n\n> 2.1.0 及以上版本\n\n还支持以下原生 iframe 属性，具体配置项请。\n\n- name\n- allow\n- sandbox\n- referrerpolicy\n\n## 支持 base64 格式\n\n> 2.4.0 及以上版本\n\n`src`属性支持传入符合 base64 编码标准的 \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\n可以通过以下两种方式实现 iframe 页面向 amis 通信：\n\n- 方式一：通过 events 属性，基于实现，有一定的局限性。\n- 方式二：通过 onEvent 属性，基于实现，更灵活。\n\n> 注意：如果同时配置了 events 和 onEvent，amis 都会执行，且 onEvent 配置的动作行为会先于 events 执行。\n\n步骤如下：\n\n1. 在 iframe 页面中定义消息名称和需要传递的数据。获取父级 window，并使用`postMessage`传递数据，格式如下，：\n\n\n\n`message`格式：\n\n- `type`: 标识要触发的 amis 行为，请使用 `amis:xxx` 的格式，这里我们设置为配置好的`detail`事件\n- `data`: 传给 amis 的数据，amis 会将该数据与当前数据域进行合并进行使用\n\n2. 在 amis 的 iframe 组件中指明需要监听的消息名称，以及需要执行的动作。\n\n```json\n// 方式一：即在 amis 的 iframe 配置项中配置 events 对象\n{\n \"type\": \"iframe\",\n \"src\": \"http://www.xxx.com\",\n \"events\": {\n \"detail\": {\n \"actionType\": \"dialog\", // 弹窗动作\n \"dialog\": {\n \"title\": \"弹框\",\n \"body\": \"iframe 传给 amis 的 id 是：${iframeId}\" // 在弹框中渲染`\"iframe 传给 amis 的 id 是：${iframeId}\"`这段模板，即111\n }\n }\n }\n}\n\n// 方式二：即在 amis 的 iframe 配置项中配置 onEvent 对象\n{\n \"type\": \"iframe\",\n \"src\": \"http://www.xxx.com\",\n \"onEvent\": {\n \"detail\": {\n \"actions\": [\n // 动作 1，弹窗动作\n {\n \"actionType\": \"dialog\",\n \"dialog\": {\n \"title\": \"弹框\",\n \"body\": \"iframe 传给 amis 的 id 是：${iframeId}\" // 在弹框中渲染`\"iframe 传给 amis 的 id 是：${iframeId}\"`这段模板，即111\n }\n },\n // 动作 2，触发指定组件的特性动作\n {\n \"actionType\": \"crud\",\n \"componentId\": \"form01\",\n \"data\": {\n \"iframeId\": \"${iframeId}\" // 刷新请求参数为`\"iframe 传给 amis 的 id 是：${iframeId}\"`这段模板，即111\n }\n }\n ]\n }\n }\n}\n```\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| allow | `string` | | allow 配置 |\n| sandbox | `string` | | sandbox 配置 |\n| referrerpolicy | `string` | | referrerpolicy 配置 |\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在列表中，图片组件的放大模式下默认展示所有行的图片信息，设置`\"enlargeWithGallary\": true`效果相同。\n\n\n\n在列表中，图片组件配置`\"enlargeWithGallary\": false`可以关闭放大模式下图片集列表的展示。\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> 2.2.0 及以上版本\n\n配置`\"showToolbar\": true`使图片在放大模式下开启图片工具栏。配置`\"toolbarActions\"`属性可以自定义工具栏的展示方式，具体配置参考\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ------------------ | ------------------------------------------------ | --------- | --------------------------------------------------------------------------------------------- | ------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"image\"`；在 Form 中用作静态展示，为`\"static-image\"` |\n| className | `string` | | 外层 CSS 类名 |\n| innerClassName | `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| enlargeWithGallary | `string` | `true` | 在表格中，图片的放大功能会默认展示所有图片信息，设置为`false`将关闭放大模式下图片集列表的展示 |\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| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |\n| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |\n| maxScale | `number` 或 | | 执行调整图片比例动作时的最大百分比 | `3.4.4` |\n| minScale | `number` 或 | | 执行调整图片比例动作时的最小百分比 | `3.4.4` |\n\n#### ImageAction\n\n\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | ---------- | -------------- |\n| click | 上下文数据 | 点击图片时触发 |\n| mouseenter | 上下文数据 | 鼠标移入时触发 |\n| mouseleave | 上下文数据 | 鼠标移入时触发 |\n\n### click / mouseenter / mouseleave\n\n点击图片 / 鼠标移入图片 / 鼠标移出图片，可以尝试通过${event.context.nativeEvent}获取鼠标事件对象。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------ |\n| preview | - | 预览图片 |\n| zoom | `scale: number` 或 `scale: `，定义每次放大或缩小图片的百分比大小，正值为放大，负值为缩小，默认 50 | 调整图片比例，将图片等比例放大或缩小 |\n\n### preview\n\n预览图片，可以通过配置`originalSrc`来指定预览的原图地址。\n\n\n\n### zoom\n\n调整图片比例，将图片等比例放大或缩小。可以通过配置图片的`maxScale`和`minScale`来限制调整的比例。\n\n\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图片组件配置`\"enlargeWithGallary\": false`可以关闭放大模式下图片集列表的展示，表格中亦是如此。\n\n\n\n## 用作 Field 时\n\n当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置`name`属性，映射同名变量\n\n### Table 中的列类型\n\n\n\nTable 中图片组件配置`\"enlargeWithGallary\": true`可以在放大模式下预览列表中的所有图片集。\n\n\n\nTable 中图片组件配置`\"enlargeWithGallary\": false`可以关闭放大模式下图片集列表的展示。\n\n\n\nList 的内容、Card 卡片的内容配置同上。\n\n### Form 中关联数据静态展示\n\n\n\n## 工具栏\n\n> 2.2.0 及以上版本\n\n配置`\"showToolbar\": true`使图片在放大模式下开启图片工具栏。配置`\"toolbarActions\"`属性可以自定义工具栏的展示方式，具体配置参考\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<string>`或`Array<object>` | | 图片数组 |\n| source | `string` | | 数据源 |\n| delimiter | `string` | `,` | 分隔符，当 value 为字符串时，用该值进行分隔拆分 |\n| src | `string` | | 预览图地址，支持数据映射获取对象中图片变量 |\n| originalSrc | `string` | | 原图地址，支持数据映射获取对象中图片变量 |\n| enlargeAble | `boolean` | | 支持放大预览 |\n| enlargeWithGallary | `string` | | 默认在放大功能展示图片集的所有图片信息；表格中使用时，设置为`true`将展示所有行的图片信息；设置为`false`将关闭放大模式下图片集列表的展示 |\n| thumbMode | `string` | `contain` | 预览图模式，可选：`'w-full'`, `'h-full'`, `'contain'`, `'cover'` |\n| thumbRatio | `string` | `1:1` | 预览图比例，可选：`'1:1'`, `'4:3'`, `'16:9'` |\n| showToolbar | `boolean` | `false` | 放大模式下是否展示图片的工具栏 | `2.2.0` |\n| toolbarActions | `ImageAction[]` | | 图片工具栏，支持旋转，缩放，默认操作全部开启 | `2.2.0` |\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> 2.0.0 及以上版本\n\n设置`ellipsisThreshold`可以设置字符串的最大展示长度，点击字符串可以切换全量/部分展示方式，默认展示全量字符串。\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| ellipsisThreshold | `number` | `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","path":"/zh-CN/components/link"},{"title":"List 列表","body":"\n列表展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n\n\n## 选择模式\n\n设置`\"selectable\": true`, 列表开启多选模式\n\n\n\n列表默认支持多选，设置`\"multiple\": false`开启单选模式\n\n\n\n或者你也可以使用 CRUD 的 \n\n## 单行点击操作\n\n> 1.4.0 及以上版本\n\n配置 itemAction 可以实现点击某一行后进行操作，支持 里的所有配置，比如弹框、刷新其它组件等。\n\n\n\n## 设置组件的 CSS 类\n\n`className`属性会添加到组件外层 DOM 节点上，如果要在组件当前层级添加 CSS 类，请设置`innerClassName`属性\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------------ | ------------------------------------ | --------------------- | ---------------------------------------------------------------------------- |\n| type | `string` | | `\"list\"` 指定为列表展示。 |\n| title | `string` | | 标题 |\n| source | `string` | `${items}` | 数据源, 获取当前数据域变量，支持 |\n| placeholder | `string` | ‘暂无数据’ | 当没数据的时候的文字提示 |\n| selectable | `boolean` | `false` | 列表是否可选 |\n| multiple | `boolean` | `true` | 列表是否为多选 |\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 | `ListBodyField[]` | | 内容容器，主要用来放置非表单项组件 |\n| listItem.actions | Array<> | | 按钮区域 |\n| listItem.actionsPosition | 'left' or 'right' | 默认在右侧 | 按钮位置 |\n\n### ListBodyField\n\n\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 | 版本 |\n| --------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------- |\n| itemClick | `item: IItem` | 单行被点击时触发，`IItem`为点击行的信息。注意`itemAction`和`onEvent`是互斥的，List 组件中的`onEvent`会覆盖`itemAction`的行为 | `2.4.0` |\n\n**IItem**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | --------------------- | ------ | ------------------- |\n| data | `Record<string, any>` | | 当前行所在数据域 |\n| index | `number` | | 行索引值，从 0 开始 |\n\n### itemClick\n\n\n\n## 动作表\n\n> 6.4.0 或更高版本\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| --------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| select | `args.index` 可选，指定行数，支持表达式 <br /> `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合 index` | 设置列表的选中项 |\n| selectAll | - | 设置列表全部项选中 |\n| clearAll | - | 清空列表所有选中项 |\n| initDrag | - | 开启列表拖拽排序功能 |\n| cancelDrag | - | 放弃列表拖拽排序功能 |\n| setValue | `args.value`: object <br />`args.index` 可选，指定行数，支持表达式 <br /> `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合 | 更新列表记录 |\n| submitQuickEdit | | 快速编辑数据提交 |\n\n### select\n\n- `args.index` 可选，指定行数，支持表达式\n- `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合\n\n\n\n### selectAll\n\n\n\n### clearAll\n\n\n\n### initDrag & cancelDrag\n\n\n\n### setValue\n\n#### 更新列表记录\n\n\n\n#### 更新指定行记录\n\n可以通过指定`index`或者`condition`来分别更新指定索引的行记录和指定满足条件（条件表达式或者 ConditionBuilder）的行记录，另外`replace`同样生效，即可以完全替换指定行记录，也可以对指定行记录做合并。\n\n\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': 'http://localhost:8888',\n 'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',\n 'Access-Control-Allow-Credentials': 'true',\n 'Access-Control-Allow-Headers': '*'\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如果后端无法提供流的方式，也可以通过轮询的方式获取数据，比如：\n\n\n\n此示例利用了 Service 组件的轮询能力，并通过 `concatDataFields` 将多次返回的日志拼接起来，然后通过给 log 设置 `source` 属性来关联日志数据。\n\n## 对于超长日志的优化\n\n> 1.10.0 及以上版本\n\n如果日志非常长会导致页面卡顿，这时有几种处理方法，请根据需求进行选择，也可以都使用：\n\n1. 设置 `rowHeight`，比如 `\"rowHeight\": 22`，这时就会默认启用虚拟渲染，避免渲染卡顿\n - 优点：仍然可以查看所有日志\n - 缺点：如果某一行日志很长也不会自动折行，会出现水平滚动条；目前暂时不支持 autoScroll\n2. 设置 `maxLength`，限制最大显示行数\n - 优点：某一行日志很长的时候会自动折行\n - 缺点：无法查看之前的日志\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| disableColor | `boolean` | false | 是否禁用 ansi 颜色支持 |\n| placeholder | `string` | | 加载中的文字 |\n| encoding | `string` | utf-8 | 返回内容的字符编码 |\n| source | `string` | | 接口 |\n| credentials | `string` | 'include' | fetch 的 credentials 设置 |\n| rowHeight | `number` | | 设置每行高度，将会开启虚拟渲染 |\n| maxLength | `number` | | 最大显示行数 |\n| operation | `Array` | | 可选日志操作：['stop','restart',clear','showLineNumber','filter'] |\n","path":"/zh-CN/components/log"},{"title":"Mapping 映射","body":"\n## 基本用法\n\n\n\n## 渲染 HTML\n\n\n\n## 渲染其它组件\n\n映射的值也可以是 amis schema，渲染其它组件\n\n> 配置了`itemSchema`后，映射值不会再作为`schema`渲染\n\n\n\n## 渲染 自定义模板\n\n> since 2.5.2\n\n可配置`itemSchema` 渲染自定义模板，支持`HTML`或`schema`； \n当映射值是`非object`时，可使用`${item}`获取映射值；\n\n### html 或字符串模板\n\n使用`${item}` 获取映射值\n\n\n\n### SchemaNode 模板\n\n\n\n### 在模板中渲染数据\n\n- 当映射值是`object`时，使用模板语法可获取`object`属性值\n- 当映射值是`非object`时，使用`${item}` 获取映射值\n- 也可以获取数据域中的其他数据\n\n\n\n## 映射展示多个\n\n> 1.5.0 及以上版本\n\n如果返回值是数组会显示为多个\n\n\n\n## map 映射源\n\n### k-v 对象\n\n\n\n### 对象数组\n\n> since 2.5.2\n\n#### 简单对象数组\n\n\n\n#### 多 key 对象数组\n\n当映射值有多个 key 时，需要使用`valueField`指定字段作为`mapping`的`key`, 也就是用来匹配`value`的值 \n可使用`labelField`指定展示字段，不配置时，默认为`label` \n**注意：**配置`labelField`后，映射值无法再作为`schema`渲染\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> 注意：当数据域里的变量值为`$$`时, 表示将所有接口返回的`data`字段值整体赋值到对应的 key 中\n\n\n\n## 占位文本\n\n通过 `placeholder` 可以控制数据不存在时的展现\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | `string` | | 外层 CSS 类名 |\n| placeholder | `string` | | 占位文本 |\n| map | `object`或`Array<object>` | | 映射配置 |\n| source | `string` or `API` | | |\n| valueField | `string` | value | `2.5.2` map 或 source 为`Array<object>`时，用来匹配映射的字段名 |\n| labelField | `string` | label | `2.5.2` map 或 source 为`Array<object>`时，用来展示的字段名<br />注：配置后映射值无法作为`schema`组件渲染 |\n| itemSchema | `string`或 | | `2.5.2` 自定义渲染模板，支持`html`或`schemaNode`；<br /> 当映射值是`非object`时，可使用`${item}`获取映射值；<br />当映射值是`object`时，可使用映射语法: `${xxx}`获取`object`的值；<br /> 也可使用数据映射语法：`${xxx}`获取数据域中变量值。 |\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## 支持 latex\n\n> 3.6.0 及以上版本\n\n公式渲染使用 KaTeX 实现，由于体积太大默认不提供，需要自己去，在页面中引入以下三个文件：\n\n\n\nmarkdown 中的 `$` 或 `$$` 包裹的内容就能以公式展现，比如 `$\\sqrt{a^2 + b^2}$`，如果是在代码中 `\\` 要转义为 `\\\\`\n\n\n\n## 高级配置\n\n> 1.8.1 及以上版本\n\n有以下配置：\n\n- html，是否支持 html 标签，默认 false\n- linkify，是否自动识别链接，默认值是 true\n- breaks，是否回车就是换行，默认 false\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垂直（`\"stack\": true`）模式下，如果子导航项比较多，也可以给导航项设置收纳模式，配置同`overflow`，仅支持一次性展开\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可以通过设置`mode`属性来控制导航模式，不设置默认为内联导航模式\n\n\n\n## 导航缩起\n\n`collapsed`属性控制导航的展开和缩起，缩起状态下，导航内容仅展示图标或第一个文字，悬浮展开全部内容或子导航项\n\n\n\n## 导航分割线\n\n导航项`mode`属性控制导航项的展示模式，支持`divider`（分割线）和`group`（分组）两种模式，不设置默认为普通导航项\n\n\n\n## 导航分组\n\n分组模式（`\"mode\": \"group\"`）的导航项展示为分组标题形式\n\n\n\n## 默认展开层级\n\n当前导航最大层级为 4，可通过`defaultOpenLevel`来控制默认 2 层级全部展开\n\n\n\n## 自定义展开按钮\n\n可以设置`expandIcon`为 icon 的名称字符串\n\n\n\n也可以将`expandIcon`设置为`SchemaObject`\n\n\n\n## 搜索导航项\n\n> `3.5.0` 及以上版本\n\n开启`\"searchable\": true`后，支持搜索当前数据源内的导航项，支持自定义匹配函数，如果不设置默认模糊匹配导航对象中的`label`, `title` 和 `key` 字段。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| --------------------------------- | ----------------------------------------- | ------------------------------- | ---------------------------------------------------------------------------------------- | ------- |\n| type | `string` | `\"nav\"` | 指定为 Nav 渲染器 |\n| mode | `string` | `\"inline\"` | 导航模式，悬浮或者内联，默认内联模式 |\n| collapsed | `boolean` | | 控制导航是否缩起 |\n| indentSize | `number` | `16` | 层级缩进值，仅内联模式下生效 |\n| level | `number` | | 控制导航最大展示层级数 |\n| defaultOpenLevel | `number` | | 控制导航最大默认展开层级 |\n| className | `string` | | 外层 Dom 的类名 |\n| popupClassName | `string` | | 当为悬浮模式时，可自定义悬浮层样式 |\n| expandIcon | `string \\| SchemaObject` | | 自定义展开按钮 |\n| expandPosition | `string` | | 展开按钮位置，`\"before\"`或者`\"after\"`，不设置默认在前面 |\n| stacked | `boolean` | `true` | 设置成 false 可以以 tabs 的形式展示 |\n| accordion | `boolean` | | 是否开启手风琴模式 |\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<link>` | | 子链接 |\n| links[x].unfolded | `boolean` | | 初始是否展开 |\n| links[x].active | `boolean` | | 是否高亮 |\n| links | | 是否高亮的条件，留空将自动分析链接地址 |\n| links[x].defer | `boolean` | | 标记是否为懒加载项 |\n| links | | 可以不配置，如果配置优先级更高 |\n| links[x].disabled | `boolean` | | 是否禁用 |\n| links[x].disabledTip | `string` | | 禁用提示信息 |\n| links[x].className | `string` | | 菜单项自定义样式 |\n| links[x].mode | `string` | | 菜菜单项模式，分组模式：`\"group\"`、分割线：`\"divider\"` |\n| links[x].overflow | `NavOverflow` | | 导航项响应式收纳配置 |\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| searchable | `boolean` | `false` | 是否开启搜索 | `3.5.0` |\n| searchConfig.matchFunc | `string` | | 自定义匹配函数, 默认模糊匹配导航对象中的`label`, `title` 和 `key` 字段 | `3.5.0` |\n| searchConfig.className | `string` | `\"\"` | 搜索框外层 CSS 类名 | `3.5.0` |\n| searchConfig.placeholder | `string` | `false` | 是否开启搜索 | `3.5.0` |\n| searchConfig.mini | `boolean` | `false` | 是否为 mini 模式 | `3.5.0` |\n| searchConfig.enhance | `boolean` | `false` | 是否为增强样式 | `3.5.0` |\n| searchConfig.clearable | `boolean` | `false` | 是否开启搜索 | `3.5.0` |\n| searchConfig.searchImediately | `boolean` | `false` | 是否立即搜索 | `3.5.0` |\n\n### NavMatchFunc\n\n\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| --------- | --------------------------------------------------------------- | ------------------------ |\n| loaded | `items: item[]` 数据源<br/>`item?: object` 懒加载时所点击导航项 | 异步加载数据源完成时触发 |\n| collapsed | `collapsed: boolean` 缩起展开状态 | 导航缩起展开时触发 |\n| toggled | `item: object` 导航项数据<br/>`open: boolean` 展开状态 | 点击导航展开按钮时触发 |\n| change | `value: item[]` 选中导航项数据 | 导航项选中有变化时触发 |\n| click | `item: object` 点击导航项数据 | 手动点击导航项时触发 |\n\n### loaded\n\n数据源加载完成，可以尝试将`source`配置为 api 地址或者开启懒加载。\n\n\n\n### collapsed\n\n导航缩起，可以尝试修改导航的`collapsed`属性。\n\n\n\n### toggled\n\n导航项收起展开，可以尝试点击导航项展开按钮。\n\n\n\n### change\n\n导航项选中，可以尝试手动修改任意导航项的`active`属性。\n\n\n\n### click\n\n导航项点击，可以尝试手动点击任意导航项。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| ----------- | -------------------------------- | --------------------------------------------------------------------------------------- |\n| updateItems | `value: string`或`value: item[]` | 更新导航数据源为指定导航项的子导航数据 |\n| reset | | 重置导航数据源，和 updateItems 搭配使用，没有经过 updateItems 操作的，执行 reset 无效果 |\n\n### updateItems / reset\n\n\n","path":"/zh-CN/components/nav"},{"title":"Number 数字展示","body":"\n用于展示数字\n\n## 基本使用\n\n\n\n## 配置精度\n\n配置 `precision` 属性来控制小数点位数\n\n\n\n## 百分比展示\n\n配置 `percent` 来开启百分比展示，这个属性同时控制小数位数，如果是 `true` 则表示小数点位数为 `0`。\n\n\n\n## 前缀、后缀\n\n配置 `prefix` 或者 `affix` 来控制前缀后缀，可以用来实现单位效果。\n\n\n\n## inputNumber 静态展示\n\ninputNumber 配置 `static` 为 `true` 也会通过此组件来展示\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | --------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | | 如果在 Table、Card 和 List 中，为`\"number\"`；在 Form 中用作静态展示，为`\"static-number\"` 或者 `input-number` 配置 static 属性 |\n| className | `string` | | 外层 CSS 类名 |\n| value | `string` | | 数值 |\n| name | `string` | | 在其他组件中，时，用作变量映射 |\n| placeholder | `string` | `-` | 占位内容 |\n| kilobitSeparator | `boolean` | `true` | 是否千分位展示 |\n| precision | `number` | | 用来控制小数点位数 |\n| percent | `boolean` \\| `number` | | 是否用百分比展示，如果是数字，还可以控制百分比小数点位数 |\n| prefix | `string` | | 前缀 |\n| affix | `string` | | 后缀 |\n","path":"/zh-CN/components/number"},{"title":"Office Viewer Excel","body":"\n> 6.3 及以上版本\n\n## 基本用法\n\n\n\n除了 `xlsx`，也支持后缀为 `csv` 及 `tsv` 的文件\n\n## 配置项\n\n由于接口可能有变化，这里只列出少量配置项，后续补充\n\n\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ------ | ------------------------ |\n| showFormulaBar | `boolean` | true | 是否显示公式拦 |\n| showSheetTabBar | `boolean` | true | 是否显示底部 sheet 切换 |\n| fontURL | `object` | | 字体地址，参考下面的说明 |\n\n## 字体配置\n\n由于浏览器中缺少特定字体，将展现会不一致，这些字体都是有版权的，因此本项目中不提供，需要自行准备，然后配置 `fontURL` 映射到对应的地址，渲染时就会加载。\n\n类似如下配置\n\n\n","path":"/zh-CN/components/office-viewer-excel"},{"title":"Office Viewer","body":"\n> 2.9.0 及以上版本\n\n用于渲染 office 文档，目前只支持 docx 和 xlsx 格式，本文档只介绍 docx 的配置，xlsx 的配置请参考 \n\n## 基本用法\n\n\n\n## 渲染配置项\n\n目前只支持 Word 文档，所以只有 word 的配置项，放在 `wordOptions` 下\n\nWord 渲染支持以下功能：\n\n- 基础文本样式\n- 表格及表格样式\n- 内嵌图片\n- 列表\n- 注音\n- 链接\n- 文本框\n- 形状\n- 数学公式（依赖 MathML，需要比较新的浏览器，或者试试 ）\n- 分页渲染\n\n不支持的功能：艺术字、域、对象、目录\n\n### word 渲染配置属性表\n\n\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------- | ------------- | ---------------------------------------------------------- |\n| classPrefix | `string` | 'docx-viewer' | 渲染的 class 类前缀 |\n| ignoreWidth | `boolean` | false | 忽略文档里的宽度设置，用于更好嵌入到页面里，但会减低还原度 |\n| padding | `string` | | 设置页面间距，忽略文档中的设置 |\n| bulletUseFont | `boolean` | true | 列表使用字体渲染，请参考下面的乱码说明 |\n| fontMapping | `object` | | 字体映射，是个键值对，用于替换文档中的字体 |\n| forceLineHeight | `string` | | 设置段落行高，忽略文档中的设置 |\n| enableVar | `boolean` | true | 是否开启变量替换功能 |\n| printOptions | `object` | | 针对打印的特殊设置，可以覆盖其它所有设置项 |\n\n#### 分页渲染\n\n> 2.10.0 及以上版本\n\n默认情况下 word 文档渲染使用流式布局，这样能更好融入到已有页面中，但展现上会和原先的文档有较大差异，且不支持页眉页脚，如果希望能看起来更像桌面端的效果，可以通过 `page` 配置开启分页渲染\n\n\n\n分页渲染的其它设置项\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | --------- | --------- | ------------------------------------------ |\n| page | `boolean` | false | 是否开启分页渲染 |\n| pageMarginBottom | `number` | 20 | 页面上下间距 |\n| pageBackground | `string` | '#FFF' | 页面内背景色 |\n| pageShadow | `boolean` | true | 是否显示阴影 |\n| pageWrap | `boolean` | true | 是否显示页面包裹 |\n| pageWrapBackground | `string` | '#ECECEC' | 页面包裹的背景色 |\n| zoom | `number` | | 缩放比例，取值 0-1 之间 |\n| zoomFitWidth | `boolean` | false | 自适应宽度缩放，如果设置了 zoom 将不会生效 |\n\n### 关于渲染效果差异\n\n目前的实现难以保证和本地 Word 渲染完全一致，会遇到以下问题：\n\n1. 字体大小不一致\n1. 单元格宽度不一致，表格完全依赖浏览器渲染\n\n如果追求完整效果打印，目前只能使用下载文件的方式用本地 Word 进行打印。\n\n## 列表符号出现乱码问题\n\n默认情况下列表左侧的符号使用字体渲染，这样能做到最接近 Word 渲染效果，但如果用户的系统中没有这些字体就会显示乱码，为了解决这个问题需要手动在 amis 渲染的页面里导入对应的字体，比如\n\n\n\n目前已知会有 `Wingdings` 和 `Symbol` 两个字体，可能还有别的\n\n如果不想嵌入这两个字体，就只能在前面的 `wordOptions` 里设置 `bulletUseFont: false`。\n\n## 变量替换\n\n文档可以预先定义变量，通过配置 `enableVar` 来开启这个功能，在实际渲染时根据上下文数据来渲染变量，比如\n\n\n\n如果关闭将显示原始文档\n\n\n\n### 变量说明\n\n目前变量使用的写法是 `{{name}}`，其中 `name` 代表变量名，另外这里可以是 amis 表达式，比如前面示例的 `{{DATETOSTR(TODAY(), 'YYYY-MM-DD')}}`\n\n**Word 经常会自作主张进行语法检查，生成无关的标签导致变量替换出错，解决办法是参考这个，将所有语法检查都忽略掉，也就是文档里不再有飘红的文字**\n\n### 表格行循环\n\n目前针对表格支持循环语法，下面例子中第一个是模板里的变量写法，循环以 `{{#xxx}}` 开头，`{{/}}` 结束（不过目前还不支持嵌套语法，所以这个结束符合可以省略）\n\n\n\n循环的语法是以 `{{#name}}` 开始，`{{/}}` 结束，在这期间的变量会取循环内的值。\n\n注意上面的例子用到了 `trackExpression`，默认情况下如果设置了 `enableVar`，每次上层数据变化都会重新渲染文档，如果文档较大可能会有性能问题，这时可以通过配置 `trackExpression` 来限制只有某个数据变化时才重新渲染。\n\n### 图片中的变量\n\n> 2.10 及以上版本\n\n如果要将文档中的图片设置为变量，需要右键对应的图片，选择「查看可选文字」，然后填入类似 `{{img}}` 变量标识，在渲染时图片将替换为这个 `img` 变量的 url 地址\n\n\n\n下面是示例\n\n\n\n## 不渲染模式\n\n通过配置 `display: false` 可以让文档不渲染，虽然不渲染，但还是可以使用后面的下载及打印功能\n\n## 下载文档\n\n基于事件动作实现\n\n\n\n## 打印文档\n\n基于事件动作实现\n\n\n\n有个 `printOptions` 配置项可以用来自定义在打印时的配置，默认设置是：\n\n\n\n## 配合文件上传实现预览功能\n\n配置和 `input-file` 相同的 `name` 即可\n\n\n\n## 是否显示 loading\n\n通过 `\"loading\": true` 配置显示 loading，主要用于网络较慢的场景。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | ------ | --------------------- |\n| src | Api | | 文档地址 |\n| loading | `boolean` | false | 是否显示 loading 图标 |\n| enableVar | `boolean` | | 是否开启变量替换功能 |\n| wordOptions | `object` | | Word 渲染配置 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------- | -------- |\n| saveAs | `name?: string` 文件名 | 下载文档 |\n| print | - | 打印文档 |\n","path":"/zh-CN/components/office-viewer"},{"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上面的配置会自动创建一个 `<style>` 标签，其中内容就是：\n\n\n\n配置写法和编写普通 css 的体验是一致的，可以使用任意 css 选择符及属性。\n\n## aside 可调整宽度\n\n通过配置 `asideResizor`，可以让侧边栏支持动态调整宽度，同时可以通过 `asideMinWidth`、`asideMaxWidth` 设置 aside 最大最小宽度。\n\n\n\n## aside 位置固定\n\n通过配置 `asideSticky` 来开关，默认是开启状态。\n\n## aside 展示位置\n\n通过配置 `asidePosition`，可以控制侧边栏的展示位置。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ----------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------------------------- |\n| type | `string` | `\"page\"` | 指定为 Page 组件 |\n| title | | | 页面标题 |\n| subTitle | | | 页面副标题 |\n| remark | | | 标题附近会出现一个提示图标，鼠标放上去会提示该内容。 |\n| aside | | | 往页面的边栏区域加内容 |\n| asideResizor | `boolean` | | 页面的边栏区域宽度是否可调整 |\n| asideMinWidth | `number` | | 页面边栏区域的最小宽度 |\n| asideMaxWidth | `number` | | 页面边栏区域的最大宽度 |\n| asideSticky | `boolean` | true | 用来控制边栏固定与否 |\n| asidePosition | `\"left\" \\| \"right\"` | `\"left\"` | 页面边栏区域的位置 |\n| toolbar | | | 往页面的右上角加内容，需要注意的是，当有 title 时，该区域在右上角，没有时该区域在顶部 |\n| body | | | 往页面的内容区域加内容 |\n| className | `string` | | 外层 dom 类名 |\n| cssVars | `object` | | 自定义 CSS 变量，请参考 |\n| toolbarClassName | `string` | `v-middle wrapper text-right bg-light b-b` | Toolbar dom 类名 |\n| bodyClassName | `string` | `wrapper` | Body dom 类名 |\n| asideClassName | `string` | `w page-aside-region bg-auto` | Aside dom 类名 |\n| headerClassName | `string` | `bg-light b-b wrapper` | Header 区域 dom 类名 |\n| initApi | | | Page 用来获取初始数据的 api。返回的数据可以整个 page 级别使用。 |\n| initFetch | `boolean` | `true` | 是否起始拉取 initApi |\n| initFetchOn | | | 是否起始拉取 initApi, 通过表达式配置 |\n| interval | `number` | `3000` | 刷新时间(最小 1000) |\n| silentPolling | `boolean` | `false` | 配置刷新时是否显示加载动画 |\n| stopAutoRefreshWhen | | `\"\"` | 通过表达式来配置停止刷新的条件 |\n| pullRefresh | `object` | `{disabled: true}` | 下拉刷新配置（仅用于移动端） |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------- |\n| init | - | 组件实例被创建并插入 DOM 中时触发。2.4.1 及以上版本 |\n| inited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 |\n| pullRefresh | - | 开启下拉刷新后，下拉释放后触发（仅用于移动端） |\n\n### init 和 inited\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------------------------- | ---------------------------------------- |\n| reload | - | 重新加载，调用 `intiApi`，刷新数据域数据 |\n| setValue | `value: object` 更新的数据 | 更新数据 |\n\n### reload\n\n#### 只做刷新\n\n重新发送`initApi`请求，刷新 Page 时，只配置`componentId`目标组件 ID 即可。\n\n\n\n#### 发送数据并刷新\n\n刷新 Page 组件时，如果配置了`data`，将先发送`data`给目标组件，并将该数据合并到目标组件的数据域中（如果配置`\"dataMergeMode\": \"override\"`将覆盖目标组件的数据），然后重新请求数据。\n\n\n\n### setValue\n\n通过`setValue`更新指定页面组件的数据。\n\n#### 合并数据\n\n默认`setValue`会将新数据与目标组件数据进行合并。\n\n\n\n#### 覆盖数据\n\n可以通过`\"dataMergeMode\": \"override\"`来覆盖目标组件数据。\n\n\n","path":"/zh-CN/components/page"},{"title":"PaginationWrapper 分页容器","body":"\n分页容器组件，可以用来对已有列表数据做分页处理。\n\n- 输入：默认读取作用域中的 items 变量，如果是其他变量名请配置 `inputName`。\n- 输出：经过分页处理后会把分页后的数据下发给 `outputName` （默认也是 items）对应的数据。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------- |\n| type | `string` | `\"pagination-wrapper\"` | 指定为 Pagination-Wrapper 渲染器 |\n| showPageInput | `boolean` | `false` | 是否显示快速跳转输入框 |\n| maxButtons | `number` | `5` | 最多显示多少个分页按钮 |\n| inputName | `string` | `\"items\"` | 输入字段名 |\n| outputName | `string` | `\"items\"` | 输出字段名 |\n| perPage | `number` | `10` | 每页显示多条数据 |\n| position | `'top'` 或 `'bottom'` 或 `'none'` | `\"top\"` | 分页显示位置，如果配置为 none 则需要自己在内容区域配置 pagination 组件，否则不显示 |\n| body | | | 内容区域 |\n","path":"/zh-CN/components/pagination-wrapper"},{"title":"Pagination 分页组件","body":"\n## 基本用法\n\n\n\n## 微型模式\n\n> `6.0.0`及以上版本\n\n配置`\"size\": \"sm\"`可实现微型模式\n\n\n\n\n## 简洁模式\n\n配置`\"mode\": \"simple\"`可实现简洁模式，支持input框输入指定页码跳转，input框中也可以通过键盘上下键进行页码跳转\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ---------------- | -------------------------- | ---------------------------------------- | --------------------------------------------------------- | --- |\n| type | `string` | `\"pagination\"` | 指定为 Pagination 渲染器 |\n| mode | `normal` \\| `simple` | `normal` | 迷你版本/简易版本 只显示左右箭头，配合 hasNext 使用 |\n| layout | `string` \\| `string[]` | `[\"pager\"]` | 通过控制 layout 属性的顺序，调整分页结构布局 |\n| maxButtons | `number` \\| `string` | `5` | 最多显示多少个分页按钮，最小为 5 |\n| total | `number` \\| `string` | | 总条数 |\n| activePage | `number` \\| `string` | `1` | 当前页数 |\n| perPage | `number` \\| `string` | `10` | 每页显示多条数据 |\n| showPerPage | `boolean` | false | 是否展示 perPage 切换器 layout 和 showPerPage 都可以控制 |\n| size | `'sm' \\| 'md'` | `md` | 组件尺寸，支持`md`、`sm`设置 |`6.0.0`后支持变量\n| ellipsisPageGap | `number` \\| `string` | 5 | 多页跳转页数，页数较多出现`...`时点击省略号时每次前进/后退的页数，默认为5 | `6.0.0`后支持变量\n| perPageAvailable | `number[]` | `[10, 20, 50, 100]` | 指定每页可以显示多少条 |\n| showPageInput | `boolean` | false | 是否显示快速跳转输入框 layout 和 showPageInput 都可以控制 |\n| disabled | `boolean` | false | 是否禁用 |\n| onPageChange | page、perPage 改变时会触发 | (page: number, perPage: number) => void; | 分页改变触发 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n> | 事件名称 | 事件参数 | 说明 |\n> | -------- | ------------------------------------- | ------------------------------------------- |\n> | change | `page: number` 当前页码的值<br/>`perPage: number` 每页显示的记录数 | 当前页码值改变时触发 |\n\n### change\n\n切换页码时，通过更新 service 数据域中的 page 来实现联动刷新 table 表格数据。\n\n\n\n切换页码时，通过向 service 发送 page 并重新加载 service 数据来实现联动刷新 table 表格数据。\n\n\n","path":"/zh-CN/components/pagination"},{"title":"Panel 面板","body":"\n可以把相关信息以面板的形式展示到一块。\n\n## 基本用法\n\n\n\n## 底部配置按钮\n\n可以通过配置`actions`数组，实现渲染底部按钮栏\n\n\n\n## 固定底部\n\n有时 panel 内，内容过多，导致底部操作按钮不是很方便，可以配置`\"affixFooter\": true`，将底部部分贴在浏览器底部展示。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------- | -------------------------------------- | ------------------- |\n| type | `string` | `\"panel\"` | 指定为 Panel 渲染器 |\n| className | `string` | `\"panel-default\"` | 外层 Dom 的类名 |\n| headerClassName | `string` | `\"panel-heading\"` | header 区域的类名 |\n| footerClassName | `string` | `\"panel-footer bg-light lter wrapper\"` | footer 区域的类名 |\n| actionsClassName | `string` | `\"panel-footer\"` | actions 区域的类名 |\n| bodyClassName | `string` | `\"panel-body\"` | body 区域的类名 |\n| title | | | 标题 |\n| header | | | 头部容器 |\n| body | | | 内容容器 |\n| footer | | | 底部容器 |\n| affixFooter | `boolean` | | 是否固定底部容器 |\n| actions | Array<> | | 按钮区域 |\n","path":"/zh-CN/components/panel"},{"title":"PDF Viewer","body":"\n## 基本用法\n\n\n\n## 配合文件上传实现预览功能\n\n配置和 `input-file` 相同的 `name` 即可\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ------ | ------ | ---------- |\n| src | Api | | 文档地址 |\n| width | number | | 宽度 |\n| height | number | - | 高度 |\n| background | string | #fff | PDF 背景色 |\n","path":"/zh-CN/components/pdf-viewer"},{"title":"PopOver 弹出提示","body":"\npopover 不是一个独立组件，它是嵌入到其它组件中使用的，目前可以在以下组件中配置\n\n- table 的 column\n- list 的 column\n- static\n- cards 里的字段\n\n## 基本配置\n\n比如在 CRUD 的 tpl 中，可以默认截断显示，然后加上 popOver 来显示全部内容\n\n\n\n> 上面的 popOver 精简写法只支持 1.6.5 及以上版本，之前版本需要使用 \"popOver\": {\"body\": \"$engine\"}\n\n## 在其它组件里的示例\n\n\n\n## 更多配置\n\n可以配置触发条件，是否显示 icon，title 等，具体请参考后面的配置列表\n\n\n\n## popOverEnableOn\n\n可以给列上配置`popOverEnableOn`属性，该属性为配置当前行是否启动`popOver`功能\n\n\n\n## 属性列表\n\n- `mode` 可配置成 `popOver`、`dialog` 或者 `drawer`。 默认为 `popOver`。\n- `size` 当配置成 `dialog` 或者 `drawer` 的时候有用。\n- `position` 配置弹出位置，只有 `popOver` 模式有用，默认是自适应。\n 可选参数：\n\n - `center`\n - `left-top`\n - `right-top`\n - `left-bottom`\n - `right-bottom`\n\n atX-atY-myX-myY\n 即：对齐目标的位置-对齐自己的位置\n\n - `left-top-right-bottom` 在目标位置的左上角显示。\n - `left-center-right-center` 在目标的左侧显示，垂直对齐。\n - ...\n\n 固定位置\n\n - `fixed-center`\n - `fixed-left-top`\n - `fixed-right-top`\n - `fixed-left-bottom`\n - `fixed-right-bottom`。\n\n- `offset` 默认 `{top: 0, left: 0}`，如果要来一定的偏移请设置这个。\n- `trigger` 触发弹出的条件。可配置为 `click` 或者 `hover`。默认为 `click`。\n- `showIcon` 是否显示图标。默认会有个放大形状的图标出现在列里面。如果配置成 false，则触发事件出现在列上就会触发弹出。\n- `title` 弹出框的标题。\n- `body` 弹出框的内容。\n","path":"/zh-CN/components/popover"},{"title":"Portlet 门户栏目","body":"\n门户栏目组件。\n\n## 基本用法\n\n\n\n## 配置工具栏\n\n\n\n## 隐藏头部\n\n去掉头部，默认只展示内容 tab 第一项的内容\n\n\n\n## 设置 style\n\n默认 tabs 只有一项的时候没有选中状态\n\n\n\n## 去掉分隔线\n\n\n\n## source 动态数据\n\n配置 source 属性,根据某个数据来动态生成。具体使用参考 Tabs 选项卡组件\n\n## 图标\n\n通过 icon 可以设置 tab 的图标，可以是 fontawesome 或 URL 地址。\n\n\n\n## mountOnEnter\n\n只有在点击卡片的时候才会渲染，在内容较多的时候可以提升性能，但第一次点击的时候会有卡顿。\n\n## unmountOnExit\n\n如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`\"unmountOnExit\": true`。\n\n## 监听切换事件\n\n\n\n会传递 key 参数和 props\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------- | ------------------------------------ | ----------------------------------- | ------------------------------------------------------------------------------------------ |\n| type | `string` | `\"portlet\"` | 指定为 Portlet 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| tabsClassName | `string` | | Tabs Dom 的类名 |\n| contentClassName | `string` | | Tabs content Dom 的类名 |\n| tabs | `Array` | | tabs 内容 |\n| source | `Object` | | tabs 关联数据，关联后可以重复生成选项卡 |\n| toolbar | | | tabs 中的工具栏，不随 tab 切换而变化 |\n| style | `string \\| Object` | | 自定义样式 |\n| description | | | 标题右侧信息 |\n| hideHeader | `boolean` | false | 隐藏头部 |\n| divider | `boolean` | false | 去掉分隔线 |\n| tabs[x].title | `string` | | Tab 标题 |\n| tabs[x].icon | `icon` | | Tab 的图标 |\n| tabs | | 内容区 |\n| tabs | | tabs 中的工具栏，随 tab 切换而变化 |\n| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |\n| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 |\n| tabs[x].className | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | Tab 区域样式 |\n| mountOnEnter | `boolean` | false | 只有在点中 tab 的时候才渲染 |\n| unmountOnExit | `boolean` | false | 切换 tab 的时候销毁 |\n| scrollable | `boolean` | false | 是否导航支持内容溢出滚动，`vertical`和`chrome`模式下不支持该属性；`chrome`模式默认压缩标签 |\n","path":"/zh-CN/components/portlet"},{"title":"Progress 进度条","body":"\n## 基本用法\n\n\n\n## 颜色映射\n\n可以配置`map`为单独颜色，例如：`#F96D3E`\n\n若配置为字符串数组，指定颜色映射，例如，默认的 map 配置为：`['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']`\n\n它意味着将进度条分成了 5 份，`前20%`将会添加`bg-danger` css 类名到进度条上，`20%~40%`，将会添加`bg-warning`，以此类推，你可以自定义`map`来配置想要的进度效果\n\n若配置为`[{value: 30, color: \"#007bff\"}, {value: 60, color: \"#F96D3E\"}]`, 表示为 value 小于等于`30`的区间显示`#007bff`, 大于`30`则显示`#F96D3E`\n\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## 显示动画\n\n需要条形进度条才生效\n\n\n\n## 圆形进度条\n\n\n\n## 仪表盘进度条\n\n可设置缺口位置和缺口角度\n\n\n\n## 设置线条宽度\n\n可设置 strokeWidth 调整线条宽度\n\n\n\n## 自定义格式输出内容\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------------------------------------------- |\n| type | `string` | | 如果在 Form 中用作静态展示，为`\"static-progress\"` |\n| mode | `string` | `line` | 进度「条」的类型，可选`line circle dashboard` |\n| className | `string` | | 外层 CSS 类名 |\n| value | | | 进度值 |\n| placeholder | `string` | `-` | 占位文本 |\n| showLabel | `boolean` | `true` | 是否展示进度文本 |\n| stripe | `boolean` | `false` | 背景是否显示条纹 |\n| animate | `boolean` | `false` | type 为 line，可支持动画 |\n| map | `string \\| Array<string> \\| Array<{value:number, color:string}>` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 |\n| threshold | {value:}> | `-` | 阈值（刻度） |\n| showThresholdText | `boolean` | `false` | 是否显示阈值（刻度）数值 |\n| valueTpl | `string` | `${value}%` | 自定义格式化内容 |\n| strokeWidth | `number` | line 类型为`10`，circle、dashboard 类型为`6` | 进度条线宽度 |\n| gapDegree | `number` | `75` | 仪表盘缺角角度，可取值 0 ~ 295 |\n| gapPosition | `string` | `bottom` | 仪表盘进度条缺口位置，可选`top bottom left right` |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------------------ | ------------ |\n| reset | - | 将值重置为 0 |\n| setValue | `value: string` \\| `number` 更新的值 | 更新数据 |\n\n### reset\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/progress"},{"title":"Property 属性表","body":"\n使用表格的方式显示只读信息，如产品详情页。\n\n## 基本用法\n\n\n\n## 简易模式\n\n默认是表格模式，还可以通过 `\"mode\"=\"simple\"` 改成简易模式，在这种模式下没有边框，属性名和值是通过 `separator` 来分隔\n\n\n\n## 使用其它展现\n\n`label` 和 `content` 均支持使用 `amis` 其它渲染组件，比如\n\n\n\n## 动态内容\n\n属性表本身没有数据获取功能，需要结合 来获取数据，下面的例子为了方便就直接放 page 下的 data 中了，它的效果和用 service 是一样的。\n\n动态内容有两种情况：\n\n1. label 固定、content 不同\n2. label 和 content 都不确定\n\n第一种情况只需要在 content 里使用变量即可，因为可以用任意 amis 节点。\n\n\n\n第二种情况需要使用 `source` 属性来获取上下文中的内容。\n\n\n\n## 样式控制\n\n通过 `labelStyle` 和 `contentStyle` 来控制属性名和属性值的样式，比如水平及垂直方向的对齐方式：\n\n\n\n如果是简易模式，因为合并到一个单元格中了，因此只能通过 `contentStyle` 设置单元格样式，`labelStyle` 只能设置属性名文本的样式。\n\n\n\n## 显示列数\n\n通过 `column` 来控制一行显示几列，默认是 3 列，下面示例是改成 2 列的效果\n\n\n\n## 隐藏某个属性值\n\nitems 里的属性还支持 `visibleOn` 和 `hiddenOn` 表达式，能隐藏部分属性，如果有空间后续组件会自动补上来，如下示例的 memory 隐藏了：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | ---------------------------------------- | ------- | -------------------------------------- |\n| className | `string` | | 外层 dom 的类名 |\n| style | `object` | | 外层 dom 的样式 |\n| labelStyle | `object` | | 属性名的样式 |\n| contentStyle | `object` | | 属性值的样式 |\n| column | `number` | 3 | 每行几列 |\n| mode | `string` | 'table' | 显示模式，目前只有 'table' 和 'simple' |\n| separator | `string` | ',' | 'simple' 模式下属性名和值之间的分隔符 |\n| title | `string` | | 标题 |\n| source | `string` | | 数据源 |\n| items[].label | `SchemaTpl` | | 属性名 |\n| items[].content | `SchemaTpl` | | 属性值 |\n| items[].span | `SchemaTpl` | | 属性值跨几列 |\n| items | | 显示表达式 |\n| items | | 隐藏表达式 |\n","path":"/zh-CN/components/property"},{"title":"QRCode 二维码","body":"\n## 基本用法\n\n\n\n> 根据 QR 码国际标准，二进制模式最多可存储`2953`字节的内容（1 中文汉字=2 字节）\n\n## 配置背景色\n\n背景色默认为`#fff`（纯白色）, `backgroundColor`属性可以修改背景色。\n\n\n\n## 配置前景色\n\n前景色默认为`#000`（纯黑色）, `foregroundColor`属性可以前景色。\n\n\n\n## 纠错等级\n\n`level`属性可以设置二维码的纠错等级，纠错等级分为四种（`'L' 'M' 'Q' 'H'`），从左到右依次提升，默认为`'L'`。\n\n\n\n## 嵌入图片\n\n`imageSettings`属性可以设置二维码中嵌入的图片，`src`设置图片链接地址，图片大小默认为二维码大小的 10%，图片位置默认水平垂直居中。\n\n> 1.10.0 及以上版本。\n> 建议根据图片大小，调整二维码纠错等级，避免图片遮挡导致二维码无法被正确识别\n\n\n\n### 关联上下文变量\n\n\n\n### 图片宽高\n\n`width` 和 `height` 可以设置图片的宽度和高度。\n\n\n\n### 图片偏移量\n\n以二维码**左上角**为原点，`x`，`y`分别设置图片的水平偏移量和垂直偏移量。示例通过`codeSize`和图片的`width` 和 `height` 计算出偏移量`{\"x\": 78, \"y\": 98}`，使图片位于右下角。\n\n\n\n### 挖孔嵌入\n\n设置`excavate: true`，可以在二维码图片中挖孔，视觉上使图片和二维码处于同一图层。\n\n\n\n## 下载二维码\n\n> 3.6.0 及以上版本\n\n基于事件动作实现\n\n\n\n需要注意这种方式不支持嵌入图片，如果要嵌入图片建议直接截图\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------------- | ------------------------------------ | ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"qr-code\"` | 指定为 QRCode 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| qrcodeClassName | `string` | | 二维码的类名 |\n| codeSize | `number` | `128` | 二维码的宽高大小 |\n| backgroundColor | `string` | `\"#fff\"` | 二维码背景色 |\n| foregroundColor | `string` | `\"#000\"` | 二维码前景色 |\n| level | `string` | `\"L\"` | 二维码复杂级别，有（'L' 'M' 'Q' 'H'）四种 |\n| value | |\n| imageSettings | `object` | | QRCode 图片配置 |\n| imageSettings.src | `string` | | 图片链接地址 |\n| imageSettings.width | `number` | 默认为`codeSize`的 10% | 图片宽度 |\n| imageSettings.height | `number` | 默认为`codeSize`的 10% | 图片高度 |\n| imageSettings.x | `number` | 默认水平居中 | 图片水平方向偏移量 |\n| imageSettings.y | `number` | 默认垂直居中 | 图片垂直方向偏移量 |\n| imageSettings.excavate | `boolean` | `false` | 图片是否挖孔嵌入 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ---------------------- | -------- |\n| saveAs | `name?: string` 文件名 | 下载文档 |\n","path":"/zh-CN/components/qrcode"},{"title":"Radios 单选框","body":"\n## 基本用法\n\n\n\n## 属性表\n\n当做选择器表单项使用时，除了支持 中的配置以外，还支持下面一些配置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ----------------------------------------- | --------- | ------------------------------------------------------------------------------------------- |\n| options | `Array<object>`或`Array<string>` | | |\n| source | `string`或 |\n| labelField | `boolean` | `\"label\"` | |\n| valueField | `boolean` | `\"value\"` | |\n| columnsCount | `number` | `1` | 选项按几列显示，默认为一列 |\n| autoFill | `object` | | |\n| optionClassName | `string` | | 选项 CSS 类名 |\n","path":"/zh-CN/components/radios"},{"title":"Remark 标记","body":"\n用于展示提示文本，和表单项中的 remark 属性类型。\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| type | `string` | | `remark` |\n| className | `string` | | 外层 CSS 类名 |\n| content | `string` | | 提示文本 |\n| placement | `string` | | 弹出位置 |\n| trigger | `string` | `['hover', 'focus']` | 触发条件 |\n| icon | `string` | `fa fa-question-circle` | 图标 |\n| shape | `'circle' \\| 'square'` | 图标形状 |\n\n","path":"/zh-CN/components/remark"},{"title":"Search Box 搜索框","body":"\n## 基本用法\n\n用于展示一个简单搜索框，通常需要搭配其他组件使用。比如 page 配置 `initApi` 后，可以用来实现简单数据过滤查找，`name` keywords 会作为参数传递给 page 的 `initApi`。\n\n\n\n## 禁用样式\n\n> `6.0.0`及以上版本\n\n\n\n## 加载状态\n\n> `6.0.0` 及以上版本\n\n设置`\"loading\": true`, 标识开关操作的异步任务仍在执行中。另外`loadingOn`支持表达式，配合`ajax`动作，实现搜索操作时的loading状态。\n\n\n\n## 加强样式\n\n\n\n## 可清除\n\n\n\n### 清除后立即搜索\n\n> `2.8.0` 及以上版本\n\n设置`\"clearAndSubmit\": true`后，清空搜索框内容后立即执行搜索，与`searchImediately`不同的是，`clearAndSubmit`仅作用于清空输入框的动作，而`searchImediately`会影响所有搜索动作。\n\n\n\n## mini 版本\n\n\n\n## 与 CRUD 搭配\n\n\n\n## 与 Service 搭配\n\n\n\n## 立刻搜索模式\n\n设置 `\"searchImediately\": true` 实现输入时即搜索\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ---------------- | --------- | ------ | ---------------------------- | ------- |\n| type | `string` | | `search-box` |\n| className | `string` | | 外层 CSS 类名 |\n| mini | `boolean` | | 是否为 mini 模式 |\n| searchImediately | `boolean` | | 是否立即搜索 |\n| clearAndSubmit | `boolean` | | 清空搜索框内容后立即执行搜索 | `2.8.0` |\n| disabled | `boolean` | `false` | 是否为禁用状态 | `6.0.0` |\n| loading | `boolean` | `false` | 是否处于加载状态 | `6.0.0` |\n\n## 事件表\n\n> 2.4.1 及以上版本\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------- | -------------------- |\n| search | `[name]: string` 组件的值 | 点击搜索图标时触发 |\n| change | `[name]: string` 组件的值 | 输入框值变化时触发 |\n| focus | `[name]: string` 组件的值 | 输入框获取焦点时触发 |\n| blur | `[name]: string` 组件的值 | 输入框失去焦点时触发 |\n\n### search\n\n\n\n### change\n\n\n\n### focus\n\n\n\n### blur\n\n\n\n## 动作表\n\n> 2.4.1 及以上版本\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | ------------------------ | -------- |\n| clear | - | 清空 |\n| setValue | `value: string` 更新的值 | 更新数据 |\n\n### clear\n\n\n\n### setValue\n\n\n","path":"/zh-CN/components/search-box"},{"title":"Service 功能型容器","body":"\namis 中部分组件，作为展示组件，自身没有**使用接口初始化数据域的能力**，例如：功能，在当前的 **数据链** 中获取数据，并进行数据展示。\n\n而`Service`组件就是专门为该类组件而生，它的功能是：**配置初始化接口，进行数据域的初始化，然后在`Service`内容器中配置子组件，这些子组件通过数据链的方法，获取`Service`所拉取到的数据**\n\n## 基本使用\n\n最基本的使用，是配置初始化接口`api`，将接口返回的数据添加到自身的数据域中，以供子组件通过进行获取使用。\n\n\n\n你可以通过查看网络面板看到，`service`接口返回的数据结构为：\n\n\n\n在`service`的子组件中，就可以使用`${title}`和`${date}`展示数据\n\n## 展示列表\n\n另外一种使用较为频繁的场景是：serivce + table 进行列表渲染\n\n\n\n上例中 service 接口返回数据结构如下：\n\n\n\n`table`中配置`source`属性为`${rows}`就可以获取到`rows`变量的数据，并用于展示。\n\n## 动态渲染页面\n\n`Service` 还有个重要的功能就是支持配置 `schemaApi`，通过它可以实现动态渲染页面内容。\n\n\n\n同样观察`schemaApi接口`返回的数据结构：\n\n\n\n它将`data`返回的对象作为 amis 页面配置，进行了解析渲染，实现动态渲染页面的功能。\n\n### jsonp 请求\n\n`schemaApi` 同样支持 `jsonp` 请求，完整用法请参考 amis-admin 项目。\n\n\n\n`schemaApi接口` 返回的内容其实是一段立即执行的 js 代码。我们可以通过 `callback` 参数执行函数名，或者通过 `request._callback` 获取\n\n\n\n### js 请求\n\n> 2.1.0 及以上版本\n\n`schemaApi` 支持 `js` 请求，它会发起一个 xhr 请求去下载 js 文件后执行\n\n\n\n这个接口的返回结果期望是一段 JavaScript 代码，和普通 json 返回结果最大的不同是这里可以执行 JavaScript 代码，比如支持 onClick 函数\n\n\n\n这段代码里可以通过 api 变量拿到当前请求的 api 参数，比如 url 地址，可以通过判断进行二次处理\n\n\n\n## 动态渲染表单项\n\n默认 Service 可以通过配置`schemaApi` ，但是如果想渲染表单项，请返回下面这种格式：\n\n\n\n例如下例：\n\n\n\n`schemaApi` 除了能返回表单项之外，还能同时返回表单数据，如果你这样返回接口\n\n\n\n## 接口联动\n\n`api`和`schemaApi`都支持\n\n\n\n上例可看到，变更**数据模板**的值，会触发 service 重新请求，并更新当前数据域中的数据\n\n更多相关见\n\n## 定时轮询刷新\n\n设置 `interval` 可以定时刷新 `api` 和 `schemaApi` 接口，单位是毫秒，如`\"interval\": 2000` 则设置轮询间隔为 2s ，注意最小间隔时间是 1 秒。支持通过`stopAutoRefreshWhen`表达式定义轮询停止条件。\n\n\n\n### 静默轮询\n\n设置`silentPolling: true`可以关闭等待接口加载时的 loading 动画，该配置仅在配置`interval`时生效。\n\n\n\n## 通过 WebSocket 实时获取数据\n\nService 支持通过 WebSocket 获取数据，只需要设置 ws（由于无示例服务，所以无法在线演示）。\n\n\n\n> 1.4.0 及以上版本\n\n或者是对象的方式支持配置初始 `data`，这个 data 会在建立连接时发送初始数据\n\n\n\n可以只设置 ws，通过 ws 来获取所有数据，也可以同时设置 api 和 ws，让 api 用于获取全部数据，而 ws 用于获取实时更新的数据。\n\n后端实现示例，基于 ：\n\n\n\nWebSocket 客户端的默认实现是使用标准 WebSocket，如果后端使用定制的 WebSocket，比如 socket.io，可以通过覆盖 `env.wsFetcher` 来自己实现数据获取方法，默认实现是：\n\n> 1.4.0 及以上版本修改了 ws 类型，将之前的字符串改成了对象的方式，会有两个参数 url 和 body\n\n下面是目前 amis 中 WebSocket 支持的默认实现：\n\n\n\n通过 onMessage 来通知 amis 数据修改了，并返回 close 函数来关闭连接。\n\n> 1.8.0 及以上版本\n\n如果 WebSocket 返回的结果不是 JSON 而只是某个字符串，需要配置 `responseKey` 属性来将这个结果放在这个 key 上，比如下面的例子\n\n\n\n对应的后端就只需要返回字符串\n\n\n\n## 调用外部函数获取数据\n\n> 1.4.0 及以上版本\n\n对于更复杂的数据获取情况，可以使用 `dataProvider` 属性来实现外部函数获取数据，它支持字符串和函数两种形式\n\n\n\n函数将会传递两个参数：`data` 和 `setData`，其中 `data` 可以拿到上下文数据，而 `setData` 函数可以用来更新数据，比如下面的例子\n\n\n\n上面这个例子还返回了一个函数，这个函数会在组件销毁的时候执行，可以用来清理资源。\n\n下面是使用函数类型的示例，注意这个示例不能放在 JSON 中，只能在 jssdk 或 react 项目里使用。\n\n\n\n> 1.8.0 及以上版本\n\n新增了一个 `env` 属性，可以调用系统环境中的方法，比如 env.fetcher、tracker 等，比如下面的例子会调用 `env.notify` 来弹出提示\n\n\n\n### 函数触发事件\n\n> 2.3.0 及以上版本\n\n\n\n## 隐藏错误信息\n\n> 2.8.1 及以上版本\n\n默认会将接口返回的错误信息展示在 Service 的顶部区域，可以通过设置`\"showErrorMsg\": false`隐藏错误提示。\n\n\n\n设置`\"showErrorMsg\": false`隐藏错误提示，仅保留 toast 提示\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| --------------------- | ----------------------------------------------------------------------------------------------- | -------------- | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |\n| type | `string` | `\"service\"` | 指定为 service 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| body | | | 内容容器 |\n| api | | | 初始化数据域接口地址 |\n| ws | `string` | | WebScocket 地址 |\n| dataProvider | `string \\| Record<\"inited\" \\| \"onApiFetched\" \\| \"onSchemaApiFetched\" \\| \"onWsFetched\", string>` | | 数据获取函数 | <ul><li>`1.4.0`</li><li>`1.8.0`支持`env`参数</li><li>`2.3.0` 支持基于事件触发</li></ul> |\n| initFetch | `boolean` | | 是否默认拉取 |\n| schemaApi | | | 用来获取远程 Schema 接口地址 |\n| initFetchSchema | `boolean` | | 是否默认拉取 Schema |\n| messages | `Object` | | 消息提示覆写，默认消息读取的是接口返回的 toast 提示文字，但是在此可以覆写它。 |\n| messages.fetchSuccess | `string` | | 接口请求成功时的 toast 提示文字 |\n| messages.fetchFailed | `string` | `\"初始化失败\"` | 接口请求失败时 toast 提示文字 |\n| interval | `number` | | 轮询时间间隔，单位 ms(最低 1000) |\n| silentPolling | `boolean` | `false` | 配置轮询时是否显示加载动画 |\n| stopAutoRefreshWhen | | | 配置停止轮询的条件 |\n| showErrorMsg | `boolean` | `true` | 是否以 Alert 的形式显示 api 接口响应的错误信息，默认展示 | `2.8.1` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。\n\n| 事件名称 | 事件参数 | 说明 |\n| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------- |\n| init | - | 组件实例被创建并插入 DOM 中时触发。2.4.1 及以上版本 |\n| fetchInited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | api 接口请求完成时触发 |\n| fetchSchemaInited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | schemaApi 接口请求完成时触发 |\n\n### init\n\n开始初始化。\n\n\n\n### fetchInited\n\napi 接口请求完成。\n\n\n\n### fetchSchemaInited\n\nschemaApi 接口请求完成。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| -------- | -------- | ------------------------------------------------- |\n| reload | - | 重新加载，调用 `api`，刷新数据域数据 |\n| rebuild | - | 重新构建，调用 `schemaApi`，重新构建容器内 Schema |\n| setValue | - | 更新数据域数据 |\n\n### reload\n\n#### 只做刷新\n\n重新发送`api`请求，刷新 Page 时，只配置`componentId`目标组件 ID 即可。\n\n\n\n#### 发送数据并刷新\n\n刷新 Service 组件时，如果配置了`data`，将发送`data`给目标组件，并将该数据合并到目标组件的数据域中（如果配置`\"dataMergeMode\": \"override\"`将覆盖目标组件的数据），然后重新请求数据。\n\n\n\n### rebuild\n\n重新构建，基于 args 传参和 schemaApi 绑定变量，让 service 获取不同的 schema。\n\n\n\n### setValue\n\n通过`setValue`更新指定 Service 的数据。\n\n#### 合并数据\n\n默认`setValue`会将新数据与目标组件数据进行合并。\n\n\n\n#### 覆盖数据\n\n可以通过`\"dataMergeMode\": \"override\"`来覆盖目标组件数据。\n\n\n","path":"/zh-CN/components/service"},{"title":"Sparkline 走势图","body":"\n简单走势图，只做简单的展示，详细展示请采用 Chart 来完成。\n\n## 基本使用\n\n配置类型，然后设置值即可，值为数组格式。\n\n当前例子为静态值，通常你会需要配置成 `name` 与当前环境数据关联。\n\n\n\n## 点击行为\n\n可以通过配置`\"clickAction\": {}`，来指定图表节点的点击行为，支持 amis 的 。\n\n\n\n## 空数据显示\n\n> 1.4.2 及以上版本\n\n通过 `placeholder` 可以设置空数据时显示的内容\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | -------------------- |\n| name | `string` | | 关联的变量 |\n| width | `number` | | 宽度 |\n| height | `number` | | 高度 |\n| placeholder | `string` | | 数据为空时显示的内容 |\n","path":"/zh-CN/components/sparkline"},{"title":"Spinner 加载中","body":"\n一般用来做 `loading` 使用。\n\n## 基本使用\n\n`show` 属性控制 `spinner` 是否渲染。\n\n\n\n`size` 属性控制 `spinner` 的大小，有三种配置：`sm`, `lg` 和 空值。\n\n\n\n`className` 属性、 `spinnerClassName`属性和 `spinnerWrapClassName`属性可以配置 spinner 自定义的 class，`className`会添加到 spinner 组件的最外层标签上，`spinnerClassName`会添加到 icon 对应的标签上，`spinnerWrapClassName` 在作为组件容器使用时，会作用于整个 Spinner 组件的最外层元素上。\n\n\n\n`icon` 属性可以配置自定义的图标，可以是 `amis` 内置的图标名称（需要是在 icons.tsx 组件中注册过的）; 可以是字体图标库的名称(需要引入对应的图标库)，比如`fa fa-spinner`; 也可以是网络图片，比如 `/examples/static/logo.png`;\n\n\n\n`tip` 属性可以配置 spinner 的文案，同时 `tipPlacement`可以配置 tip 的相对于 icon 的位置，有四种配置：`top`,`right`,`bottom`(默认),`left`;\n\n\n\n`delay` 属性可以配置 spinner 的延迟显示时间，例如 delay=1000，`show` 属性设为 `true` 后，1000ms 后才会显示出来。\n\n\n\n## 作为容器使用\n\n`spinner` 组件可以作为容器使用，被包裹的内容可通过 `body` 配置, 且作为容器使用的时候可以使用 `overlay` 属性来配置显示 spinner 的时候是否显示遮罩层（遮罩层背景颜色默认是透明的，可通过外层 className 自定义遮罩层颜色）。\n\n\n\n## Spinner 在组件树中的默认表现\n\n当在一棵树中，父组件和子组件同时在 `loading` 状态时，只有父组件的 `loading` 会生效；父组件的 `loading` 结束后才会根据子组件中的`loading`状态，来决定子组件中的`Spinner`是否需要进入`loading`。\n\n\n\n在这个例子中，`service` 会先进入 `loading` ，5 秒后 `page` 组件开始 `loading`\n\n## 动态控制组件渲染\n\n使用 `showOn` 表达式控制 `spinner` 是否渲染。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------------- | ------------------------------------------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `spinner` | 指定为 Spinner 渲染器 |\n| show | `boolean` | `true` | 是否显示 spinner 组件 |\n| showOn | | `true` | 是否显示 spinner 组件的条件 |\n| className | `string` | | spinner 图标父级标签的自定义 class |\n| spinnerClassName | `string` | | 组件中 icon 所在标签的自定义 class |\n| spinnerWrapClassName | `string` | | 作为容器使用时组件最外层标签的自定义 class |\n| size | `string` | | 组件大小 `sm` `lg` |\n| icon | `string` | | 组件图标，可以是`amis`内置图标，也可以是字体图标或者网络图片链接，作为 ui 库使用时也可以是自定义组件 |\n| tip | `string` | | 配置组件文案，例如`加载中...` |\n| tipPlacement | `top`, `right`, `bottom`, `left` | `bottom` | 配置组件 `tip` 相对于 `icon` 的位置 |\n| delay | `number` | `0` | 配置组件显示延迟的时间（毫秒） |\n| overlay | `boolean` | `true` | 配置组件显示 spinner 时是否显示遮罩层 |\n| body | | | 作为容器使用时，被包裹的内容 |\n| loadingConfig | `{root?: string}` | | 为 `Spinner` 指定挂载的容器, `root` 是一个 selector，在拥有`Spinner`的组件上都可以通过传递`loadingConfig`改变 Spinner 的挂载位置，开启后，会强制开启属性`overlay=true`，并且`icon`会失效 |\n","path":"/zh-CN/components/spinner"},{"title":"Status 状态","body":"\n## 基本用法\n\n它最适合的用法是放在列表类组件（CRUD，Table，List 等）的列中，用来表示状态。\n\n\n\n## 默认状态列表\n\n下表是默认支持的几种状态：\n\n\n\n## 自定义状态图标、文本、颜色\n\n> 2.8.0 及 以上版本\n\n如果默认提供的状态无法满足业务需求，可使用`source`自定义状态, 如下：\n\n\n\n`source`配置类似于`mapping`映射，不同的`key`值匹配渲染不同状态，支持以下属性：\n\n| 属性名 | 类型 | 说明 |\n| --------- | -------- | ---------------------- |\n| label | `string` | 显示文本 |\n| icon | `string` | 图标, 例如`fa fa-plus` |\n| color | `string` | 状态颜色 |\n| className | `string` | 状态的 独立 CSS 类名 |\n\n注意：自定义状态会和默认状态合并。\n\n\n\n`source` 属性也支持，通过变量获取上下文中的变量\n\n\n\n## 自定义状态图标和文本\n\n> 推荐使用新属性`source`配置\n\n> 如果默认提供的状态无法满足业务需求，可以使用`map` 和 `labelMap`属性分别配置状态组件的**图标**和**展示文案**。用户自定义的`map` 和 `labelMap`会和默认属性进行 merge，如果只需要修改某一项配置时，无需全量覆盖。\n\n\n\n## 动态数据\n\n> 推荐使用新属性`source`配置\n\n> 2.3.0 及以上版本\n\n`map` 和 `labelMap`支持配置变量，通过数据映射获取上下文中的变量。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 版本 | 说明 |\n| ---------------- | -------- | ------ | ----- | ---------------------------------------------------------------- |\n| type | `string` | | | `\"status\"` 指定为 Status 渲染器 |\n| className | `string` | | | 外层 Dom 的 CSS 类名 |\n| placeholder | `string` | `-` | | 占位文本 |\n| map | `object` | | 2.3.0 | 映射图标 |\n| labelMap | `object` | | 2.3.0 | 映射文本 |\n| source | `object` | | 2.8.0 | 自定义映射状态，支持 |\n| source.label | `string` | | 2.8.0 | 映射文本 |\n| source.icon | `string` | | 2.8.0 | 映射图标 |\n| source.color | `string` | | 2.8.0 | 映射状态颜色 |\n| source.className | `string` | | 2.8.0 | 映射状态的 独立 CSS 类名 |\n","path":"/zh-CN/components/status"},{"title":"Steps 步骤条","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当前处于第几步统一通过 `name` 关联变量名，其他配置可通过 `\"${xxx}\"` 关联上下文变量。\n\n\n\n## 接口映射\n\n接口返回的数据也是一样，都会在同一个数据域，所以取值方式是一样的。\n\n\n\n## Form 中静态展示\n\n\n\n## 动态数据\n\n### 远程拉取\n\n除了可以通过数据映射获取当前数据域中的变量以外，source 还支持配置接口，格式为 API，用于动态返回选项组。\n\n\n\n远程拉取接口时，返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外，必须用\"steps\"作为选项组的 key 值，如下：\n\n\n\n### 数据域变量配置\n\n> 1.9.1 及以上版本\n\n\n\n## 自定义不同步骤以及状态\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------------- | --------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------------------- |\n| type | `string` | | `\"steps\"` 指定为 步骤条 渲染器 |\n| steps | Array<> | [] | 数组，配置步骤信息 |\n| source | | | 选项组源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |\n| name | `string` | | 关联上下文变量 |\n| value | `string` \\| `number` | `-` | 设置默认值，注意不支持表达式 |\n| status | \\| {[propName: string]: stepStatus;} | `-` | 状态 |\n| className | `string` | `-` | 自定义类名 |\n| mode | `horizontal` \\| `vertical` \\| `simple` | `horizontal` | 指定步骤条模式。目前支持水平（horizontal）、竖直（vertical）和简单（simple）模式 |\n| labelPlacement | `horizontal` \\| `vertical` | `horizontal` | 指定标签放置位置，默认水平放图标右侧，可选 (vertical) 放图标下方 |\n| progressDot | `boolean` | `false` | 点状步骤条 |\n\n### step\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ----------------------------------------------------- | ------ | --------------------------------------- |\n| title | `string` \\| | | 标题 |\n| subTitle | `string` \\| | | 子标题 |\n| description | `string` \\| | | 详细描述 |\n| icon | `string` | | icon 名，支持 fontawesome v4 或使用 url |\n| value | `string` | | value |\n| className | `string` | | 自定义类名 |\n\n### StepStatus\n\n`wait` | `process` | `finish` | `error`\n","path":"/zh-CN/components/steps"},{"title":"switch-container 状态容器","body":"\nswitch-container 是一种特殊的容器组件，它可以根据动态数据显示条件渲染组件的某一状态。注意容器只会显示最多一种状态，只显示首个命中的状态。容器的不同状态是对应的展示配置，可通过组件搭配与嵌套设计任意展示样式。状态容器的外观与事件动作与容器组件类似，支持常见的外观设置与点击、移入、移出事件动作。\n\n状态容器主要用于编辑器内统一管理复杂组件的多种状态，同时避免因为组件多状态显示而干扰设计。如果只使用 amis 引擎，也可以直接用容器加显示条件实现。\n\n## 基本用法\n\n\n\n### style\n\ncontainer 可以通过 style 来设置样式，比如背景色或背景图，注意这里的属性是使用驼峰写法，是 `backgroundColor` 而不是 `background-color`。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ----------------------------------------- | ------------- | ----------------------- |\n| type | `string` | `\"container\"` | 指定为 container 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| style | `Object` | | 自定义样式 |\n| items | | | 容器内容 |\n\n## 事件表\n\n> 3.3.0 及以上版本\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | -------- | -------------- |\n| click | - | 点击时触发 |\n| mouseenter | - | 鼠标移入时触发 |\n| mouseleave | - | 鼠标移出时触发 |\n\n### click\n\n鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseenter\n\n鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseleave\n\n鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n","path":"/zh-CN/components/switch-container"},{"title":"Table View 表格展现","body":"\n> 1.2.0 及以上版本才有此功能\n\n通过表格的方式来展现数据，和 的不同之处：\n\n- 数据源要求不同\n - table 的数据源需要是多行的数据，最典型的就是来自某个数据库的表\n - table view 的数据源可以来自各种固定的数据，比如单元格的某一列是来自某个变量\n- 功能不同\n - table 只能用来做数据表的展现\n - table view 除了展现复杂的报表，还能用来进行布局\n- 合并单元格方式不同\n - table 的合并单元格需要依赖数据\n - table view 的合并单元格是手动指定的，因此可以支持不规则的数据格式\n\n## 基本用法\n\n\n\n可以看到 table view 需要手动进行单元格合并，因此更适合使用可视化编辑器进行编辑。\n\n## 设置项\n\ntable view 的设置项有三层，可以分别对表格级别、行级别、单元格级别进行设置。\n\n### 表格设置项\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------------- | ----------------------------------------------------- | ---------------- |\n| width | `number/string` | '100%' | |\n| padding | `number/string` | 'var(--TableCell-paddingY) var(--TableCell-paddingX)' | 单元格默认内间距 |\n| border | `boolean` | true | 是否显示边框 |\n| borderColor | `string` | `var(--borderColor)` | 边框颜色 |\n| trs | | | 参考下面的行设置 |\n\n### 行设置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------------- | ------ | -------------------- |\n| height | `number/string` | | |\n| background | `string` | | 行背景色 |\n| tds | | | 参考下面的单元格设置 |\n\n### 单元格设置\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ----------------------------------------- | -------------- | ---------------------------------------------------------------- |\n| background | `string` | | 单元格背景色 |\n| color | `string` | | 单元格文字颜色 |\n| bold | `boolean` | false | 单元格文字是否加粗 |\n| width | `number/string` | | 单元格宽度，只需要设置第一行 |\n| padding | `number/string` | 集成表格的设置 | 单元格内间距 |\n| align | `string` | `left` | 单元格内的水平对齐，可以是 `left`、`center`、`right` |\n| valign | `string` | `middle` | 单元格内的垂直对齐，可以是 `top`、`middle`、`bottom`、`baseline` |\n| colspan | `number` | | 单元格水平跨几行 |\n| rowspan | `number` | | 单元格垂直跨几列 |\n| body | | | 其它 amis 设置 |\n\n#### 单元格样式示例\n\n比如将其它两列的单元格边框设置为 0，就能实现特殊的展现效果\n\n\n\n### 列设置项\n\n列设置项主要是用于控制整列的样式，比如\n\n\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | -------------------- |\n| span | `number` | | 这是个跨几列的设置项 |\n| style | `object` | | 列样式 |\n\n### 标题设置\n\n可以通过 `caption` 来添加段标题文本，并通过 `captionSide` 来控制显示在底部还是顶部。\n\n\n\n### 支持变量及表达式\n\n> 2.1.0 及以上版本\n\ntable-view 的所有属性都支持变量，比如下面的例子通过表达式实现了针对数据进行不同展示\n\n\n\n### tr 和 td 支持 visibleOn\n\n> 6.5 及以后版本\n\n可以在行和列上配置 visibleOn 或 hiddenOn 属性来实现根据数据动态渲染界面。\n\n\n\n## 作为布局方法\n\ntable-view 除了可以用来展现表格类型的数据，还能用来实现复杂布局效果，只需要将 `border` 隐藏就行，除了拆分单元格还能通过嵌套的方式实现布局，比如：\n\n\n","path":"/zh-CN/components/table-view"},{"title":"Table 表格","body":"\n表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n\n\n## 数据需求\n\n数据是对象数组，比如前面的例子中 `rows` 的值类似：\n\n\n\n## 空状态展示\n\n\n\n## 列配置\n\n`columns`内，除了简单的配置`label`和`name`展示数据以外，还支持一些额外的配置项，可以帮助更好的展示数据。\n\n### 列类型\n\n除了简单展示数据源所返回的数据以外，`list`的列支持除表单项以外所有组件类型，例如：\n\n\n\n### 列宽\n\n可以给列配置 `width` 属性，控制列宽，共有两种方式：\n\n#### 固定像素\n\n可以配置数字，用于设置列宽像素，例如下面例子我们给`Rendering engine`列宽设置为`100px`。\n\n> - 如果希望精准的控制列宽，请设置表格的 `tableLayout` 为 `fixed` 模式，同时为了让表格标题不换行，标题文字的长短会影响列的最小宽度\n> - 注意：`resizable`开启后，固定宽度的列则无法拖动调整列宽\n\n\n\n#### 百分比\n\n也可以百分比来指定列宽，例如下面例子我们给`Rendering engine`列宽设置为`50%`。\n\n\n\n### 列对齐方式\n\n> 1.4.0 及以上版本\n\n通过 align 可以控制列文本对齐方式，比如\n\n\n\n### 列样式\n\n> 1.4.0 及以上版本\n\n除了前面的宽度和对齐方式，还有更灵活的控制方法是通过样式表\n\n\n\n如果要单独设置标题的样式，可以使用 `labelClassName` 属性\n\n\n\n### 单元格样式\n\n> 1.4.0 及以上版本\n\n`classNameExpr` 可以根据数据动态添加 CSS 类，支持 语法。\n\n例如下例，`\"${ version > 5 ? 'text-danger' : '' }\"` 表示当行数据的 `version` 数据大于 5 的时候添加 `text-danger` CSS 类名，使得文字颜色变红\n\n\n\n### 背景色阶\n\n> 1.8.0 及以上版本\n\n`backgroundScale` 可以用来根据数据控制自动分配色阶\n\n\n\n`min` 和 `max` 都支持变量，如果为设置会自动计算当前列的最大和最小值。\n\n默认会从当前列的 `name` 属性来获取数据，也可以通过 `backgroundScale.source` 使用变量及公式来获取数据。\n\n### 默认是否显示\n\n默认 `columnsTogglable` 配置为 `auto`，当列超过 5 列后，就会在工具栏多渲染出来一个列展示与否的开关。你可以设置成 `true` 或者 `false` 来强制开或者关。在列配置中可以通过配置 `toggled` 为 `false` 默认不展示这列，比如下面这个例子中 ID 这一栏。\n\n\n\n### 固定列\n\n列太多可以让重要的几列固定，可以配置固定在左侧还是右侧，只需要给需要固定的列上配置 `fixed` 属性，配置 `left` 或者 `right`。\n\n\n\n### 可复制\n\n可以在列上配置`\"copyable\": true`，会在该列的内容区里，渲染一个复制内容的图标，点击可复制该显示内容\n\n\n\n你也可以配置对象形式，可以自定义显示内容\n\n\n\n### 弹出框（popOver）\n\n可以给列上配置 `popOver` 属性，会在该列的内容区里，渲染一个图标，点击会显示弹出框，用于展示内容\n\n\n\npopOver 的其它配置请参考 \n\n### 表头样式\n\n可以配置`\"isHead\": true`，来让当前列以表头的样式展示。应用场景是：\n\n1. 所有列`label`配置空字符串，不显示表头\n2. 配置`combineNum`，合并单元格，实现左侧表头的形式\n3. 列上配置`\"isHead\": true`，调整样式\n\n\n\n还可以配置\"offset\"，实现弹出框位置调整自定义\n\n\n\n## 嵌套\n\n当行数据中存在 children 属性时，可以自动嵌套显示下去。\n\n\n\n## 底部展示 (Footable)\n\n列太多时，内容没办法全部显示完，可以让部分信息在底部显示，可以让用户展开查看详情。配置很简单，只需要开启 `footable` 属性，同时将想在底部展示的列加个 `breakpoint` 属性为 `*` 即可。\n\n\n\n默认都不会展开，如果你想默认展开第一个就把 footable 配置成这样。\n\n\n\n当配置成 `all` 时表示全部展开。\n\n## 合并单元格\n\n只需要配置 `combineNum` 属性即可，他表示从左到右多少列内启动自动合并单元格，只要多行的同一个属性值是一样的，就会自动合并。\n\n如果你不想从第一列开始合并单元格，可以配置 `combineFromIndex`，如果配置为 1，则会跳过第一列的合并。如果配置为 2，则会跳过第一列和第二列的合并，从第三行开始向右合并 `combineNum` 列。\n\n\n\n> 1.3.0 版本开始 combineNum 支持使用变量，如下所示\n\n\n\n## 超级表头\n\n超级表头意思是，表头还可以再一次进行分组。额外添加个 `groupName` 属性即可。\n\n\n\n## 高亮行\n\n可以通过配置`rowClassNameExpr`来为行添加 CSS 类，支持 语法。\n\n例如下例，`\"${id % 2 ? \"bg-success\" : \"\"}\"` 表示当行数据的 `id` 变量为 不能被 `2` 整除时，给当前行添加`bg-success` CSS 类名，即绿色背景色\n\n\n\n## 总结行\n\n可以通过配置 `prefixRow` 或 `affixRow` 来为表格顶部或底部添加总结行，\n\n\n\n> 1.8.1 及以上版本\n\n新增 `affixRowClassNameExpr`、`affixRowClassName`、`prefixRowClassNameExpr`、`prefixRowClassName` 来控制总结行样式，比如下面的例子\n\n\n\n### 配置合并单元格\n\n可以配置 `colSpan` 来设置一列所合并的列数，例如\n\n\n\n上例中我们给 `总计` 列配置了 `\"colSpan\": 2`，它会合并两个单元格\n\n### 配置多行\n\n可以配置二维数组来配置多行总结行\n\n\n\n## 行操作按钮\n\n通过 itemActions 可以设置鼠标移动到行上出现操作按钮\n\n\n\n## 单行点击操作\n\n> 1.4.0 及以上版本\n\n处理前面的 itemActions，还可以配置 itemAction 来实现点击某一行后进行操作，支持 里的所有配置，比如弹框、刷新其它组件等。\n\n\n\n注意这个属性和 `checkOnItemClick` 冲突，因为都是定义行的点击行为，开启 `itemAction` 后 `checkOnItemClick` 将会失效。\n\n## 行角标\n\n> 1.5.0 及以上版本\n\n通过属性`itemBadge`，可以为表格行配置属性控制显示的条件，表达式中`this`可以取到行所在上下文的数据，比如行数据中有`badgeText`字段才显示角标，可以设置`\"visibleOn\": \"this.badgeText\"`\n\n\n\n## 表格内容高度自适应\n\n> 1.5.0 及以上版本\n\n通过 `autoFillHeight` 可以让表格内容区自适应高度，具体效果请看这个。\n\n它的展现效果是整个内容区域高度自适应，表格内容较多时在内容区域内出滚动条，这样顶部筛选和底部翻页的位置都是固定的。\n\n开启这个配置后会自动关闭 `affixHeader` 功能避免冲突。\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ---------------- | -------------------------------------------------------- | ------------------------- | ------------------------------------------------------------------------- | --------------------------------- |\n| type | `string` | | `\"type\"` 指定为 table 渲染器 | |\n| title | `string` | | 标题 | |\n| source | `string` | `${items}` | 数据源, 绑定当前环境变量 | |\n| deferApi | | | 当行数据中有 defer 属性时，用此接口进一步加载内容 |\n| affixHeader | `boolean` | `true` | 是否固定表头 | |\n| affixFooter | `boolean` | `false` | 是否固定表格底部工具栏 | |\n| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 | |\n| placeholder | `string` 或者 `SchemaTpl` | `暂无数据` | 当没数据的时候的文字提示 | |\n| className | `string` | `panel-default` | 外层 CSS 类名 | |\n| tableClassName | `string` | `table-db table-striped` | 表格 CSS 类名 | |\n| headerClassName | `string` | `Action.md-table-header` | 顶部外层 CSS 类名 | |\n| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 | |\n| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 | |\n| columns | `Array<Column>` | | 用来设置列信息 | |\n| combineNum | `number` | | 自动合并单元格 | |\n| itemActions | Array<> | | 悬浮行操作按钮组 | |\n| itemCheckableOn | | |\n| itemDraggableOn | | |\n| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 | |\n| rowClassName | `string` | | 给行添加 CSS 类名 | |\n| rowClassNameExpr | | | 通过模板给行添加 CSS 类名 | |\n| prefixRow | `Array` | | 顶部总结行 | |\n| affixRow | `Array` | | 底部总结行 | |\n| itemBadge | | | 行角标配置 | |\n| autoFillHeight | `boolean` 丨 `{height: number}` 丨 `{maxHeight: number}` | | 内容区域自适应高度，可选择自适应、固定高度和最大高度 | `maxHeight` 需要 `2.8.0` 以上版本 |\n| resizable | `boolean` | `true` | 列宽度是否支持调整 | |\n| selectable | `boolean` | `false` | 支持勾选 | |\n| multiple | `boolean` | `false` | 勾选 icon 是否为多选样式`checkbox`， 默认为`radio` | |\n| lazyRenderAfter | `number` | `100` | 用来控制从第几行开始懒渲染行，用来渲染大表格时有用 | |\n| tableLayout | `auto` \\| `fixed` | `auto` | 当配置为 fixed 时，内容将不会撑开表格，自动换行 | |\n\n### 列配置属性表\n\n| 属性名 | 类型 | 默认值 | 说明 | 版本 |\n| ----------- | --------------------------------------------- | ------ | ------------------------ | -------- |\n| label | | | 表头文本内容 | |\n| name | `string` | | 通过名称关联数据 | |\n| width | `number` \\| `string` | | 列宽 | |\n| remark | | | 提示信息 | |\n| fixed | `left` \\| `right` \\| `none` | | 是否固定当前列 | |\n| popOver | | | 弹出框 | |\n| copyable | `boolean` 或 `{icon: string, content:string}` | | 是否可复制 | |\n| style | `object` | | 单元格自定义样式 | |\n| innerStyle | `object` | | 单元格内部组件自定义样式 | `2.8.1` |\n| align | `left` \\| `right` \\| `center` \\| `justify` | | 单元格对齐方式 | ` 1.4.0` |\n| headerAlign | `left` \\| `right` \\| `center` \\| `justify` | | 表头单元格对齐方式 | `6.7.0` |\n| vAlign | `top` \\| `middle` \\| `bottom` | | 单元格垂直对齐方式 | `6.7.0` |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------------- | ----------------------------------------------------------------------------------------- | -------------------- |\n| selectedChange | `selectedItems: item[]` 已选择行<br/>`unSelectedItems: item[]` 未选择行 | 手动选择表格项时触发 |\n| columnSort | `orderBy: string` 列排序列名<br/>`orderDir: string` 列排序值 | 点击列排序时触发 |\n| columnFilter | `filterName: string` 列筛选列名<br/>`filterValue: string` 列筛选值 | 点击列筛选时触发 |\n| columnSearch | `searchName: string` 列搜索列名<br/>`searchValue: string` 列搜索数据 | 点击列搜索时触发 |\n| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 |\n| columnToggled | `columns: item[]` 当前显示的列配置数据 | 点击自定义列时触发 |\n| rowClick | `item: object` 行点击数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 单击整行时触发 |\n| rowDbClick | `item: object` 行点击数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 双击整行时触发 |\n| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 移入整行时触发 |\n| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 <br />`indexPath: string` 行索引路径 | 移出整行时触发 |\n\n### selectedChange\n\n在开启批量操作后才会用到，可以尝试勾选列表的行记录。\n\n\n\n### columnSort\n\n列排序，可以尝试点击`Browser`列右侧的排序图标。\n\n\n\n### columnFilter\n\n列过滤，可以尝试点击`Rendering engine`列右侧的筛选图标。\n\n\n\n### columnSearch\n\n列检索，，可以尝试点击`ID`列右侧的检索图标。\n\n\n\n### columnToggled\n\n点击自定义列，可以尝试修改`自定义列`的配置。\n\n\n\n### orderChange\n\n在开启拖拽排序行记录后才会用到，排序确认后触发。\n\n\n\n### rowClick\n\n点击行记录。\n\n\n\n### rowDbClick\n\n双击整行时触发。\n\n\n\n### rowMouseEnter\n\n鼠标移入行记录。\n\n\n\n### rowMouseLeave\n\n鼠标移出行记录。\n\n\n\n### 列的事件表\n\n表格的默认列定义的事件如下，即 click、mouseenter、mouseleave。如果列定义是其他组件，则事件表就是这个组件对应的事件表，例如列定义是 Switch 组件，则可以监听 。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | ----------------------------------- | ---------------------------------------------- |\n| click | `[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |\n| mouseenter | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |\n| mouseleave | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移出事件，表格数据鼠标移出时触发 |\n\n可以尝试点击某行的`Rendering engine`列数据、鼠标移入某行的`Browser`列数据。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |\n| select | `args.selected`: string 条件表达式，**不推荐，建议用 `args.index` 或者 `args.condition`** 表达式中可以访问变量`record:行数据`和`rowIndex:行索引`，例如: data.rowIndex === 1 <br /> `args.index` 可选，指定行数，支持表达式，支持树形路径（当为树形表格的时候使用）表达式上下文为对应行数据，跟 `args.select` 的上下文不同。 <br /> `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合 index` | 设置表格的选中项 |\n| selectAll | - | 设置表格全部项选中 |\n| clearAll | - | 清空表格所有选中项 |\n| initDrag | - | 开启表格拖拽排序功能 |\n| cancelDrag | - | 放弃表格拖拽排序功能 |\n| setValue | `args.value`: object <br />`args.index` 可选，指定行数，支持表达式，支持树形路径（当为树形表格的时候使用） <br /> `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合 | 更新列表记录 |\n| submitQuickEdit | | 快速编辑数据提交 |\n| toggleExpanded | `args.index` 可选，指定行数，支持表达式，支持树形路径（当为树形表格的时候使用） <br /> `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合 | 切换某行数据是展开还是收起 |\n| setExpanded | `args.index` 可选，指定行数，支持表达式，支持树形路径（当为树形表格的时候使用） <br /> `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合 <br /> `args.value` 展开还是收起 | 设置某行数据展开还是收起 |\n\nvalue 结构说明：\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | -------- | ------ | -------- |\n| items 或 rows | `item[]` | | 列表记录 |\n\n### select\n\n> 6.3.0 或更高版本\n\n- `args.index` 可选，指定行数，支持表达式，支持树形路径（当为树形表格的时候使用）\n- `args.condition` 可选，通过表达式指定更新哪些行，支持条件组合\n- `args.selected` 不推荐使用，请使用以上两者替代\n\n> 注意 6.3.0 版本开始用法变动，通过 `args.index` 和 `args.condition` 来代替 `args.selected`, 同时表达式上下文为对应行数据，跟 `args.select` 的上下文不同。\n\n\n\n### selectAll\n\n\n\n### clearAll\n\n\n\n### initDrag & cancelDrag\n\n\n\n### setValue\n\n#### 更新列表记录\n\n\n\n#### 更新指定行记录\n\n可以通过指定`index`或者`condition`来分别更新指定索引的行记录和指定满足条件（条件表达式或者 ConditionBuilder）的行记录，另外`replace`同样生效，即可以完全替换指定行记录，也可以对指定行记录做合并。\n\n\n","path":"/zh-CN/components/table"},{"title":"Table2 表格","body":"\n表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像`Service`这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过`source`属性，获取数据链中的数据，完成数据展示。\n\n## 基本用法\n\n可配置表头（`title`）、表尾(`footer`)，同时支持文本或者 schema 类型。\n\n\n\n## 可选择\n\n可以通过配置`rowSelection`来支持单选或者多选，也可以配置`selectable`、`multiple`结合来实现，其中`selectable`、`multiple`的优先级更高。\n\n### 多选\n\n可以简单将`rowSelection`设置为`true`开启多选，也可以给`rowSelection`配置更多属性，不指定`type`则默认为多选。也可以设置`selectable`为`true`，同时`multiple`设置为`true`，同样可以开启多选。\n\n\n\n### 点击整行选择\n\n目前仅能通过`rowSelection.rowClick`属性来开启。\n\n\n\n### 已选择\n\n通过`rowSelection.selectedRowKeys`属性来设置表格内已选中的项，可以使用`primaryField`、`rowSelection.keyField`或者`keyField`指定数据源中用来做值匹配的字段，优先级依次递减。\n\n\n\n### 已选择 - 正则表达式\n\n还可以使用正则表达式的方式来匹配已选中的项，`rowSelection.selectedRowKeysExpr`可以配置表达式。\n\n\n\n### 单选\n\n设置`rowSelection.type`为`radio`或者设置`selectable`为`true`、`multiple`为`false`来实现单选，同时可通过`rowSelection.disableOn`来控制哪一行不可选，不可选情况下默认会有禁用样式，但如果行内有除文字外的其他组件，禁用样式需要自行控制。\n\n\n\n### 自定义选择菜单\n\n内置全选`all`、反选`invert`、清空`none`、选中奇数行`odd`、选中偶数行`even`，可以通过`rowSelection.selections`自行配置，超出内置功能范围的不支持，配置了也无法使用。被禁用的行不参与计算奇偶数。\n\n\n\n### 最大选择个数\n\n可通过设置`maxKeepItemSelectionLength`控制表格可选中的最大个数。\n\n\n\n## 筛选和排序\n\n通过设置`column.sorter`开启列排序，只能通过`crud2`来看实际效果。通过`column.filters`开启列筛选，支持单选、多选两种模式，同样依赖`crud2`查看实际效果。\n\n\n\n## 带边框\n\n可通过`bordered`属性控制表格是否有边框。\n\n\n\n## 可展开\n\n支持点击按钮展开/关闭当前行的自定义内容，展开按钮可放在表格的最左侧、最右侧或通过事件动作来触发展开。\n\n### 默认展开\n\n可简单设置`expandable`为`true`开启行展开功能，也可以在`expandable`属性上配置更多功能，`expandable.expandableOn`控制哪些行可以展开，`expandable.expandedRowKeys`控制哪些行默认展开，默认展开按钮放在表格最左侧。\n\n\n\n### 默认展开 - 正则表达式\n\n也可以通过设置`expandable.expandedRowKeysExpr`使用正则表达式来控制默认展开项。\n\n\n\n### 右侧展开按钮\n\n通过设置`expandable.position`属性为`right`控制，支持不设置（展示在左侧）、`left`、`right`、`none`（无展开按钮）四种情况。\n\n\n\n### 无展开按钮\n\n设置成无展开按钮形式，通过事件动作控制展开关闭，可单独行控制。\n\n\n\n也可以通过正则表达式一次控制多行展开关闭。\n\n\n\n## 表格行/列合并\n\n可以通过设置`column.rowSpanExpr`来实现行合并，`column.colSpanExpr`来实现列合并。\n\n\n\n表头分组的情况下也是合并单元格，但包含分组的表头配置`column.rowSpanExpr`或者`column.colSpanExpr`无效。\n\n\n\n## 固定表头\n\n给`scroll.y`设置一个固定高度，当表格行数据超过该高度时，会自动出现滚动条。\n\n\n\n## 固定列\n\n如果列数足够多或者设置`scroll.x`一个超出表格可视范围的宽度，表格会自动出现横向滚动条，此时可以通过`column.fixed`来固定列，保证左右滑动的时候，一些关键列始终可见。\n\n\n\n## 固定头和列\n\n同时设置`scroll.y`和`column.fixed`，内容超过可视范围，表格会自动出现横向、纵向滚动条，实现同时固定表头和指定列。\n\n\n\n## 表头分组\n\n通过`column.children`可以设置表头分组，实现多级表头，可以任意组合多级嵌套。\n\n\n\n`children`里的配置同`columns`，可以灵活组合，支持无限层级。\n\n\n\n## 拖拽排序\n\n设置`draggable`为`true`，开启手动拖动排序。\n\n### 默认拖拽排序\n\n\n\n### 嵌套拖拽排序\n\n数据源嵌套情况下，仅允许同层级之间排序。\n\n\n\n## 总结栏\n\n支持在表格的顶部或底部设置总结栏。\n\n### 顶部单行\n\n`headSummary`设置顶部导航栏，一维数组为单行，列数和表格列不一致的情况下，需要手动设置`colSpan`来保证总结栏展示和表格对应。\n\n\n\n### 顶部多行\n\n`headSummary`设置为二维数组实现顶部多行。\n\n\n\n### 尾部单行\n\n`footSummary`设置尾部总结行，格式同`headSummary`。\n\n\n\n### 尾部多行\n\n如果二维数组中出现了非数组，那么认为是第一行的数据追加进去。\n\n\n\n## 调整列宽\n\n通过设置`resizable`为`true`开启列宽调整功能，开启后可以手动拖动来调整某一列的宽度。\n\n> 注意：`resizable`开启后，固定宽度的列无法拖动调整列宽\n\n\n\n## 自定义列\n\n### 默认\n\n可简单设置`columnsTogglable`为`true`快速开启自定义列功能，适用于列数较多的情况，可以手动控制展示或隐藏一些列。\n\n\n\n### 自定义图标\n\n如果默认的自定义列图标不能满足需求，可以通过设置`columnsTogglable.icon`来自定义图标。\n\n\n\n## 数据为空\n\n可以通过`placeholder`自定义数据为空时的展示内容，支持文本或者 schema 类型。\n\n\n\n## 数据加载中\n\n可以通过`loading`自定义数据加载时的展示内容，支持布尔或者 schema 类型。\n\n\n\n## 树形结构\n\n当行数据中存在 children 属性时，可以自动嵌套显示下去。也可以通过设置 childrenColumnName 进行配置。\n\n### 默认嵌套\n\n\n\n### 多选嵌套\n\n嵌套模式下表格支持多选的同时支持级联选中。\n\n\n\n### 单选嵌套\n\n单选情况下，不同层级之间都是互斥选择。\n\n\n\n### 缩进设置\n\n嵌套模式下可以通过`indentSize`来设置每一层级的缩进值。\n\n\n\n## 列搜索\n\n通过设置`column.searchable`为`true`快速开启列搜索功能。\n\n\n\n## 粘性头部\n\n设置`sticky`为`true`开启粘性头部。\n\n\n\n## 表格尺寸\n\n通过设置`size`属性来控制表格尺寸，支持`large`、`default`、`small`，`default`是中等尺寸。\n\n### 最大尺寸\n\n`large`是最大尺寸。\n\n\n\n### 默认尺寸\n\n默认尺寸是`default`，即中等尺寸。\n\n\n\n### 小尺寸\n\n`size`设置为`small`是最小尺寸。\n\n\n\n## 可复制\n\n给列配置`copyable`属性即可开启列内容复制功能。\n\n\n\n## 弹出框\n\n可以给列配置上`popOver`属性，默认会在该列内容区里渲染一个图标，点击会显示弹出框，用于展示全部内容。\n\n\n\n也可以设置图标不展示，结合`truncate`实现内容自动省略，其余可点击/悬浮查看更多。\n\n\n\n可以给列配置`popOverEnableOn`属性，该属性为表达式，来控制当前行是否启动`popOver`功能。\n\n\n\n## 行角标\n\n通过属性`itemBadge`，可以为表格行配置属性控制显示的条件，表达式中`this`可以取到行所在上下文的数据，比如行数据中有`badgeText`字段才显示角标，可以设置`\"visibleOn\": \"this.badgeText\"`。\n\n\n\n## 表头提示\n\n通过设置列属性`remark`，可为每一列的表头增加提示信息。\n\n\n\n## 快速编辑\n\n可以通过给列配置：`\"quickEdit\": true`，Table 配置：`quickSaveApi`，可以实现表格内快速编辑并批量保存的功能。\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可以通过设置`columns`中的`className`控制整列样式。\n\n\n\n也可以通过`titleClassName`单独控制表头对应单元格的样式。\n\n\n\n## 单元格样式\n\n可以通过设置`columns`的`classNameExpr`，根据数据动态添加单元格 CSS 类，支持模版语法。\n\n\n\n## 行操作按钮\n\n通过设置`itemActions`可以设置鼠标移动到行上出现操作按钮。\n\n\n\n固定表头情况下，展示行操作按钮。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | -------------------------------------------------------- | ------------------------- | ------------------------------------------------------------------------- |\n| type | `string` | | `\"type\"` 指定为 table 渲染器 |\n| title | `string` | | 标题 |\n| source | `string` | `${items}` | 数据源, 绑定当前环境变量 |\n| sticky | `boolean` | `false` | 是否粘性头部 |\n| footer | `string` \\| `Schema` | | 表格尾部 |\n| loading | `boolean` | | 表格是否加载中 |\n| columnsTogglable | `auto` 或者 `boolean` | `auto` | 展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启 |\n| placeholder | `string` \\| `Schema` | `暂无数据` | 当没数据的时候的文字提示 |\n| rowSelection | `rowSelection` | | 行相关配置 |\n| rowClassNameExpr | `string` | | 行 CSS 类名，支持模版语法 |\n| expandable | `Expandable` | | 展开行配置 |\n| lineHeight | `large` \\| `middle` | | 行高设置 |\n| footerClassName | `string` | `Action.md-table-footer` | 底部外层 CSS 类名 |\n| toolbarClassName | `string` | `Action.md-table-toolbar` | 工具栏 CSS 类名 |\n| columns | `Array<Column>` | | 用来设置列信息 |\n| combineNum | `number` | | 自动合并单元格 |\n| itemActions | Array<> | | 悬浮行操作按钮组 |\n| itemCheckableOn | |\n| itemDraggableOn | |\n| checkOnItemClick | `boolean` | `false` | 点击数据行是否可以勾选当前行 |\n| rowClassName | `string` | | 给行添加 CSS 类名 |\n| rowClassNameExpr | | | 通过模板给行添加 CSS 类名 |\n| prefixRow | `Array` | | 顶部总结行 |\n| affixRow | `Array` | | 底部总结行 |\n| itemBadge | | | 行角标配置 |\n| autoFillHeight | `boolean` 丨 `{height: number}` 丨 `{maxHeight: number}` | | 内容区域自适应高度，可选择自适应、固定高度和最大高度 |\n| lazyRenderAfter | `number` | 100 | 默认数据超过 100 条启动懒加载提升渲染性能，也可通过自定义该属性调整数值 |\n\n## 行配置属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ---------------------------------- | ---------- | ------------------------------------------------------------------------------------------------------------------ |\n| type | `checkbox` \\| `radio` | `checkbox` | 指定单选还是多选 |\n| fixed | `boolean` | | 选择列是否固定，只能左侧固定 |\n| keyField | `string` | `key` | 对应数据源的 key 值，默认是`key`，可指定为`id`、`shortId`等 |\n| disableOn | `string` | | 当前行是否可选择条件，要用 |\n| selections | `selections` | | 自定义筛选菜单，内置`all`（全选）、`invert`（反选）、`none`（取消选择）、`odd`（选择奇数项）、`even`（选择偶数项） |\n| selectedRowKeys | `Array<string>` \\| `Array<number>` | | 已选择项 |\n| selectedRowKeysExpr | `string` | | 已选择项正则表达式 |\n| columnWidth | `number` | | 自定义选择列列宽 |\n| rowClick | `boolean` | | 单条任意区域选中 |\n\n### 选择菜单配置属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | ---------------------------------------------- | ------ | ---------------------------------------------------------- |\n| key | `all` \\| `invert` \\| `none` \\| `odd` \\| `even` | `all` | 菜单类型，内置全选、反选、取消选择、选择奇数项、选择偶数项 |\n| text | `string` | | 自定义菜单项文本 |\n\n## 展开行配置属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ---------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------ |\n| expandableOn | `string` | | 指定可展开的行，要用 |\n| keyField | `string` | `key` | 对应数据源的 key 值，默认是`key`，可指定为`id`、`shortId`等 |\n| disableOn | `string` | | 当前行是否可选择条件，要用 |\n| selections | `selections` | | 自定义筛选菜单，内置`all`（全选）、`invert`（反选）、`none`（取消选择）、`odd`（选择奇数项）、`even`（选择偶数项） |\n| selectedRowKeys | `Array<string>` \\| `Array<number>` | | 已选择项 |\n| selectedRowKeysExpr | `string` | | 已选择项正则表达式 |\n| columnWidth | `number` | | 自定义选择列列宽 |\n\n## 列配置属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | --------------------------------------------- | ------- | ---------------- |\n| label | | | 表头文本内容 |\n| name | `string` | | 通过名称关联数据 |\n| fixed | `left` \\| `right` \\| `none` | | 是否固定当前列 |\n| popOver | | | 弹出框 |\n| quickEdit | | | 快速编辑 |\n| copyable | `boolean` 或 `{icon: string, content:string}` | | 是否可复制 |\n| sortable | `boolean` | `false` | 是否可排序 |\n| searchable | `boolean` \\| `Schema` | `false` | 是否可快速搜索 |\n| width | `number` \\| `string` | 列宽 |\n| remark | | | 提示信息 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------------- | ----------------------------------------------------------------------- | -------------------- |\n| selectedChange | `selectedItems: item[]` 已选择行<br/>`unSelectedItems: item[]` 未选择行 | 手动选择表格项时触发 |\n| columnSort | `orderBy: string` 列排序列名<br/>`orderDir: string` 列排序值 | 点击列排序时触发 |\n| columnFilter | `filterName: string` 列筛选列名<br/>`filterValue: string` 列筛选值 | 点击列筛选时触发 |\n| columnSearch | `searchName: string` 列搜索列名<br/>`searchValue: string` 列搜索数据 | 点击列搜索时触发 |\n| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 |\n| columnToggled | `columns: item[]` 当前显示的列配置数据 | 点击自定义列时触发 |\n| rowClick | `item: object` 行点击数据<br/>`index: number` 行索引 | 单击整行时触发 |\n| rowDbClick | `item: object` 行点击数据<br/>`index: number` 行索引 | 双击整行时触发 |\n| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 | 移入整行时触发 |\n| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 | 移出整行时触发 |\n| quickSaveSubmitted | `item: object` 快速编辑相关数据，包括源数据、修改后的数据、修改的行数索引、没有变动的数据 | 成功调用 `quickSaveApi` 之后触发 |\n\n### selectedChange\n\n在开启批量操作后才会用到，可以尝试勾选列表的行记录。\n\n\n\n### columnSort\n\n列排序，可以尝试点击`Browser`列右侧的排序图标。\n\n\n\n### columnFilter\n\n列过滤，可以尝试点击`Rendering engine`列右侧的筛选图标。\n\n\n\n### columnSearch\n\n列检索，，可以尝试点击`ID`列右侧的检索图标。\n\n\n\n### columnToggled\n\n点击自定义列，可以尝试修改`自定义列`的配置。\n\n\n\n### orderChange\n\n在开启拖拽排序行记录后才会用到，排序确认后触发。\n\n\n\n### rowClick\n\n点击行记录。\n\n\n\n### rowDbClick\n\n双击整行时触发。\n\n\n\n### rowMouseEnter\n\n鼠标移入行记录。\n\n\n\n### rowMouseLeave\n\n鼠标移出行记录。\n\n\n\n### quickSaveSubmitted\n\n快速编辑点击 `submit` , 成功调用 `quickSaveSubmitted`之后触发\n\n\n\n### 列的事件表\n\n表格的默认列定义的事件如下，即 click、mouseenter、mouseleave。如果列定义是其他组件，则事件表就是这个组件对应的事件表，例如列定义是 Switch 组件，则可以监听 。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | ----------------------------------- | ---------------------------------------------- |\n| click | `[columnName]: string` 对应列名的值 | 监听表格列点击事件，表格数据点击时触发 |\n| mouseenter | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移入事件，表格数据鼠标移入时触发 |\n| mouseleave | `[columnName]: string` 对应列名的值 | 监听表格列鼠标移出事件，表格数据鼠标移出时触发 |\n\n可以尝试点击某行的`Rendering engine`列数据、鼠标移入某行的`Browser`列数据。\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| --------- | ---------------------------------------------------------------------------------------------------------------- | ------------------ |\n| select | `selected: string` 条件表达式，表达式中可以访问变量`record:行数据`和`rowIndex:行索引`，例如: data.rowIndex === 1 | 设置表格的选中项 |\n| selectAll | - | 设置表格全部项选中 |\n| clearAll | - | 清空表格所有选中项 |\n| setValue | `value: object` | 更新列表记录 |\n\nvalue 结构说明：\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | -------- | ------ | -------- |\n| items 或 rows | `item[]` | | 列表记录 |\n\n### select\n\n\n\n### selectAll\n\n\n\n### clearAll\n\n\n\n### setValue\n\n#### 更新列表记录\n\n\n\n#### 更新指定行记录\n\n可以通过指定`index`或者`condition`来分别更新指定索引的行记录和指定满足条件（条件表达式或者 ConditionBuilder）的行记录，另外`replace`同样生效，即可以完全替换指定行记录，也可以对指定行记录做合并。\n\n\n","path":"/zh-CN/components/table2"},{"title":"Tabs 选项卡","body":"\n选项卡容器组件。\n\n## 基本用法\n\n\n\n默认想要显示多少选项卡配置多少个 `tabs` 成员即可。但是有时候你可能会想根据某个数据来动态生成。这个时候需要额外配置 `source` 属性如。\n\n\n\n## 拖拽排序\n\n\n\n## 可增加、删除\n\n`tab` 设置的 `closable` 优先级高于整体。使用 `addBtnText` 设置新增按钮文案\n\n\n\n## 可编辑标签名\n\n双击标签名，可开启编辑\n\n\n\n## 可禁用\n\n\n\n## 显示提示\n\n\n\n## 作为表单项的值\n\n如果在表单里给 tabs 配置了 name，它可以作为一个表单提交项的值，默认情况下会取 title\n\n\n\n如果不想使用 title，可以给每个 tab 设置 value，这样就会取这个 value 作为表单项的值\n\n\n\n## 展示模式\n\n### 简约\n\n\n\n### 加强\n\n\n\n### 线型\n\n\n\n### 卡片\n\n\n\n### 仿 Chrome\n\n仿 Chrome tab 样式\n\n\n\n### 水平铺满\n\n\n\n### 选择器型\n\n\n\n### 垂直\n\n\n\n### 侧边栏模式\n\n使用 `sidePosition` 设置标签栏位置。\n\n\n\n## 配置顶部工具栏\n\n配置`toolbar`实现顶部工具栏。\n\n\n\n## 配置 hash\n\n可以在单个`tab`下，配置`hash`属性，支持地址栏`#xxx`。\n\n\n\n## 默认显示某个选项卡\n\n主要配置`activeKey`属性来实现该效果，共有下面两种方法：\n\n#### 配置 hash 值\n\n支持变量，如 `\"tab${id}\"`\n\n\n\n内容来源于 source\n\n\n\n#### 配置索引值\n\n单个`tab`上不要配置`hash`属性，配置需要展示的`tab`索引值，`0`代表第一个。支持变量，如`\"${id}\"`\n\n\n\n### 动态设置选项卡\n\n\n\n### 初始化设置默认选项卡\n\n> 2.7.1 以上版本\n\n\n\n> 初始化组件时 `defaultKey` 优先级高于 `activeKey`，但 `defaultKey` 仅作用于组件初始化时，不会响应上下文数据变化。\n\n## 图标\n\n通过 icon 可以设置 tab 的图标，可以是 fontawesome 或 URL 地址。\n\n\n\n## title 自定义\n\n> 3.2.0 及以上版本\n\n通过配置 tabs 数组中 title 为 schema，就能自定义 title 的显示。\n\n\n\n## 配置超出折叠\n\n通过配置 `collapseOnExceed` 可以用来实现超出折叠，额外还能通过 `collapseBtnLabel` 配置折叠按钮的文字\n\n\n\n## mountOnEnter\n\n只有在点击卡片的时候才会渲染，在内容较多的时候可以提升性能，但第一次点击的时候会有卡顿。\n\n## unmountOnExit\n\n如果你想在切换 tab 时，自动销毁掉隐藏的 tab，请配置`\"unmountOnExit\": true`。\n\n## 监听切换事件\n\n\n\n会传递 key 参数和 props\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------------- | --------------------------------------------- | ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"tabs\"` | 指定为 Tabs 渲染器 |\n| defaultKey | `string` / `number` | | 组件初始化时激活的选项卡，hash 值或索引值，支持使用表达式 `2.7.1 以上版本` |\n| activeKey | `string` / `number` | | 激活的选项卡，hash 值或索引值，支持使用表达式，可响应上下文数据变化 |\n| className | `string` | | 外层 Dom 的类名 |\n| linksClassName | `string` | | Tabs 标题区的类名 |\n| contentClassName | `string` | | Tabs 内容区的类名 |\n| tabsMode | `string` | | 展示模式，取值可以是 `line`、`card`、`radio`、`vertical`、`chrome`、`simple`、`strong`、`tiled`、`sidebar` |\n| tabs | `Array` | | tabs 内容 |\n| source | `string` | | tabs 关联数据，关联后可以重复生成选项卡 |\n| toolbar | | | tabs 中的工具栏 |\n| toolbarClassName | `string` | | tabs 中工具栏的类名 |\n| tabs 时，该 title 不支持 editable 为 true 的双击编辑 |\n| tabs[x].icon | `icon` | | Tab 的图标 |\n| tabs[x].iconPosition | `left` / `right` | `left` | Tab 的图标位置 |\n| tabs | | 内容区 |\n| tabs[x].hash | `string` | | 设置以后将跟 url 的 hash 对应 |\n| tabs[x].reload | `boolean` | | 设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用 |\n| tabs[x].unmountOnExit | `boolean` | | 每次退出都会销毁当前 tab 栏内容 |\n| tabs[x].className | `string` | `\"bg-white b-l b-r b-b wrapper-md\"` | Tab 区域样式 |\n| tabs[x].tip | `string` | | `3.2.0及以上版本支持` Tab 提示，当开启 `showTip` 时生效，作为 Tab 在 hover 时的提示显示，可不配置，如不设置，`tabs[x].title` 作为提示显示 |\n| tabs[x].closable | `boolean` | false | 是否支持删除，优先级高于组件的 `closable` |\n| tabs[x].disabled | `boolean` | false | 是否禁用 |\n| mountOnEnter | `boolean` | true | 只有在点中 tab 的时候才渲染 |\n| unmountOnExit | `boolean` | false | 切换 tab 的时候销毁 |\n| addable | `boolean` | false | 是否支持新增 |\n| addBtnText | `string` | 增加 | 新增按钮文案 |\n| closable | `boolean` | false | 是否支持删除 |\n| draggable | `boolean` | false | 是否支持拖拽 |\n| showTip | `boolean` | false | 是否支持提示 |\n| showTipClassName | `string` | `'' ` | 提示的类 |\n| editable | `boolean` | false | 是否可编辑标签名。当 `tabs 时，双击编辑 Tab 的 title 显示空的内容 |\n| scrollable | `boolean` | true | 是否导航支持内容溢出滚动。（属性废弃） |\n| sidePosition | `left` / `right` | `left` | `sidebar` 模式下，标签栏位置 |\n| collapseOnExceed | `number` | | 当 tabs 超出多少个时开始折叠 |\n| collapseBtnLabel | `string` | `more` | 用来设置折叠按钮的文字 |\n| swipeable | `boolean` | false | 是否开启手势滑动切换（移动端生效） |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`表示当前组件绑定的名称，即`name`属性，如果没有配置`name`属性，则通过`value`取值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------- | ------------------------------------ | ---------------- |\n| change | `value: number \\| string` 选项卡索引 | 切换选项卡时触发 |\n| delete | `value: number \\| string` 选项卡索引 | 删除选项卡时触发 |\n\n### change\n\n\n\n### delete\n\n\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| --------------- | ---------------------------------------- | ---------------- |\n| changeActiveKey | `activeKey: number \\| string` 选项卡索引 | 激活指定的选项卡 |\n| deleteTab | `deleteHash: string` 选项卡 hash | 删除指定的选项卡 |\n\n### changeActiveKey\n\n可以尝试点击下方按钮，实现选项卡激活。\n\n\n\n### deleteTab\n\n可以尝试点击下方按钮，实现选项卡删除。\n\n\n","path":"/zh-CN/components/tabs"},{"title":"Tag 标签","body":"\n用于标记和选择的标签\n\n## 基本用法\n\n\n\n## 不同的模式\n\n\n\n## 标签颜色\n\n标签有几种预设的色彩样式，可以通过设置 color 属性为 active、inactive、error、success、iprocessing、warning 用作不同场景使用。如果预设值不能满足需求，可以设置为具体的色值\n\n\n\n## 自定义样式\n\n可以通过 style 来控制背景、边框及文字颜色。如下\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ----------------------------------------------------------------------------------------- | ---------- | ------------------------------------------ |\n| displayMode | `'normal' \\| 'rounded' \\| 'status'` | `normal` | 展现模式 |\n| color | `'active' \\| 'inactive' \\| 'error' \\| 'success' \\| 'processing' \\| 'warning' \\| 具体色值` | | 颜色主题，提供默认主题，并支持自定义颜色值 |\n| label | `string` | `-` | 标签内容 |\n| icon | `SchemaIcon` | `dot 图标` | status 模式下的前置图标 |\n| className | `string` | | 自定义 CSS 样式类名 |\n| style | `object` | {} | 自定义样式（行内样式），优先级最高 |\n| closable | `boolean` | `false` | 是否展示关闭按钮 |\n\n## 事件表\n\n> 2.6.1 及以上版本\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | ---------------------------- | ---------------- |\n| click | `label: string` 鼠标事件对象 | `点击`时触发 |\n| mouseenter | `label: string` 鼠标事件对象 | `鼠标移入`时触发 |\n| mouseleave | `label: string` 鼠标事件对象 | `鼠标移出`时触发 |\n| close | `label: string` 鼠标事件对象 | `关闭`时触发 |\n\n### click\n\n鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseenter\n\n鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseleave\n\n鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### close\n\n鼠标点击关闭标签。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n","path":"/zh-CN/components/tag"},{"title":"Tasks 任务操作集合","body":"\n任务操作集合，类似于 orp 上线。\n\n## 基本用法\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------------- | --------------------------- | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"tasks\"` | 指定为 Tasks 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| tableClassName | `string` | | table Dom 的类名 |\n| items | `Array` | | 任务列表 |\n| items[x].label | `string` | | 任务名称 |\n| items[x].key | `string` | | 任务键值，请唯一区分 |\n| items[x].remark | `string` | | 当前任务状态，支持 html |\n| items[x].status | `string` | | 任务状态： 0: 初始状态，不可操作。1: 就绪，可操作状态。2: 进行中，还没有结束。3：有错误，不可重试。4: 已正常结束。5：有错误，且可以重试。 |\n| checkApi | | | 返回任务列表，返回的数据请参考 items。 |\n| submitApi | | | 提交任务使用的 API |\n| reSubmitApi | | | 如果任务失败，且可以重试，提交的时候会使用此 API |\n| interval | `number` | `3000` | 当有任务进行中，会每隔一段时间再次检测，而时间间隔就是通过此项配置，默认 3s。 |\n| taskNameLabel | `string` | 任务名称 | 任务名称列说明 |\n| operationLabel | `string` | 操作 | 操作列说明 |\n| statusLabel | `string` | 状态 | 状态列说明 |\n| remarkLabel | `string` | 备注 | 备注列说明 |\n| btnText | `string` | 上线 | 操作按钮文字 |\n| retryBtnText | `string` | 重试 | 重试操作按钮文字 |\n| btnClassName | `string` | `btn-sm btn-default` | 配置容器按钮 className |\n| retryBtnClassName | `string` | `btn-sm btn-danger` | 配置容器重试按钮 className |\n| statusLabelMap | `array` | `[\"label-warning\", \"label-info\", \"label-success\", \"label-danger\", \"label-default\", \"label-danger\"]` | 状态显示对应的类名配置 |\n| statusTextMap | `array` | `[\"未开始\", \"就绪\", \"进行中\", \"出错\", \"已完成\", \"出错\"]` | 状态显示对应的文字显示配置 |\n\n\n","path":"/zh-CN/components/tasks"},{"title":"Timeline 时间轴","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\n\n\n### 文字位于时间轴右侧\n\n\n\n## 动态数据\n\n### 远程数据\n\n\n\n\"source\": \"https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/mock2/timeline/timelineItems\",\n\n远程拉取接口时，返回的数据结构除了需要满足 amis 接口要求的基本数据结构 以外，必须用\"items\"作为时间轴数据的 key 值，如下：\n\n\n\n### 数据域变量配置\n\n> 3.4.0 及以上版本\n\n\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | --------------------------------------------------------------------------------- | ---------- | ----------------------------------------------------------- |\n| type | `string` | | `\"timeline\"` 指定为 时间轴 渲染器 |\n| items | Array<> | [] | 配置节点数据 |\n| source | | | 数据源，可通过数据映射获取当前数据域变量、或者配置 API 对象 |\n| mode | `left` \\| `right` \\| `alternate` | `right` | 指定文字相对于时间轴的位置，仅 direction=vertical 时支持 |\n| direction | `vertical` \\| `horizontal` | `vertical` | 时间轴方向 |\n| reverse | `boolean` | `false` | 根据时间倒序显示 |\n| iconClassName | `string` | | 统一配置的节点图标 CSS 类（3.4.0 版本支持）名 |\n| timeClassName | `string` | | 统一配置的节点时间 CSS 类（3.4.0 版本支持）名 |\n| titleClassName | `string` | | 统一配置的节点标题 CSS 类（3.4.0 版本支持）名 |\n| detailClassName | `string` | | 统一配置的节点详情 CSS 类（3.4.0 版本支持）名 |\n\n### timeline.item\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ------------------------------------------------------- | --------- | ------------------------------------------------------------------------------- |\n| time | `string ` | | 节点时间 |\n| title | `string` \\| | | 节点标题 |\n| detail | `string` | | 节点详细描述（折叠） |\n| detailCollapsedText | `string` | `展开` | 详细内容折叠时按钮文案 |\n| detailExpandedText | `string` | `折叠` | 详细内容展开时按钮文案 |\n| color | `string \\| level样式（info、success、warning、danger）` | `#DADBDD` | 时间轴节点颜色 |\n| icon | `string` | | icon 名，支持 fontawesome v4 或使用 url（优先级高于 color） |\n| iconClassName | `string` | | 节点图标的 CSS 类名（优先级高于统一配置的 iconClassName ，（3.4.0 版本支持）） |\n| timeClassName | `string` | | 节点时间的 CSS 类名（优先级高于统一配置的 timeClassName，（3.4.0 版本支持）） |\n| titleClassName | `string` | | 节点标题的 CSS 类名（优先级高于统一配置的 titleClassName，（3.4.0 版本支持）） |\n| detailClassName | `string` | | 节点详情的 CSS 类名（优先级高于统一配置的 detailClassName，（3.4.0 版本支持）） |\n","path":"/zh-CN/components/timeline"},{"title":"Toast 轻提示","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\n\n\n## 提示单独设置不同的持续时间\n\n\n\n## 渲染 html\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ------------------ | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |\n| actionType | `string` | `\"toast\"` | 指定为 toast 轻提示组件 |\n| items | `Array<ToastItem>` | `[]` | 轻提示内容 |\n| position | `string` | `top-center（移动端为center）` | 提示显示位置，可用'top-right'、'top-center'、'top-left'、'bottom-center'、'bottom-left'、'bottom-right'、'center' |\n| closeButton | `boolean` | `false` | 是否展示关闭按钮，移动端不展示 |\n| showIcon | `boolean` | `true` | 是否展示图标 |\n| timeout | `number` | `5000（error类型为6000，移动端为3000）` | 持续时间 |\n\n## ToastItem 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | ---------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |\n| title | `string \\| SchemaNode` | | 标题 |\n| body | `string \\| SchemaNode` | | 内容 |\n| level | `string` | `info` | 展示图标，可选'info'、'success'、'error'、'warning' |\n| position | `string` | `top-center（移动端为center）` | 提示显示位置，可用'top-right'、'top-center'、'top-left'、'bottom-center'、'bottom-left'、'bottom-right'、'center' |\n| closeButton | `boolean` | `false` | 是否展示关闭按钮 |\n| showIcon | `boolean` | `true` | 是否展示图标 |\n| timeout | `number` | `5000（error类型为6000，移动端为3000）` | 持续时间 |\n| allowHtml | `boolean` | `true` | 是否会被当作 HTML 片段处理 |\n","path":"/zh-CN/components/toast"},{"title":"TooltipWrapper 文字提示容器","body":"\n## 基本配置\n\n当用户鼠标悬停或者点击元素时，显示文字提示浮层，`title`可以为浮层添加标题。\n\n\n\n`body`支持传入多个子元素：\n\n\n\n## 提示位置\n\n提供四种不同方向的展示方式：`'top' | 'left' | 'right' | 'bottom'`。\n\n\n\n## 位置偏移\n\n组件提供了关于相对提示位置的垂直、水平位置上的偏移，默认[0, 0]。\n\n\n\n## 展示箭头\n\n`showArrow` 为 `false` 不展示箭头。\n\n\n\n## 主题色\n\n组件提供了两个不同的主题：`dark` 和 `light`，默认使用`light`。\n\n\n\n## 延迟打开&关闭\n\n`mouseEnterDelay` 为延迟展示, `mouseLeaveDelay` 为延迟隐藏，\n\n\n\n## 动态文案\n\n`content` 和 `title` 支持变量映射，可以从上下文中动态获取提示文案。\n\n\n\n## 内联展示\n\n设置`\"inline\": true`使容器内联展示\n\n\n\n## 自定义样式\n\n使用`style`控制内容区样式，`tooltipStyle`控制浮层区样式\n\n\n\n## 自定义包裹标签\n\n使用`wrapperComponent`修改标签名，可以让容器使用其他标签渲染：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------------- | ----------------------------------------------------------------------- | ------------------- | ---------------------------------------------- |\n| type | `string` | `\"tooltip-wrapper\"` | 指定为文字提示容器组件 |\n| title | `string` | `\"\"` | 文字提示标题 |\n| content | `string` | `\"\"` | 文字提示内容, 兼容之前的 tooltip 属性 |\n| placement | `\"top\" \\| \"left\" \\| \"right\" \\| \"bottom\" ` | `\"top\"` | 文字提示浮层出现位置 |\n| tooltipTheme | `\"light\" \\| \"dark\"` | `\"light\"` | 主题样式， 默认为 light |\n| offset | `[number, number]` | `[0, 0]` | 文字提示浮层位置相对偏移量，单位 px |\n| showArrow | `boolean` | `true` | 是否展示浮层指向箭头 |\n| enterable | `boolean` | `true` | 是否鼠标可以移入到浮层中 |\n| disabled | `boolean` | `false` | 是否禁用浮层提示 |\n| trigger | `\"hover\" \\| \"click\" \\| \"focus\" \\| Array<\"hover\" \\| \"click\" \\| \"focus\">` | `\"hover\"` | 浮层触发方式，支持数组写法`[\"hover\", \"click\"]` |\n| mouseEnterDelay | `number` | `0` | 浮层延迟展示时间，单位 ms |\n| mouseLeaveDelay | `number` | `300` | 浮层延迟隐藏时间，单位 ms |\n| rootClose | `boolean` | `true` | 是否点击非内容区域关闭提示 |\n| inline | `boolean` | `false` | 内容区是否内联显示 |\n| wrapperComponent | `string` | `\"div\" \\| \"span\"` | 容器标签名 |\n| body | | - | 内容容器 |\n| style | `Object` \\| `string` | | 内容区自定义样式 |\n| tooltipStyle | `Object` \\| `string` | | 浮层自定义样式 |\n| className | `string` | | 内容区类名 |\n| tooltipClassName | `string` | | 文字提示浮层类名 |\n","path":"/zh-CN/components/tooltip-wrapper"},{"title":"Tpl 模板","body":"\n输出 的常用组件\n\n## 基本用法\n\n\n\n更多模板相关配置请看\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | ------------------------------------ | ------- | -------------------------------------------- |\n| type | `string` | `\"tpl\"` | 指定为 Tpl 组件 |\n| className | `string` | | 外层 Dom 的类名 |\n| tpl | | | 配置模板 |\n| showNativeTitle | `boolean` | | 是否设置外层 DOM 节点的 title 属性为文本内容 |\n\n## 事件表\n\n> 2.5.3 及以上版本\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n| 事件名称 | 事件参数 | 说明 |\n| ---------- | -------- | -------------- |\n| click | - | 点击时触发 |\n| mouseenter | - | 鼠标移入时触发 |\n| mouseleave | - | 鼠标移出时触发 |\n\n### click\n\n鼠标点击。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseenter\n\n鼠标移入。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n\n### mouseleave\n\n鼠标移出。可以尝试通过`${event.context.nativeEvent}`获取鼠标事件对象。\n\n\n","path":"/zh-CN/components/tpl"},{"title":"Video 视频","body":"\n## 基本用法\n\n\n\n## flv 和 hls 直播\n\n需要设置 `isLive: true`，目前 flv 和 hls 是通过文件后缀来判断的，还可以通过设置 videoType 来指定，它有两个值：\n\n- `video/x-flv`，使用 播放 flv\n- `application/x-mpegURL`，使用 播放 hls 格式\n\n## 视频帧切换功能\n\n可以定义一组视频帧，渲染的时候会列出来这些帧，点击的时候会自动跳转到对应位置开始播放。\n\n\n\n可以设置帧图片如果有的话，这个示例偷懒直接用封面了。\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------ | --------- | --------- | ------------------------------------------------------------------------- |\n| type | `string` | `\"video\"` | 指定为 video 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| src | `string` | | 视频地址 |\n| isLive | `boolean` | false | 是否为直播，视频为直播时需要添加上，支持`flv`和`hls`格式 |\n| videoType | `string` | | 指定直播视频格式 |\n| poster | `string` | | 视频封面地址 |\n| muted | `boolean` | | 是否静音 |\n| loop | `boolean` | | 是否循环播放 |\n| autoPlay | `boolean` | | 是否自动播放 |\n| rates | `array` | | 倍数，格式为`[1.0, 1.5, 2.0]` |\n| frames | `object` | | key 是时刻信息，value 可以可以为空，可有设置为图片地址，请看上方示例 |\n| jumpBufferDuration | `boolean` | | 点击帧的时候默认是跳转到对应的时刻，如果想提前 3 秒钟，可以设置这个值为 3 |\n| stopOnNextFrame | `boolean` | | 到了下一帧默认是接着播放，配置这个会自动停止 |\n","path":"/zh-CN/components/video"},{"title":"Web Component","body":"\n专门用来渲染 web component 的组件，可以通过这种方式来扩展 amis 组件，比如使用 Angular。\n\n## 基本用法\n\n比如下面这个 web component\n\n\n\n对应代码类似\n\n```javascript\nimport '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';\n\nclass RandomNumber extends HTMLElement {\n connectedCallback() {\n const prefix = this.getAttribute('prefix') || '';\n const shadow = this.attachShadow({mode: 'open'});\n const text = document.createElement('span');\n text.textContent = `${prefix}: ${Math.floor(Math.random() * 1000)}`;\n shadow.appendChild(text);\n setInterval(function () {\n const count = `${prefix}: ${Math.floor(Math.random() * 1000)}`;\n text.textContent = count;\n }, 2000);\n }\n}\n\ncustomElements.define('random-number', RandomNumber);\njson\n{\n \"type\": \"web-component\",\n \"tag\": \"random-number\",\n \"props\": {\n \"prefix\": \"hello\",\n \"class\": \"my-class\"\n }\n}\n```\n\n其中 `tag` 指定标签，属性放在 `props` 对象里，props 里的值支持变量替换，比如：\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | ----------------------------------------- | ----------------- | ----------------------------- |\n| type | `string` | `\"web-component\"` | 指定为 web-component 渲染器 |\n| tag | `string` | | 具体使用的 web-component 标签 |\n| props | `object` | | 标签上的属性 |\n| body | | | 子节点 |\n","path":"/zh-CN/components/web-component"},{"title":"Wizard 向导","body":"\n表单向导，能够配置多个步骤引导用户一步一步完成表单提交。\n\n## 基本使用\n\n\n\n## 自定义按钮\n\n可以在每个 `step` 中配置 `actions` 来自定义按钮。按钮所在数据域查看`WizardActionData`定义（`3.5.0`及以上版本支持）\n\n\n\n\n\n## 初始化到某一步\n\n`initApi` 接口返回 `step` 字段即可，注意得是数字类型。`1` 表示第一步，`2` 表示第二步，以此类推\n\n\n\n## 限制跳转\n\n可以通过在 step 上配置 `jumpableOn` 来限制跳转，可以基于整体 wizard 数据，或者基于 `currentStep` 来判断。\n\n比如：`\"jumpableOn\": \"${!website}\",` 当设置完成了 website 后不可以回去跳转\n\n\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ---------------------------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| type | `string` | `\"wizard\"` | 指定为 `Wizard` 组件 |\n| mode | `string` | `\"horizontal\"` | 展示模式，选择：`horizontal` 或者 `vertical` |\n| api | | | 最后一步保存的接口。 |\n| initApi | | | 初始化数据接口 |\n| initFetch | | | 初始是否拉取数据。 |\n| initFetchOn | | | 初始是否拉取数据，通过表达式来配置 |\n| actionPrevLabel | `string` | `上一步` | 上一步按钮文本 |\n| actionNextLabel | `string` | `下一步` | 下一步按钮文本 |\n| actionNextSaveLabel | `string` | `保存并下一步` | 保存并下一步按钮文本 |\n| actionFinishLabel | `string` | `完成` | 完成按钮文本 |\n| className | `string` | | 外层 CSS 类名 |\n| actionClassName | `string` | `btn-sm btn-default` | 按钮 CSS 类名 |\n| reload | `string` | | 操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。 |\n| redirect | | `3000` | 操作完后跳转。 |\n| target | `string` | `false` | 可以把数据提交给别的组件而不是自己保存。请填写目标组件设置的 name 值，如果填写为 `window` 则把数据同步到地址栏上，同时依赖这些数据的组件会自动重新刷新。 |\n| steps | Array<> | | 数组，配置步骤信息 |\n| startStep | `string` | `1` | 起始默认值，从第几步开始。可支持模版，但是只有在组件创建时渲染模版并设置当前步数，在之后组件被刷新时，当前 step 不会根据 startStep 改变 |\n\n### step\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------------- | ---------------------------------------- | ------ | ----------------------------------------------------------------------------------------------------------- |\n| title | `string` | | 步骤标题 |\n| mode | `string` | | 展示默认，跟 中的模式一样，选择： `normal`、`horizontal`或者`inline`。 |\n| horizontal | `Object` | | 当为水平模式时，用来控制左右占比 |\n| horizontal.label | `number` | | 左边 label 的宽度占比 |\n| horizontal.right | `number` | | 右边控制器的宽度占比。 |\n| horizontal.offset | `number` | | 当没有设置 label 时，右边控制器的偏移量 |\n| api | | | 当前步骤保存接口，可以不配置。 |\n| initApi | | | 当前步骤数据初始化接口。 |\n| initFetch | `boolean` | | 当前步骤数据初始化接口是否初始拉取。 |\n| initFetchOn | | | 当前步骤数据初始化接口是否初始拉取，用表达式来决定。 |\n| body | Array<。 |\n| closeDialogOnSubmit | `boolean` | | 提交的时候是否关闭弹窗。当 widzard 里面有且只有一个弹窗的时候，本身提交会触发弹窗关闭，此属性可以关闭此行为 |\n| jumpableOn | `string` | | 配置是否可跳转的表达式 |\n| actions | `Array<Schema>` | | 自定义每一步的操作按钮 |\n\n## 事件表\n\n当前组件会对外派发以下事件，可以通过`onEvent`来监听这些事件，并通过`actions`来配置执行的动作，在`actions`中可以通过`${事件参数名}`或`${event.data.。\n\n> `[name]`为当前数据域中的字段名，例如：当前数据域为 {username: 'amis'}，则可以通过${username}获取对应的值。\n\n| 事件名称 | 事件参数 | 说明 |\n| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- |\n| inited | `responseData: any` 请求的响应数据</br>`responseStatus: number` 响应状态，0 表示成功</br>`responseMsg: string`响应消息, `error`表示接口是否成功<br/>`[name]: any` 当前数据域中指定字段的值 | initApi 接口请求完成时触发 |\n| stepChange | `step: number` 步骤索引 | 切换步骤时触发 |\n| change | `event.data: object` 当前表单数据<br/>`[name]: any` 当前数据域中指定字段的值 | 表单值变化时触发 |\n| stepSubmitSucc | - | 单个步骤提交成功 |\n| stepSubmitFail | `error: object` 单个步骤 api 远程请求失败后返回的错误信息 | 单个步骤提交失败 |\n| finished | `event.data: object` 即将提交的表单数据<br/>`[name]: any` 当前数据域中指定字段的值 | 最终提交时触发 |\n| submitSucc | `result: object` api 远程请求成功后返回的结果数据 | 最终提交成功时触发 |\n| submitFail | `error: object` api 远程请求失败后返回的错误信息 | 最终提交失败时触发 |\n\n## 动作表\n\n当前组件对外暴露以下特性动作，其他组件可以通过指定`actionType: 动作名称`、`componentId: 该组件id`来触发这些动作，动作配置可以通过`args: {动作配置项名称: xxx}`来配置具体的参数，详细请查看。\n\n| 动作名称 | 动作配置 | 说明 |\n| ----------- | -------------------------- | ---------------------------------------- |\n| submit | - | 全部提交 |\n| step-submit | - | 分步提交 |\n| next | - | 下一步 |\n| prev | - | 上一步 |\n| goto-step | `step: number` 目标步骤 | 定位步骤 |\n| reload | - | 重新加载，调用 `intiApi`，刷新数据域数据 |\n| setValue | `value: object` 更新的数据 | 更新数据 |\n","path":"/zh-CN/components/wizard"},{"title":"Wrapper 包裹容器","body":"\n简单的一个包裹容器组件，相当于用 div 包含起来，最大的用处是用来配合 css 进行布局。\n\n## 基本用法\n\n\n\n> 上面例子中的 `\"className\": \"b\"` 是为了增加边框，不然看不出来。\n\n## 动态获取\n\n直接返回一个对象\n\n\n\n返回变量\n\n\n\n## 不同内边距\n\n通过配置`size`属性，可以调整内边距\n\n\n\n## style\n\n> 1.1.5 版本\n\nwrapper 可以设置 style，当成一个 `div` 标签来用\n\n## 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | ----------------------------------------- | ----------- | ---------------------------- |\n| type | `string` | `\"wrapper\"` | 指定为 Wrapper 渲染器 |\n| className | `string` | | 外层 Dom 的类名 |\n| size | `string` | | 支持: `xs`、`sm`、`md`和`lg` |\n| style | `Object` \\| `string` | | 自定义样式 |\n| body | | | 内容容器 |\n","path":"/zh-CN/components/wrapper"},{"title":"行为","body":"\n页面的交互操作，例如：**提交表单、显示一个弹框、跳转页面、复制一段文字到粘贴板**等等操作，都可以视作页面的一种**行为**。\n\n在 amis 中，大部分 **行为** 是跟 **行为按钮组件** 进行绑定的，也就是说，当你想要配置一个行为，大部分情况下你应该遵循下面的步骤：\n\n1. 添加一个 **行为按钮组件**；\n2. 配置当前 **行为类型（actionType）**；\n3. 根据当前行为类型，配置你想要的 **属性**。\n\n## 如何配置行为？\n\n### 通过行为按钮\n\n\n\n1. 在`page`内容区中，添加一个`action`行为按钮组件\n2. 配置当前行为类型是 ajax（即发送一个 ajax 请求)\n3. 配置请求 api，值为 API 类型\n\n现在点击该按钮，你会发现浏览器发出了这个`ajax`请求。\n\n很简单是吧？我们再来一个例子：\n\n\n\n这次我们配置`actionType`为`dialog`，意味着点击该按钮会弹出一个模态框，并配置`dialog`内容，来显示字符串`Hello World!`\n\n> `dialog`是容器，也就意味着可以在`body`属性中配置其他组件\n\n完整的行为列表可以查看 组件\n\n### 组件所支持的行为\n\n一些特殊组件，例如 Chart 组件 中的图表点击行为，可以直接配置`clickAction`，来配置行为对象。\n","path":"/zh-CN/docs/concepts/action"},{"title":"数据映射","body":"\n数据映射支持用户通过`${xxx}`或`$xxx`获取当前数据链中某个变量的值，实现灵活的数据配置功能，主要用于模板字符串、 自定义 `api` 请求数据体格式等场景。\n\n## 模板字符串\n\n\n\n**tip：** 默认 amis 在解析模板字符串时，遇到`$`字符会尝试去解析该变量并替换改模板变量，如果你想输出纯文本`\"${xxx}\"`或`\"$xxx\"`，那么需要在`$`前加转义字符`\"\\\\\"`，即`\"\\\\${xxx}\"`\n\n\n\n## 支持链式取值\n\n可以使用`.`进行链式取值\n\n\n\n## 自定义 api 请求体数据格式\n\n在表单提交接口时，amis 默认的请求体数据格式可能不符合你的预期，不用担心，你可以使用数据映射定制想要的数据格式：\n\n查看下面这种场景：\n\n\n\n当输入姓名：`rick` 和邮箱：`rick@gmail.com` 后，`form` 获取当前的数据域，提交后端接口的数据格式应该是这样的：\n\n\n\n遗憾的是，你的后端接口只支持的如下的输入数据结构，且无法修改：\n\n\n\n这时，除了直接更改你的 姓名表单项 和 邮箱表单项 的`name`属性为相应的字段以外，你可以配置`api`的`data`属性，使用**数据映射**轻松实现**数据格式的自定义：**\n\n\n\n你可以查看网络面板，发送给后端接口的数据体应该已经成功修改为：\n\n\n\n## 复杂配置\n\n### 展开所配置的数据\n\n可以使用`\"&\"`，作为数据映射 key，展开所配置的变量，例如：\n\n下面例子中，我们想在提交的时候，除了提交 `name` 和 `email` 变量以外，还想添加 `c` 下面的所有变量 `e`,`f`,`g`，但是按照之前所讲的， api 应该这么配置：\n\n\n\n点击提交查看网络面板数据，你会发现数据是符合预期的：\n\n\n\n但是当变量字段过多的时候，你需要一一映射配置，也许有点麻烦，所以可以使用`\"&\"`标识符，来展开所配置变量：\n\n\n\n上例中我们 api.data 配置如下：\n\n\n\n`\"&\"`标识符会将所配置的`c`变量的`value`值，展开并拼接在`data`中。查看网络面板可以看到数据如下：\n\n\n\n### 数组提取值\n\n\n\n上例中的`api`的`data`配置格式如下：\n\n\n\n这个配置的意思是，只提取`table`数组中的`a`变量和`c`变量，组成新的数组，赋值给`items`变量\n\n点击提交，查看浏览器网络面板可以发现，表单的提交数据结构如下：\n\n\n\n### namespace\n\n> since 1.1.6\n\n默认取值都是从当前组件上下文数据链中取数据，但是有些数据可能不在这个数据链中，比如有些数据存在全局变量，有的数据存在 localstorage 中。\n\n从 1.1.6 版本开始，支持了一种新的语法如：`${window:document.title}` 意思是从全局变量中取页面的标题。\n\n目前有以下三种 namespace\n\n- `window` 即全局变量\n- `ls` 即 localStorage， 如果值是 json 对象，可以直接当对象用比如：`${ls:xxxxxlocalStrorageKey.xxxx}`\n- `ss` 即 sessionStorage，同上。\n- `cookie` 即 cookies，同上。\n\n\n\n## 过滤器\n\n1.5.0 开始，更推荐用函数调用的语法来写，如 `${xxx | html}` 改用 `${html(xxx)}`。具体请查看\n\n过滤器是对数据映射的一种增强，它的作用是对获取数据做一些处理，基本用法如下：\n\n\n\n下面我们会逐一介绍每一个过滤器的用法。\n\n> 过滤器可以 \n\n### html\n\n用于显示 html 文本。\n\n##### 基本用法\n\n\n\n\n\n### raw\n\n不同场景下，在使用数据映射时，amis 可能默认会使用`html`过滤器对数据进行转义显示，这时如果想要输出原始文本，请配置`raw`过滤器。\n\n##### 基本用法\n\n使用`raw`可以直接输出原始文本\n\n\n\n\n\n> **注意！！！**\n>\n> `raw`过滤器虽然支持显示原始文本，也就意味着可以输出 HTML 片段，但是动态渲染 HTML 是非常危险的，容易导致 **XSS** 攻击。\n>\n> 因此在 使用`raw`过滤器的时候，请确保变量的内容可信，且永远不要渲染用户填写的内容。\n\n### json\n\n用于将数据转换为`json`格式字符串\n\n##### 基本用法\n\n\n\n\n\n##### 指定缩进数\n\n\n\n### toJson\n\n与相反，用于将`json`格式的字符串，转换为`javascript`对象\n\n\n\n\n\n对`Javascript`的直接输出会显示` 来格式化显示`json`文本。\n\n### toInt\n\n字符串转整形数字，如果目标数据不是字符串则不处理。\n\n\n\n### toFloat\n\n字符串转浮点数字，如果目标数据不是字符串则不处理。\n\n\n\n### date\n\n日期格式化过滤器，用于把特定时间值按指定格式输出。\n\n##### 基本用法\n\n\n\n- **format**：需要展示的格式，默认为`LLL`，即本地化时间格式\n- **inputFormat**：指定该变量值的格式，默认为`X`，即时间戳秒，具体参数的配置需要参考 ，下面是其它几种常见的格式：\n - `x`，毫秒\n - `YYYY-MM-DDTHH:mm:ssZ`，ISO8601 格式，其中 YYYY 是年，MM 是月，DD 是日，HH 是小时，mm 是分钟，ss 是秒\n\n\n\n\n\n##### 配置输出格式\n\n例如你想将某一个时间值，以 `2020-04-14` 这样的格式输出，那么查找 moment 文档可知配置格式应为 `YYYY-MM-DD`，即：\n\n\n\n##### 配置数据格式\n\n如果你的数据值默认不是`X`格式（即时间戳格式），那么需要配置`inputformat`参数用于解析当前时间值，例如：\n\n\n\n> **注意：** 在过滤器参数中使用`:`字符，需要在前面加`\\\\`转义字符\n\n### now\n\n返回当前时间，注意这个是个过滤函数，不是变量，所以这个其实会导致前面的变量选择没有意义。\n\n用法：\n\n\n\n### toDate\n\n将日期字符串转成日期对象, 第二个参数为字符串的日期格式类型。\n\n用法：\n\n\n\n### dateModify\n\n日期修改，将输入的日期对象修改后返回新的日期对象，支持四种操作符。\n\n- `add` 加 n （秒|分钟|小时|天|月|季度|年）。\n- `subtract` 减 n （秒|分钟|小时|天|月|季度|年）。\n- `startOf` 修改成某个维度的开头。\n- `endOf` 修改成某个纬度的结尾。\n\n比如：\n\n将 xxx 修改成 7 天前，假如值是 10 月 8 号，那么处理完后就是 10 月 1 号。\n\n\n\n来个高级点的，比如我想返回个上个月开头的第一天。\n\n\n\n### fromNow\n\n> 1.4.0 及以上版本\n\n显示日期和现在的相对时间\n\n\n\n可以设置日期数据的格式，比如 X 是秒，其它格式细节参考 。\n\n\n\n### number\n\n自动给数字加千分位。\n\n##### 基本用法\n\n\n\n\n\n### trim\n\n把变量值前后多余的空格去掉。\n\n##### 基本用法\n\n\n\n### percent\n\n##### 基本用法\n\n\n\n- **decimals**：指定小数点后`n`位数，默认为`0`\n\n\n\n##### 指定小数点后位数\n\n\n\n### round\n\n四舍五入取整\n\n\n\n- **decimals**：指定小数点后`n`位小数，默认为`2`\n\n\n\n##### 指定小数点后位数\n\n\n\n### truncate\n\n当超出若干个字符时，后面的部分直接显示某串字符\n\n##### 基本用法\n\n\n\n- **length**：指定多长的字符后省略，默认为`200`\n- **mask**：省略时显示的字符，默认为`\"...\"`\n\n\n\n### url_encode\n\n效果同 \n\n##### 基本用法\n\n\n\n### url_decode\n\n效果同 ，注意从`2.3.0`版本开始，不合法的输入会被转化为`undefined`。\n\n##### 基本用法\n\n\n\n### default\n\n当变量值为空时，显示其他值代替。\n\n##### 基本用法\n\n\n\n- **defaultValue**：显示的默认值\n\n\n\n### split\n\n可以将字符传通过分隔符分离成数组\n\n##### 基本用法\n\n\n\n- **delimiter**：分隔值，默认为`,`\n\n\n\n### join\n\n当变量值是数组时，可以把内容连接起来。\n\n##### 基本用法\n\n\n\n- **separator**：连接符，默认为`逗号`\n\n\n\n配置成空字符串\n\n\n\n配置成连接符\n\n\n\n### sortBy\n\n对目标数组进行排序。\n\n- **key** 字段名，可以是数字，支持层级。\n- **method** 排序方式 `alpha` 或者 `numerical`\n- **dir** 排序方式 `desc` 或者 `asc`\n\n如：`${list|sortBy:value:numerical:desc}` 让 list 按 value 字段的数值倒序。\n\n### topAndOther\n\n取前多少个，剩下的归位一组比如：`${list|topAndOther:10:name:Others}`\n\n对数组分为 10 组，前面 9 组分别拿前 9 个，最后一组将剩下的归为一组，并对每项做数字累加。\n\n- **len** 分多少组\n- **labelField** 默认为 `name`\n- **restLabel** 默认为`其他`。\n\n### unique\n\n对目标数组进行去重。\n\n- **key** 可选，不指定属性则直接对整个成员进行去重。\n\n如：`${items|unique:name}` 返回一个新数组，并且对成员属性 name 进行了去重。\n\n### first\n\n获取数组中的第一个值\n\n##### 基本用法\n\n\n\n\n\n### last\n\n获取数组中的最后一个值\n\n##### 基本用法\n\n\n\n\n\n### nth\n\n获取数组中的第`n`个值\n\n##### 基本用法\n\n\n\n- **nth**：指定获取第几个值\n\n\n\n**注意：** nth 配置`0`为获取第一个元素。\n\n### pick\n\n获取对象或数组中符合条件的筛选值\n\n##### 基本用法\n\n\n\n- **path:** 指定筛选的模板，默认为`&`，即返回原数据\n\n##### 在对象中获取某个 key 值\n\n\n\n##### 遍历对象数组获取指定值\n\n\n\n##### 遍历数组对象，并自定义 key\n\n\n\n可以用变量 index 来获取下标。\n\n### objectToArray\n\n对象转换为数组\n\n- key: 对象的键转换之后的字段名，默认是'label'\n- value: 对象的值转换之后的字段名，默认是'value'\n\n\n\n\n\n\n\n### plus\n\n加法运算比如加 2\n\n\n\n还可以是另一个变量，比如\n\n\n\n\n\n下面的减法乘法和除法也都支持变量\n\n### minus\n\n减法运算比如减 2\n\n\n\n### times\n\n乘法运算\n\n\n\n### division\n\n除法运算\n\n\n\n### sum\n\n求和，通常操作对象是个数组，比如想把数组中成员对象字段 cost 中的数值求和。\n\n\n\n### abs\n\n变成正数。\n\n\n\n### duration\n\n秒值格式化成时间格式\n\n##### 基本用法\n\n\n\n\n\n### bytes\n\n字节格式化展示\n\n##### 基本用法\n\n\n\n\n\n##### 指定换算间隔参数\n\n\n\n\n\n### asArray\n\n将数据包成数组\n\n##### 基本用法\n\n\n\n\n\n### lowerCase\n\n将字符串转小写\n\n##### 基本用法\n\n\n\n\n\n### upperCase\n\n将字符串转大写\n\n##### 基本用法\n\n\n\n\n\n### substring\n\n> 1.5.0 及以上版本\n\n取字符串的一部分，第一个参数是起始，第二个参数的结束\n\n##### 基本用法\n\n下面写法将会取前两个字符\n\n\n\n\n\n### base64Encode\n\nbase64 加密\n\n##### 基本用法\n\n\n\n\n\n### base64Decode\n\nbase64 解密\n\n##### 基本用法\n\n\n\n\n\n### isTrue\n\n真值条件过滤器\n\n##### 基本用法\n\n\n\n- **trueValue**: 如果变量为 ，即返回该值；\n- **falseValue**: 如果变量为 ，则返回该值。\n\n> 配置`trueValue`和`falseValue`时，如果想要返回当前数据域中某个变量的值，那么参数可以直接配置变量名而不需要在两边添加引号；如果想返回某字符串，那么需要给参数两边添加单引号或双引号，\n>\n> 例如 `${xxx|isTrue:'foo':bar}`，当 `xxx` 变量为真，那么会返回 **字符串`'foo'`**，如果不为真，那么返回数据域中 **变量`bar`** 的值。\n\n\n\n##### 返回数据域中变量\n\n参数中不添加引号，可以直接返回数据域中变量值\n\n\n\n### isFalse\n\n假值条件过滤器\n\n##### 基本用法\n\n\n\n用法与 相同，判断逻辑相反\n\n### isMatch\n\n模糊匹配条件过滤器\n\n##### 基本用法\n\n\n\n- **matchParam**: 匹配关键字参数\n - 如果想模糊匹配特定字符串，那么参数需要在两边添加单引号或者双引号；\n - 如果想模糊匹配某个变量值，那么参数不需要添加引号。\n- **trueValue**: 如果模糊匹配成功，即返回该值；\n- **falseValue**: 如果模糊匹配失败，则返回该值。\n\n\n\n##### 返回数据域中变量\n\n参数中不添加引号，可以直接返回数据域中变量值\n\n\n\n### notMatch\n\n##### 基本用法\n\n\n\n用法与 相同，判断逻辑相反。\n\n### isEquals\n\n全等匹配过滤器\n\n##### 基本用法\n\n\n\n- **equalsValue**: 全等匹配关键字参数\n - 如果想判断等于特定字符串，那么参数需要在两边添加单引号或者双引号；\n - 如果想判断等于某个变量值，那么参数不需要添加引号。\n- **trueValue**: 如果模糊匹配成功，即返回该值；\n- **falseValue**: 如果模糊匹配失败，则返回该值。\n\n\n\n##### 返回数据域中变量\n\n参数中不添加引号，可以直接返回数据域中变量值\n\n\n\n### notEquals\n\n不全等匹配过滤器\n\n##### 基本用法\n\n\n\n用法与 相同，判断逻辑相反。\n\n### map\n\n数组操作，操作对象为数组，当目标对象不是数组或者 mapFn(filterName) 不存在时将无效。\n\n##### 基本用法\n\n\n\n\n\n### filter\n\n过滤数组，操作对象为数组，当目标对象不是数组时将无效。\n\n##### 基本用法\n\n\n\n- **keys**: 参与过滤的字段集合\n- **directive**: 用于过滤数组的指令，包含下面这几种\n\n - `isTrue` 目标值为真通过筛选。\n - `isFalse` 目标值为假时通过筛选。\n - `isExists` 目标值是否存在。\n - `match` 模糊匹配后面的参数。`${xxx|filter:a,b:match:keywords}` 表示 xxx 里面的成员，如果字段 a 或者 字段 b 模糊匹配 keywords 变量的值，则通过筛选。\n - `equals` 相对于模糊匹配，这个就相对精确匹配了，用法跟 `match` 一样。\n - `isIn` 目标值是否在一个范围内？`${xxx|filter:yyy:isIn:[a,b]}` xxx 数组内的 yyy 变量是否是字符串 `\"a\"` 或者 `\"b\"`，如果要取变量就是 `${xxx|filter:yyy:isIn:zzz}` xxx 数组内的 yyy 属性，必须在 zzz 变量这个数组内。\n - `notIn`目标值是否不在一个范围内，参考 `isIn`。\n\n- **arg1**: 字符串或变量名\n\n 比如: `${xxx|filter:readonly:isTrue}` 将 xxx 数组中 readonly 为 true 的成员提取出来。\n 再来个例子：`${xxx|filter:a,b:match:keywords}` 将 xxx 数组中成员变量 a 或者 b 的值与环境中 keywords 的值相匹配的提取出来。如果不需要取变量，也可以写固定值如：`${xxx|filter:a,b:match:'123'}`\n\n## 串联使用过滤器\n\n使用单一的过滤器可能无法满足你的所有需求，幸运的是 amis 支持串联使用过滤器，而前一个过滤器的值会作为下一个过滤器的入参，进行下一步处理。语法如下:\n\n\n\n##### 先拆分字符串，再获取第 n 个值\n\n\n\n上例子中`${value|split|first}`，会经历下面几个步骤：\n\n1. 会先执行`split`过滤器，将字符串`a,b,c`，拆分成数组`[\"a\", \"b\", \"c\"]`；\n2. 然后将该数据传给下一个过滤器`first`，执行该过滤器，获取数组第一个元素，为`\"a\"`\n3. 输出`\"a\"`\n\n## 自定义过滤器\n\namis npm 包里面暴露了 `registerFilter` 方法，通过它可以添加自己的过滤器逻辑。\n\n> 注意方法名不要出现 - 号，比如 a-b，要改成 a_b\n\n如：\n\n\n\n注册后可以通过 `${xxx|count}` 来返回字符串的长度。\n\n如果你的过滤器还要支持参数，可以参考这个例子。\n\n\n\n用法为 `${xxxx|my_replace:aaaa:bbbb}`\n\n### 在 JS SDK 中自定义过滤器\n\n\n","path":"/zh-CN/docs/concepts/data-mapping"},{"title":"数据域与数据链","body":"\n## 基本的数据展示\n\n我们再看之前的简单示例：\n\n\n\n目前我们只是在 `Page` 组件中渲染一串固定的文本，如何实现 **通过接口拉取想要的数据，并展示到 `Page` 组件的内容区** 呢？\n\n## 添加初始化接口\n\n\n\n这个 api 接口返回的数据结构如下：\n\n\n\n渲染后页面效果：\n\n\n\n## 发生了什么?\n\n我们可以看到，输出结果不变，但是我们这次渲染的是接口返回的数据：\n\n1. 首先我们给 `Page` 组件配置了`initApi`属性，该属性会在组件初始化时，请求所该属性所配置的接口\n2. 接口请求成功后，`Page` 会把接口返回的`data`内数据存到当前的数据域中\n3. `Page` 在渲染 `body` 所配置的文本时，会解析文本内容，当解析到模板变量`${text}`时，amis 会把尝试在当前组件的数据域中获取`text`变量值，并替换掉`${text}`，最后渲染解析后的文本。\n\n> 下一节我们会介绍，`body`属性自身支持模板语法，amis 中支持模板语法的组件还有很多\n\n## 数据域\n\n前面我们提到了**数据域**这个概念，它是 amis 中最重要的概念之一。\n\n还是通过最简单的示例进行讲解：\n\n\n\n上面的配置要做的很简单：使用 `Page` 组件，在内容区内渲染一段模板文字，其中`${text}`是**模板变量**，它会去到当前组件的数据域中，获取`text`变量值。\n\n毫无疑问，`${text}`将会解析为空白文本，最终渲染的文本是 `Hello`\n\n\n\n因为当前 `Page` 组件的数据域中是没有任何数据的，相比之前的示例，区别在于前面我们为 `Page` 组件配置了初始化接口，它会将接口返回的数据存入数据域中以供组件使用。\n\n再观察下面这段配置：\n\n\n\n再次查看渲染结果，顺利输出了 `Hello World!`\n\n相信你可能已经猜到，**组件的`data`属性值是数据域的一种形式**，实际上当我们没有显式的配置数据域时，可以假想成这样：\n\n\n\n> 而前面我们知道 amis 的特性之一是基于组件树，因此自然数据域也会形成类似于树型结构，如何来处理这些数据域之间的联系呢，这就是我们马上要介绍到的 ****\n\n## 数据链\n\n相信通过上文，你已经基本掌握了 amis 中数据域的概念，接下来我们会介绍另一个重要概念：**数据链**。\n\n**数据链**的特性是，当前组件在遇到获取变量的场景（例如模板渲染、展示表单数据、渲染列表等等）时：\n\n1. 首先会先尝试在当前组件的数据域中寻找变量，当成功找到变量时，通过数据映射完成渲染，停止寻找过程；\n2. 当在当前数据域中没有找到变量时，则向上寻找，在父组件的数据域中，重复步骤`1`和`2`；\n3. 一直寻找，直到顶级节点，也就是`page`节点，寻找过程结束。\n4. 但是如果 url 中有参数，还会继续向上查找这层，所以很多时候配置中可以直接 `${id}` 取地址栏参数。\n\n> 为了方便讲解，我们这一章的例子统一使用的设置组件`data`属性的方式来初始化数据域，请记住，如果组件支持，你永远可以通过接口来进行数据域的初始化\n\n继续来看这个例子：\n\n\n\n上面的配置项形成了如下的组件树和数据链：\n\n组件树：\n\n\n\n数据链：\n\n\n\n> `__sub` 字段只是为了方便理解。\n\n首先，`page`组件下的`tpl`组件，在渲染`my name is ${name}`时，首先会在`page`的数据域中，尝试寻找`name`变量，在当前数据域中，`name`变量为`zhangsan`，因此寻找变量结束，通过数据映射渲染，输出：`my name is zhangsan`，渲染结束；\n\n然后，`service`组件开始渲染，`service`组件内子组件`tpl`，它配置的模板字符串是：`my name is ${name}, I'm ${age} years old`，它会在`service`的数据域中，尝试寻找`name`和`age`变量。\n\n由代码可以看出，`service`数据域中`name`变量为`lisi`，因此停止该变量的寻找，接下来寻找`age`变量。\n\n很明显在`service`数据域中寻找`age`变量会失败，因此向上查找，尝试在`page`数据域中寻找`age`变量，找到为`20`，寻找变量结束，通过数据映射渲染，输出：`my name is lisi, I'm 20 years old`，渲染结束。\n\n> **注意：** 当前例子中，对数据域中数据的获取使用的是 **\\${xxx}** 模板语法，但是在不同的组件配置项中，获取数据的语法会有差异，我们会在后续的中一一介绍。\n\n### 具备数据域的组件\n\n- App\n- Page\n- Cards\n- Chart\n- CRUD\n- CRUD2\n- Dialog\n- Drawer\n- List\n- Form\n- PaginationWrapper\n- Service\n- Wizard\n- Combo\n- InputArray\n- Table\n- Table2\n\n有个特殊情况是 CRUD 中 filter，实际上是个 form，所以 CRUD 中有两层数据域，第一层是 CRUD 本身，同时查询条件表单中也有一层数据域。\n\n### 常见误解\n\n需要注意，只有少数几个容器组件会创建新的数据域，具体查看列表。\n\n常见的错误写法是给容器组件加 data 属性，比如：\n\n\n\n这样是不会生效的，正确的做法是使用 Service 包裹一层，如下所示\n\n\n\n## 初始化数据域\n\n通过上面的介绍你可能发现，初始化数据域有两种方式：\n\n### 1. 配置组件初始化接口\n\n想要将自己的服务中的数据保存到某个组件的数据域中，最好的方式就是为当前组件配置初始化接口：\n\n\n\n接口必须按照下面的格式返回：\n\n\n\n**注意：**\n\n1. **并不是所有组件都支持配置初始化接口来实现数据域初始化操作**，对于那些不支持配置初始化接口的组件来说，一般会使用 来辅助实现数据域初始化；\n2. **`status`**、**`msg`** 和 **`data`** 字段为接口返回的必要字段；\n3. `data`必须返回一个具有`key-value`结构的对象\n\n\n\n> `api` 除了配置字符串格式以外，还可以配置复杂对象结构，更多详情查看\n\n### 2. 显式配置 data 属性值\n\n另一种初始化当前数据域的方式是显式的设置组件的`data`属性值：\n\n\n\n### 同时配置\n\n在同时配置 **初始化接口** 和 **`data`属性** 时，数据域将会合并`data`属性值和初始化接口返回的数据\n\n## 更新数据域\n\n部分组件的某些交互或行为会对当前组件的数据域进行更新：\n\n\n\n`/api/saveForm`接口会保存当前表单提交的数据，并返回后端服务生成的`id`，并返回到前端，格式如下;\n\n\n\n这时 amis 将会把`data`数据与当前`form`组件的数据域进行**merge**，`form`组件中的`static-tpl`组件会根据更新后的数据域，显示`id`为`1`。\n\n> 具有类似特征的组件还有`Formula`等\n\n## 更新数据链\n\n通常顶层数据域数据更新，孩子中具备数据域的组件都会更新，如果不更新会拿不到最新的值。从功能来看这个更新代价其实是很大的，有性能损耗，比如如果我在顶层更新了个变量 `name`，所有的孩子都会重新刷新一遍。\n目前 amis 中，具备数据域的组件，默认会检测两层节点的数据是否发生变化（上层数据域和上上层数据域），来决定当前层的数据要不要更新。存在两个问题：\n\n1. 当前组件也许并不关心上层数据是否变化，没必要进行这些刷新操作\n2. 当前组件关系上上层的数据变化，但是在此拿不到最新的。（比如：放在 service 中的 crud，crud 中 filter 用了 service 的接口返回数据，但是拿不到最新的）\n\namis 从 3.2.0 版本开始针对新增了 `trackExpression` 属性，用来主动配置当前组件需要关心的上层数据。\n\n针对以上问题，则可以通过这样配置来解决\n\n1. `trackExpression` 配置成 `\"none\"` 也就是说不追踪任何数据。\n2. `trackExpression` 配置成 `\"${xxxVariable}\"` 这样 xxxVariable 变化了更新当前组件的数据链。\n\n关于 `trackExpression` 的语法，请查看表达式篇章，可以监听多个变量比如: `\"${xxx1},${xxx2}\"`，还可以写表达式如 `\"${ xxx ? xxx : yyy}\"`。\n\namis 内部是通过运算这个表达式的结果来判断。所以表达式中千万不要用随机函数，或者用当前时间等，否则每次都会更新数据链。另外如果变量是数组，或者对象，会转成统一的字符串 `[object Array]` 或者 `[object Object]` 这个其实会影响检测的，所以建议转成 json 字符串如。 `${xxxObject | json}`。还有就是既然是监控上层数据，表达式中不要写当前层数据变量，是取不到的。\n\n\n\n## URL 参数\n\nurl 中的参数会进入顶层数据域，比如下面的例子，可以点击看效果。\n\n\n\n## 隐藏数据\n\n数据中还有以下字段不会被枚举到，但是可以读取：\n\n- `__prev` 修改前的值\n- `__changeReason` 修改原因\n- `__changeReason.type` 修改原因类型\n - `input` 用户输入\n - `api` api 接口返回触发\n - `formula` 公式计算触发\n - `hide` 隐藏属性变化触发\n - `init` 表单项初始化触发\n - `action` 事件动作触发\n- `__super` 数据链的上一级\n\n> `__changeReason` 字段在 amis 6.9.0 版本开始支持\n\n\n","path":"/zh-CN/docs/concepts/datascope-and-datachain"},{"title":"事件动作","body":"\n> 1.7.0 及以上版本\n\n上一节我们介绍了如何实现联动，是比较基础和局限的，而事件动作是更简单、更灵活、更高级的用法，可以解决复杂的 UI 交互场景，支持渲染器事件监听和响应设计，无需关心组件层级关系。例如：\n\n- http 请求：发送 http 请求\n- 弹窗提示：执行弹窗、抽屉打开和 toast 提示\n- 页面跳转：页面链接跳转\n- 浏览器相关：回退、前进、后退、刷新\n- 刷新组件：联动刷新表单数据，即数据重新加载\n- 组件状态：控制指定组件的显示/隐藏、启用/禁用、展示态/编辑态\n- 组件特性动作：执行指定组件的专有动作，例如执行表单的提交动作\n- 组件数据：更新指定组件的数据域\n- 广播：多个组件监听同一个事件做出不同响应\n- JS 脚本：通过编写 JS 代码片段实现所需逻辑，同时支持 JS 代码内执行动作\n- 逻辑编排：条件、循环、排他、并行\n\n## 基本使用\n\n### onEvent\n\n通过`onEvent`属性实现渲染器事件与响应动作的绑定。`onEvent`内配置事件和动作映射关系，`actions`是事件对应的响应动作的集合。\n\n\n\n\n\n### 上下文\n\n执行动作时，可以通过`${event.data}`获取事件对象的数据、通过`${__rendererData}`获取组件当前数据域，例如：\n\n\n\n### 运行日志\n\n可以在浏览器控制台查看运行日志，类似如下\n\n\n\n代表运行了 ajax 动作，第二行是传递的参数和数据，第三行是执行完动作之后的 `event` 值，可以用做后续动作的参数。\n\n## 分类\n\n事件包含`渲染器事件`和`广播事件`。\n\n- 渲染器事件，由具体的渲染器组件提供，每个渲染器组件暴露的事件可以查看具体的；\n- 广播事件，即自定义事件，可以自定义派发的事件名称`eventName`，其他渲染器可以监听该自定义事件并配置响应动作。\n\n动作包含`通用动作`、`组件动作`、`广播动作`、`自定义动作`，可以通过配置`actionType`来指定具体执行什么动作。\n\n## 发送 http 请求\n\n通过配置`actionType: 'ajax'`实现 http 请求发送，该动作需实现 `env.fetcher` 请求器。\n\n\n\n### 静默模式\n\n当配置`silent: true`时，请求完成后不会弹出提示信息。\n\n\n\n### 可读取的数据\n\n请求配置中可读取的数据包含事件源所在数据域和动作执行产生的数据。可以通过`api.data`配置数据映射来读取所需数据。例如：\n\n- 取所在数据域的数据：通过`\"name\": \"${name}\", \"email\": \"${email}\"`来映射表单校验数据（只适用于事件源在表单内的情况）\n- 取动作产生的数据：通过`\"name\": \"${event.data.validateResult.payload.name}\", \"email\": \"${event.data.validateResult.payload.email}\"`来映射表单校验数据，这种是获取前面表单校验动作的校验结果数据。通过`\"&\": \"${event.data.validateResult.payload}\"`展开表单校验数据，结果相同，这是一个数据映射小技巧\n\n\n\n**动作属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ----------------------------------- | ------ | ------------------------- |\n| api | | - | 接口配置 |\n| options | `object` | - | 其他配置 |\n| messages | `{success: string, failed: string}` | - | 请求成功/失败后的提示信息 |\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | ----------------------------------------------------------------------------- |\n| outputVar | `string` | - | 请求响应结果缓存在`${event.data.responseResult}`或`${event.data.{outputVar}}` |\n\n请求响应结果的结构如下：\n\n\n\n## 弹窗\n\n### 打开弹窗（模态）\n\n通过配置`actionType: 'dialog'`实现 Dialog 弹窗。\n\n\n\n**动作属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------- | ------ | ---------------------------------------------------------------------------------------------------- |\n| dialog | `string`/`DialogObject` | - | 指定弹框内容，格式可参考 |\n| waitForAction | `boolean` | - | 是否等待弹窗响应，开启后将等待弹窗操作 |\n| outputVar | `string` | - | 输出数据变量名, 输出数据格式为 `{confirmed: boolean; value: any[]}`，当 `waitForAction` 开启时才有用 |\n\n### 关闭弹窗（模态）\n\n通过配置`actionType: 'closeDialog'`实现关闭当前弹窗；附加配置`componentId`可以实现关闭指定弹窗。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------- |\n| componentId | `string` | - | 指定弹框组件 id |\n\n### 打开抽屉（模态）\n\n通过配置`actionType: 'drawer'`实现 Drawer 抽屉打开。\n\n\n\n**动作属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------------- | ----------------------- | ------ | ---------------------------------------------------------------------------------------------------- |\n| drawer | `string`/`DrawerObject` | - | 指定弹框内容，格式可参考 |\n| waitForAction | `boolean` | - | 是否等待弹窗响应，开启后将等待弹窗操作 |\n| outputVar | `string` | - | 输出数据变量名, 输出数据格式为 `{confirmed: boolean; value: any[]}`，当 `waitForAction` 开启时才有用 |\n\n### 关闭抽屉（模态）\n\n通过配置`actionType: 'closeDrawer'`实现关闭当前抽屉；附加配置`componentId`可以实现关闭指定抽屉。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------- |\n| componentId | `string` | - | 指定抽屉组件 id |\n\n### 打开确认弹窗\n\n通过配置`actionType: 'confirmDialog'`打开确认对话框。确认对话框弹出后，如果选择取消操作，将不会执行该动作后面的动作。如下面的例子，点击确认之后将弹出`toast`提示，点击取消则不会提示。\n\n**普通文本内容**\n\n动作需要实现 env.confirm: (msg: string, title?: string) => boolean | Promise<boolean>。\n\n\n\n**自定义弹窗内容**\n\n可以通过`body`像配置弹窗一样配置确认弹窗的内容。\n\n\n\n**动作属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | ----------------------------- | ------ | ------------------------------------------------------------------- |\n| dialog | {msg:`string`}/`DialogObject` | - | 指定弹框内容。自定义弹窗内容可参考 |\n\n### 提示对话框\n\n通过配置`actionType: 'alert'`打开提示对话框，该对话框只有确认按钮。该动作需要实现 env.alert: (msg: string) => void。\n\n\n\n**动作属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------------------------------- | ---------------------------- | ---------- |\n| dialog | {title:`string`<br>msg:`string`} | {title: '系统提示', msg: ''} | 对话框配置 |\n\n### toast 提示\n\n通过配置`actionType: 'toast'`实现弹出 toast 提示，该动作需实现 env.notify(type: ToastLevel, msg: string, conf?: ToastConf) => void 方法。\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | --------- | --------------------------------------- | ------------------------------------------------------------------------------------------------ |\n| msgType | `string` | `\"info\"` | 消息类型 `info\\|success\\|error\\|warning` |\n| msg | `string` | - | 消息内容 |\n| position | `string` | `top-center（移动端为center）` | 提示显示位置 `top-right\\|top-center\\|top-left\\|bottom-center\\|bottom-left\\|bottom-right\\|center` |\n| closeButton | `boolean` | `false` | 是否展示关闭按钮 |\n| showIcon | `boolean` | `true` | 是否展示图标 |\n| timeout | `number` | `5000（error类型为6000，移动端为3000）` | 持续时间 |\n\n## 跳转链接\n\n通过配置`actionType: 'url'`或`actionType: 'link'`实现链接跳转，该动作需实现 env.jumpTo(to: string, action?: any) => void 方法。\n\n### 打开页面\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | --------- | ------- | ---------------------------------------------------------- |\n| url | `string` | - | 按钮点击后，会打开指定页面。可用 `${xxx}` 取值 |\n| blank | `boolean` | `false` | 如果为 `true` 将在新 tab 页面打开 |\n| params | `object` | - | 页面参数`{key:value}`，支持数据映射，`> 1.10.0 及以上版本` |\n\n### 打开单页\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | -------- | ------ | ----------------------------------------------------------------------------------------------------------------------------- |\n| link | `string` | `link` | 用来指定跳转地址，跟 url 不同的是，这是单页跳转方式，不会渲染浏览器，请指定 amis 平台内的页面。可用 `${xxx}` 取值 |\n| params | `object` | - | 页面参数`{key:value}`，支持数据映射，`> 1.9.0 及以上版本` |\n| targetType | `string` | `page` | 默认为内容区打开`page`，可设置为新窗口打开`blank`，当前页签打开`self`，`blank\\|self` 方式会重新渲染浏览器`> 6.1.0 及以上版本` |\n\n## 浏览器\n\n### 浏览器回退\n\n> 1.8.0 及以上版本\n\n通过配置`actionType: 'goBack'`实现页面回退。\n\n\n\n### 前进/后退到指定页面\n\n> 1.8.0 及以上版本\n\n通过配置`actionType: 'goPage'`实现浏览器页面的前进/后退。只有当历史记录中存在目标页面时才会生效。\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | ---- |\n| delta | `string` | `0` | 位置 |\n\n### 浏览器刷新\n\n> 1.8.0 及以上版本\n\n通过配置`actionType: 'refresh'`实现浏览器刷新。\n\n\n\n## 复制\n\n通过配置`actionType: 'copy'`和复制属性实现文本的复制操作，该动作需实现 env.copy(contents: string, options?: any) => void 方法。\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ------------------------------------ | ------ | ---------------------------------- |\n| copyFormat | `string` | - | 复制格式 |\n| content | | - | 指定复制的内容。可用 `${xxx}` 取值 |\n\n## 打印\n\n> 6.2.0 及以后版本\n\n打印页面中的某个组件，对应的组件需要配置 `id`，如果要打印多个，可以使用 `\"ids\": [\"x\", \"y\"]` 来打印多个组件，只支持主要是容器类组件 `crud`、`crud2`、`form`、`table`、`wrapper`、`container`、`flex`、`grid`、`grid2d`、`tableview`\n\n> breaking：在 6.2.0 版本中配置是 testid，但这个配置会导致性能问题，所以新版使用 id 作为标识。\n\n\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------- | ---------- | ------ | ----------------- |\n| testid | `string` | | 组件的 testid |\n| testids | `string[]` | - | 多个组件的 testid |\n\n## 发送邮件\n\n通过配置`actionType: 'email'`和邮件属性实现发送邮件操作。\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------- | -------- | ------ | ------------------------------ |\n| to | `string` | - | 收件人邮箱，可用 ${xxx} 取值 |\n| cc | `string` | - | 抄送邮箱，可用 ${xxx} 取值 |\n| bcc | `string` | - | 匿名抄送邮箱，可用 ${xxx} 取值 |\n| subject | `string` | - | 邮件主题，可用 ${xxx} 取值 |\n| body | `string` | - | 邮件正文，可用 ${xxx} 取值 |\n\n## 更新事件上下文数据\n\n> 6.3.0 及以上版本\n\n修改 `event.data` 对象中的数据，修改后后续的动作中可以引用，及时生效，不像更新组件上下文数据是个异步操作。可以用来临时存储数据。\n\n\n\n## 等待\n\n> 6.3.0 及以上版本\n\n通过配置`actionType: 'wait'`，等待指定时间（`args.time` 毫秒数）后执行后续动作。\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | -------------------- |\n| time | `number` | - | 等待时间，单位是毫秒 |\n\n## 自定义 JS\n\n通过配置`actionType: 'custom'`实现自定义 JS。JS 中可以访问以下对象和方法：\n\n- context，渲染器上下文\n- doAction() 动作执行方法，用于调用任何 actionType 指定的动作\n- event，事件对象，可以调用 setData()、stopPropagation()、preventDefault()分别实现事件上下文设置、动作干预、事件干预，可以通过 event.data 获取事件上下文\n\n自定义函数签名： `script:(context,doAction,event)=>{}`\n\n\n\n**动作属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | ------------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |\n| script | `string`/`function` | - | 自定义 JS 脚本代码，代码内可以通过调用`doAction`执行任何 ，通过事件对象`event`可以实现事件动作干预 |\n\n### 支持异步\n\n> 2.0.3 及以上版本\n\n- 方式一：通过返回 Promise 实例的方式\n\n\n\n- 方式二：通过返回 Thunk 的方式\n\n\n\n### 存储数据\n\n有时在执行自定义 JS 的时候，希望该过程中产生的数据可以分享给后面的动作使用，此时可以通过`event.setData()`来实现事件上下文的设置，这样后面动作都可以通过事件上下文来获取共享的数据。\n\n> 注意：直接调用`event.setData()`将修改事件的原有上下文，如果不希望覆盖可以通过`event.setData({...event.data, ...{xxx: xxx}})`来进行数据的合并。\n\n## 触发指定组件动作\n\n通过配置`componentId`或`componentName`来触发指定组件的动作（不配置将调用当前组件自己的动作），组件动作配置通过`args`传入`(> 1.9.0 及以上版本)`，动作参数请查看对应的组件的。\n\n### 更新组件数据\n\n> 1.8.0 及以上版本\n\n更新数据即更新指定组件数据域中的数据（data），通过配置`actionType: 'setValue'`实现组件`数据域变量更新`，通过它可以实现`组件间联动更新`、`数据回填`，更多示例请查看。\n\n**注意事项**\n\n- 这个动作是异步的，所以不能直接通过`${xxx}`来获取更新后的数据，如果需要请更新事件上下文数据，然后通过`${event.data.xxx}`来获取。\n- 数据类型支持范围：`基础类型`、`对象类型`、`数组类型`，数据类型取决于目标组件所需数据值类型\n- 目标组件支持范围：`form`、`dialog`、`drawer`、`wizard`、`service`、`page`、`app`、`chart`，以及数据`输入类`组件\n- < 2.3.2 及以下版本，虽然更新数据可以实现对组件数据域的更新，但如果更新数据动作的数据值来自前面的异步动作（例如 发送 http 请求、自定义 JS（异步）），则后面的动作只能通过事件变量`${event.data.xxx}`来获取异步动作产生的数据，无法通过当前数据域`${xxx}`直接获取更新后的数据。\n- 它的值通常都是对象形式，比如 form 传递的值应该是类似 `{\"user\": \"amis\"}`，这时就会更新表单里的 `user` 字段值为 `amis`\n\n\n\n### 刷新组件请求\n\n通过配置`actionType: 'reload'`刷新指定组件的数据请求，支持数据容器类组件（`form`、`wizard`、`service`、`page`、`app`、`chart`、`crud`）以及支持动态数据的`输入类`组件，详见组件的`动作表`。更多示例请查看。\n\n#### 刷新输入类组件\n\n针对支持远程数据的输入类组件，支持刷新目标组件的数据请求。\n\n\n\n#### 刷新 CRUD\n\n刷新 CRUD 时，如果配置了`data`，将发送`data`给目标 CRUD 组件，并将该数据合并到目标 CRUD 组件的数据域中，然后触发目标组件的刷新操作，即 CRUD 数据拉取接口将自动追加`data`参数到请求中，更多示例可以查看。\n\n\n\n#### 刷新其他数据容器类组件\n\n刷新容器类组件（`form`、`wizard`、`service`、`page`、`app`、`chart`）时，如果配置了`data`，将发送`data`给目标组件，并将该数据合并到目标组件的数据域中。\n\n\n\n#### 获得刷新后的结果\n\n> 6.9.0 及以上版本\n\n通过配置 outputVar 可以拿到刷新后的结果，例如以下示例，点击按钮后，会串行按顺序刷新 service 1 和 service2， 同时 service2 可以拿到 service1 的返回值。\n\n\n\n**动作属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | --------- | ------ | ------------------------------------------------------------------ |\n| resetPage | `boolean` | true | 当目标组件为 `crud` 时，可以控制是否重置页码，`> 2.3.2 及以上版本` |\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | --------------------- |\n| componentId | `string` | - | 指定刷新的目标组件 id |\n\n### 修改组件状态\n\n> 1.8.0 及以上版本\n\n通过配置`actionType: 'show'`或`'hidden'`或`'enabled'`或`'disabled'`或`'static'`或`'nonstatic'`实现对指定组件的显示、隐藏、启用、禁用，仅支持实现了对应状态控制功能的数据`输入类`组件。\n\n#### 显示与隐藏\n\n\n\n#### 启用与禁用\n\n\n\n#### 静态展示与编辑态\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ----------- | -------- | ------ | ------------------------------------ |\n| componentId | `string` | - | 指定启用/禁用/显示/隐藏的目标组件 id |\n\n### 执行目标组件的动作\n\n例如，点击按钮后，切换选项卡。\n\n\n\n## 触发广播\n\n通过配置`actionType: 'broadcast'`实现触发一个广播。\n\n\n\n**动作属性（args）**\n\n> `< 2.3.2 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------- | -------- | ------ | ------------------------------------------------ |\n| eventName | `string` | - | 广播动作对应的自定义事件名称，用于广播事件的监听 |\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ------ | -------- | ------ | -------------------------------------------------------- |\n| weight | `number` | 0 | 可以通过配置动作执行优先级来控制所有监听者的动作执行顺序 |\n\n## 注册自定义动作\n\n除了以上内置动作，你还可以注册自己的动作。通过对`RendererAction`的`run`方法的实现可以定制自己的动作逻辑，最后通过`registerAction`注册到 amis 事件动作中。\n\n\n\n# 编排动作\n\n通过配置不同的逻辑动作实现动作编排，支持嵌套。\n\n## 条件\n\n通过配置`expression: 表达式或ConditionBuilder组合条件`来实现条件逻辑。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| ---------- | ------------------------------------------- | ------ | ---------------------------- |\n| expression | `boolean`\\| | - | 执行条件，不设置表示默认执行 |\n\n## 循环\n\n通过配置`actionType: 'loop'`实现循环逻辑。\n\n### 单层循环\n\n\n\n### 嵌套循环\n\n\n\n**动作属性（args）**\n\n> `< 1.8.0 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | -------- | ------ | ------------ |\n| loopName | `string` | - | 循环变量名称 |\n\n**其他属性**\n\n> `< 2.3.2 及以下版本`，以下属性与 args 同级。\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ---------------------------------------------------- | ------ | ------------------------------------- |\n| children | Array<> | - | 子动作，可以通过`break动作`来跳出循环 |\n\n### Break 动作\n\n通过配置`actionType: 'loop'`和`actionType: 'break'`实现循环跳出。\n\n\n\n### Continue 动作\n\n通过配置`actionType: 'loop'`和`actionType: 'continue'`实现循环跳过。\n\n\n\n## 排他（switch）\n\n通过配置`actionType: 'switch'`实现排他逻辑。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ---------------------------------------------------- | ------ | ------------------------------------------------------ |\n| children | Array<> | - | 子动作，每个子动作可以通过配置`expression`来匹配的条件 |\n\n## 并行\n\n通过配置`actionType: 'parallel'`实现并行执逻辑。\n\n\n\n**其他属性**\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| -------- | ---------------------------------------------------- | ------ | ------ |\n| children | Array<> | - | 子动作 |\n\n# 动作间数据传递\n\n从事件触发开始，整个数据流包含事件本身产生的事件数据和动作产生的动作数据，事件源头产生的数据在 AMIS 事件动作机制底层已经自动加入渲染器数据域，可以通过`xxx`直接获取（`< 2.3.2 及以下版本 为 event.data.xxx`），而部分动作产生的数据如何流动需要交互设计者进行介入，对于数据流动可以通过数据映射，将上一个动作产生的数据作为动作参数写入下一个动作。\n\n#### 传递数据\n\n通过 `data` 指定输入的参数数据（`< 2.3.2 及以下版本`通过`args`传递数据），它是一个键值对。\n\n\n\n#### 引用 http 请求返回的数据\n\nhttp 请求动作执行结束后，后面的动作可以通过 `${responseResult}`或`${{outputVar}}`来获取请求响应结果，响应结果的结构定义参考。\n\n> `< 2.3.2 及以下版本 需要通过 ${event.data.{xxx}}`来获取以上信息，例如：${event.data.responseResult}\n\n\n\n#### 获取组件相关数据\n\n可以通过表达式函数`GETRENDERERDATA(id, path)`和`GETRENDERERPROP(id, path)`分别获取指定组件的数据和属性。\n\n\n\n该函数参数说明如下：\n\n| 参数名 | 说明 |\n| ------ | ----------------------------- |\n| id | 组件 ID，即组件的 id 属性的值 |\n| path | 数据路径，即数据变量的路径 |\n\n# 干预动作执行\n\n事件动作干预是指执行完当前动作后，干预所监听事件默认处理逻辑和后续其他动作的执行。通过`preventDefault`、`stopPropagation`分别阻止监听事件默认行为和停止下一个动作执行。\n\n## 阻止事件默认行为\n\n有些组件内置了一些逻辑来帮助用户降低配置成本，但可能这些逻辑并不符合设计者的业务需求，这时可以通过`onEvent`来监听对应的事件，并通过`preventDefault`来阻止那些默认处理逻辑来达到想要的最终效果。更多示例请查看。\n\n\n\n> 6.3.0 版本开始支持\n\n或者直接通过动作来阻止\n\n\n\n\n\n## 停止后续动作执行\n\n通过`onEvent`可以对监听的事件配置一组动作，这些动作是顺序执行的，有时间设计者希望执行某个/些动作后就停止继续执行后面的动作，这时候可以通过`stopPropagation`来停止执行后面配置的所有动作。\n\n\n\n> 6.3.0 版本开始支持\n\n或者直接通过动作来跳过后续逻辑\n\n\n\n\n\n## 忽略动作报错继续执行\n\n> `3.3.1` 及以上版本\n\n默认情况下，尝试执行一个不存在的目标组件动作、JS 脚本执行错误等程序错误都会导致动作执行终止，可以通过`ignoreError: true`来忽略动作报错继续执行后面的动作。\n\n\n\n# 自定义组件接入事件动作\n\n需求场景主要是想要自定义组件的内部事件暴露出去，能够通过对事件的监听来执行所需动作，并希望自定义组件自身的动作能够被其他组件调用。接入方法是通过`props.dispatchEvent`派发自身的各种事件，使其具备更灵活的交互设计能力；通过实现`doAction`方法实现其他组件对其专属动作的调用，需要注意的是，此处依赖内部的 `Scoped Context`来实现自身的注册，可以参考 。\n\n# 属性表\n\n| 属性名 | 类型 | 默认值 | 说明 |\n| --------------- | -------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------- |\n| actionType | `string` | - | 动作名称 |\n| args | `object` | - | 动作属性`{key:value}`，支持数据映射 |\n| data | `object` | - | 追加数据`{key:value}`，支持数据映射，如果是触发其他组件的动作，则该数据会传递给目标组件，`> 2.3.2 及以上版本` |\n| dataMergeMode | `string` | 'merge' | 当配置了 data 的时候，可以控制数据追加方式，支持合并(`merge`)和覆盖(`override`)两种模式，`> 2.3.2 及以上版本` |\n| preventDefault | `boolean`\\| | false | 阻止事件默认行为，`> 1.10.0 及以上版本支持表达式，> 2.9.0 及以上版本支持ConditionBuilder` |\n| stopPropagation | `boolean`\\| | false | 停止后续动作执行，`> 1.10.0 及以上版本支持表达式，> 2.9.0 及以上版本支持ConditionBuilder` |\n| expression | `boolean`\\| | - | 执行条件，不设置表示默认执行，`> 1.10.0 及以上版本支持表达式，> 2.9.0 及以上版本支持ConditionBuilder` |\n| outputVar | `string` | - | 输出数据变量名 |\n| ignoreError | `boolean` | false | 当动作执行出错后，是否忽略错误继续执行。`3.3.1 及以上版本支持` |\n","path":"/zh-CN/docs/concepts/event-action"},{"title":"表达式","body":"\n## 使用场景\n\namis 中有很多场景会用到表达式。\n\n- 模板中变量取值。 如：`my name is ${xxx}`\n- api 地址参数取值 如 `http://mydomain.com/api/xxx?id=${id}`\n- api 发送&接收数据映射\n\n \n\n- 组件显示与隐藏条件\n\n \n\n- 表单默认值\n\n \n\n- 等等\n\namis 中表达式有两种语法：\n\n- 一种是纯 js 表达式，如 `data.xxx === 1`。\n- 另一种是用 `${` 和 `}` 包裹的表达式。如：`${ xxx === 1}`。\n\n\n\n第一种是早期的版本，偷懒直接用的 ，灵活性虽高，但是安全性欠佳。建议使用新版本规则，新规则跟 tpl 模板取值规则完全一样，不用来回切换语法。\n\n## 表达式语法\n\n表达式主要由三部分组成：开始字符、表达式内容和结束字符。其中开始字符固定是 `${` 结束字符固定是 `}`，中间内容才是表达式正文。这里说的语法主要还是表达式正文的语法。\n\n规则主要包含：\n\n- 变量名： `xxx变量`、`xxx变量.xxx属性`、`xxx变量[xxx属性]`\n- 布尔值： `true` 或者 `false`\n- null：`null`\n- undefined: `undefined`\n- 数字： `123` 或者 `123.23`\n- 字符串： `\"string\"` 或者 `'string'`\n- 字符模板\n\n ```\n `my name is ${name}`\n ```\n\n- 数组： `[1, 2, 3]`\n- 对象： `{a: 1, b: 2}`\n- 组合使用如： `{a: 1: b: [1, 2, 3], [key]: yyy变量}`\n- 三元表达式： `xx变量 == 1 ? 2 : 3`\n- 二元表达式： `xx变量 && yy 变量` 、 `xx变量 || yy 变量`、 `xx变量 == 123`\n\n - `+` 相加\n - `-` 相减\n - `*` 乘\n - `/` 除\n - `**` pow 运算\n - `||` 或者\n - `&&` 并且\n - `|` 或运算\n - `^` 异或运算\n - `&` 与运算\n - `==` 等于比较\n - `!=` 不等于\n - `===` 恒等于\n - `!==` 不恒等于\n - `<` 小于\n - `<=` 小于或等于\n - `>` 大于\n - `>=` 大于或等于\n - `<<` 左移\n - `>>` 右移\n - `>>>` 带符号位的右移运算符\n\n- 一元表达式： `!xx变量`、`~xx变量`\n\n* `+` 一元加法\n* `-` 一元减法\n* `~` 否运算符，加 1 取反\n* `!` 取反\n\n- 函数调用：`SUM(1, 2, 3)`\n- 箭头函数：`() => abc` 注意这个箭头函数只支持单表达式，不支持多条语句。主要配置其他函数使用如：`ARRAY_MAP(arr, item => item.abc)`\n- 括号包裹，修改运算优先级：`(10 - 2) * 3`\n\n示例：\n\n\n\n_特殊字符变量名_\n\n> 1.6.1 及以上版本\n\n默认变量名不支持特殊字符比如 `${ xxx.yyy }` 意思取 xxx 变量的 yyy 属性，如果变量名就是 `xxx.yyy` 怎么获取？这个时候需要用到转义语法，如：`${ xxx\\.yyy }`\n\n### 公式\n\n除了支持简单表达式外，还集成了很多公式(函数)如 `${ AVG(1, 2, 3, 4)}`：\n\n\n\n## 函数调用示例\n\n函数支持嵌套，参数支持常量及变量\n\n\n\n下面是目前所支持函数的使用手册\n\n!!!include(amis-formula/lib/doc.md)!!!\n","path":"/zh-CN/docs/concepts/expression"},{"title":"联动","body":"\n上一节我们介绍了表达式的概念，而表达式应用最多的场景，是实现页面的联动效果。\n\n## 基本联动\n\n元素的联动是页面开发中很常见的功能之一，类似于：\n\n- 某个条件下显示或隐藏某个组件\n- 某个条件下请求接口\n- 某个条件下轮询接口停止轮询\n- 等等...\n\n> 联动配置项一般都是 \n\n### 组件配置联动\n\n控制组件的显隐，表单项的禁用状态等，看下面这个例子：\n\n\n\n上面实例主要为一个表单，表单内有三个组件：一个`radio`, 两个`text`，通过配置联动配置项，实现下面联动效果：\n\n1. 只要当`radio`选中`类型1`时，才会显示`text1`；\n2. 当`radio`选中`类型2`时，`text2`将会变为`禁用状态`\n\n> **注意：**\n>\n> 在表单项联动中，为了方便数据的读取，赋值后或者修改过的表单项，通过隐藏后，并不会在当前数据域中删除掉该字段值，因此默认提交的时候可能仍然会带上已隐藏表单项的值。\n>\n> 如果想要在提交时去掉某个隐藏的字段，可以通过添加 属性实现。\n\n### 接口联动\n\n#### 基本使用\n\n接口联动是另外一种很常见的场景，查看下面这个例子：\n\n\n\n上面例子我们实现了这个逻辑：每次选择`选项1`的时候，会触发`选项2`的`source`配置的接口重新请求，并返回不同的下拉选项。\n\n是如何做到的？\n\n实际上，所有**初始化接口链接上使用数据映射获取参数的形式**时，例如下面的`query=${query}`，在当前数据域中，**所引用的变量值（即 query）发生变化时**，自动重新请求该接口。\n\n\n\n> **tip:**\n>\n> 触发所引用变量值发生变化的方式有以下几种：\n>\n> 1. 通过对表单项的修改，可以更改表单项`name`属性值所配置变量的值；\n> 2. 通过，将其他组件的值发送到目标组件，进行数据域的更新，从而触发联动效果\n>\n> 接口联动一般只适用于初始化接口，例如：\n>\n> - `form`组件中的`initApi`；\n> - `select`组件中的`source`选项源接口`url`, `data`只能用于主动联动；\n> - `service`组件中的`api`和`schemaApi`；\n> - `crud`组件中的`api`；（crud 默认是跟地址栏联动，如果要做请关闭同步地址栏 syncLocation: false）\n> - 等等...\n\n> 如果 api 地址中有变量，比如 `/api/mock2/sample/${id}`，amis 就不会自动加上分页参数，需要自己加上，改成 `/api/mock2/sample/${id}?page=${page}&perPage=${perPage}`\n\n#### 配置请求条件\n\n默认在变量变化时，总是会去请求联动的接口，你也可以配置请求条件，当只有当前数据域中某个值符合特定条件才去请求该接口。\n\n\n\n更多用法，见：\n\n#### 主动触发\n\n上面示例有个问题，就是数据一旦变化就会出发重新拉取，而输入框的频繁变化值会导致频繁的拉取？没关系，也可以配置主动拉取如：\n\n\n\n1. 通过`api`对象形式，将获取变量值配置到`data`请求体中。\n2. 配置搜索按钮，并配置该行为是刷新目标组件，并配置目标组件`target`\n3. 这样我们只有在点击搜索按钮的时候，才会将`keyword`值发送给`select`组件，重新拉取选项\n\n### 表单提交返回数据\n\n表单提交后会将返回结果合并到当前表单数据域，因此可以基于它实现提交按钮后显示结果，比如\n\n\n\n上面的例子首先用 `\"actions\": []` 将表单默认的提交按钮去掉，然后在 `input-group` 里放一个 `submit` 类型的按钮来替代表单查询。\n\n这个查询结果返回类似如下的数据\n\n\n\namis 会将返回的 `data` 写入表单数据域，因此下面的 `static` 组件就能显示了。\n\n### 其他联动\n\n还有一些组件特有的联动效果，例如 form 的 disabledOn，crud 中的 itemDraggableOn 等等，可以参考相应的组件文档。\n\n## 组件间联动\n\n联动很可能会出现跨组件的形式，思考下面这种场景：\n\n有一个表单`form`组件，还有一个列表组件`crud`，我们想要把`form`提交的数据，可以用作`crud`的查询条件，并请求`crud`的接口，由于`form`和`crud`位于同一层级，因此没法使用数据链的方式进行取值。\n\n\n\n现在更改配置如下：\n\n\n\n我们进行两个调整：\n\n1. 为`crud`组件设置了`name`属性为`my_crud`\n2. 为`form`组件配置了`target`属性为`crud`的`name`：`my_crud`\n\n更改配置后，提交表单时，amis 会寻找`target`所配置的目标组件，把`form`中所提交的数据，发送给该目标组件中，并将该数据**合并**到目标组件的数据域中，并触发目标组件的刷新操作，对于 CRUD 组件来说，刷新即重新拉取数据接口。\n\n> 当然，`crud`组件内置已经支持此功能，你只需要配置`crud`中的`filter`属性，就可以实现上面的效果，更多内容查看 文档。\n\n我们再来一个例子，这次我们实现 \n\n### 发送指定数据\n\n`target`属性支持通过配置参数来发送指定数据，例如：`\"target\" :\"xxx?a=${a}&b=${b}\"`，这样就会把当前数据域中的`a`变量和`b`变量发送给目标组件\n\n\n\n上例中我们给按钮上配置了`\"target\": \"form2?name=${name}&email=${email}\"`,可以把当前数据链中的`name`变量和`email`变量发送给`form2`\n\n### 配置多个目标\n\n`target`支持配置多个目标组件 name，用逗号隔开，例如：\n\n\n\n上例中点击按钮会刷新`target1`和`target2`组件。\n\n事实上，**组件间联动也可以实现上述任意的 （显隐联动、接口联动等其他联动）。**\n\n### 动态目标\n\n> 2.9.0 及以上版本\n\n刷新目标支持表达式，比如目标可以配置成 `form-${ xxx ? '1' : '2'}`。\n\n\n\n如果目标组件在列表中，则实际渲染的时候会存在多份，通过某个固定名字没办法找到对应的组件。比如某个 crud 里面，某列设置的是一个 service，通过 service 拉取数据。如果想在操作栏里面某个操作完后刷新对应的 service，通过固定的名字是没办法找到对应的 service 的。所以名字 `name` 也支持动态名字。如: `my-service-${id}` 把行数据中动态的 id 设置进去。\n\n\n\n> 这个例子 api 是 mock 的，所以修改后刷新没效果。\n","path":"/zh-CN/docs/concepts/linkage"},{"title":"配置与组件","body":"\n## 最简单的 amis 配置\n\n一个最简单的 amis 配置看起来是这样的：\n\n\n\n请观察上面的代码，这是一段 JSON，它的含义是：\n\n1. `type` 是 amis 节点中最重要的字段，它告诉 amis 当前节点需要渲染的是`Page`组件。\n2. 而 `body` 字段会作为 `Page` 组件的属性，`Page` 组件根据这个值来渲染页面内容。\n\n这段配置的效果如下所示：\n\n\n\n上面这个配置是可以**实时修改预览**的，尝试改一下 `Hello World!` 的值。\n\n> 不过这个实时预览功能对于某些属性不生效，如果发现不符合预期，需要复制 JSON，打开另一个页面后粘贴。\n\n## 组件\n\n上面提到，`type`字段会告诉 amis 当前节点渲染的组件为`Page`，组件节点的配置永远都是由 **`type`字段** （用于标识当前是哪个组件）和 **属性** 构成的。\n\n\n\n## 组件树\n\n这次我们看一个稍微复杂一点的配置：\n\n\n\n该配置渲染页面如下：\n\n\n\n最终效果和前面的示例一样，但这次 `Page` 组件的 `body` 属性值配置了一个对象，**通过`type`指明`body`内容区内会渲染一个叫`Tpl`的组件**，它是一个模板渲染组件。\n\n在 `body` 中除了配置对象，还可以是数组，比如下面的例子:\n\n\n\n可以看到通过数组的形式，增加了 `divider` 和 `form` 组件。\n\n除了 `Page` 之外，还有很多**容器型**的组件都有 `body` 属性，通过这种树形结构，amis 就能实现复杂页面制作。\n\n> **注意：**\n>\n> `Page`是 amis 页面配置中 **必须也是唯一的顶级节点**\n\n### 通过树形来实现布局\n\n下面这个页面就是通过树形组合出来的，大体结构是这样：\n\n\n\n\n\n> amis 后续将会实现新的布局模式，将更容易实现复杂布局效果\n","path":"/zh-CN/docs/concepts/schema"},{"title":"样式","body":"\namis 中有大量的功能类 class 可以使用，即可以用在 schema 中，也可以用在自定义组件开发中，掌握这些 class, 几乎可以不用写样式。\n\n<div class=\"bg-pink-500 text-light shadow p-4 rounded-md hover:bg-pink-600\">\n <div class=\"text-lg b-b p-b-sm\">注意</div>\n <div class=\"p-t-xs\">CSS辅助类样式做了全新的升级，请点击顶部的「样式」查看新版。旧版本可以继续，但将不再更新。</div>\n</div>\n\n## 基本使用\n\n例如，下面这个例子，我们内容区渲染了两个按钮，但是可以看到，两个按钮紧贴在一起，并不是很美观，于是我们想添加一定的间隔\n\n\n\n1. 通过查阅按钮文档可知，按钮支持 className 配置项，也就是说可以在按钮上添加 CSS 类名；\n2. 再查阅当前页面下面 可知，我们可以添加`m-l`类名实现`margin-left: 15px;`的 CSS 效果\n3. 于是我们在`按钮2`的配置中添加`\"className\": \"m-l\"`，就能实现间距效果了\n\n\n\n绝大部分组件都支持各种形式的 CSS 类名自定义，然后搭配该文档中的各种类名可以实现各式各样的样式调整。具体请查阅组件文档；\n\n> 你可能需要掌握一些基础的 CSS 知识\n\n## 字体颜色\n\n实际颜色取决于主题，下面示例是默认主题的颜色。\n\n\n\n## 图标\n\namis 集成了 查看。\n\n## 布局\n\n水平布局可以考虑用 Bootstrap 的 或者用 `hbox` 加 `col`\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## 其他\n\n\n","path":"/zh-CN/docs/concepts/style"},{"title":"模板","body":"\n为了可以更加灵活渲染文本、数据结构，amis 借鉴其他模板引擎，实现了一套模板渲染功能。\n\n## 模板字符串\n\n### 普通文本\n\n配置一段普通文本并输出\n\n\n\n### 文本中获取变量\n\n可以支持在普通文本中，使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，如下\n\n\n\n更多`${xxx}`语法相关介绍，移步 。\n\n### 渲染 html\n\n使用**数据映射**语法：`${xxx}` 获取数据域中变量的值，并渲染 HTML\n\n\n\n如果是变量本身有 html，则需要使用 raw 过滤\n\n\n\n### 表达式\n\n> 1.5.0 及以上版本\n\n支持简单的表达式运算以及公式调用，具体请查看\n\n\n\n## JavaScript 模板引擎\n\namis 还支持用 JavaScript 模板引擎进行组织输出，内部采用 进行实现。\n\n\n\n> 注意到了吗？\n>\n> 在 JavaScript 模板引擎中，我们获取数据域变量的方式是`data.xxx`，而不是之前的`${xxx}`，如果你熟悉 JavaScript 的话，这里模板引擎其实是将数据域，当做当前代码的数据作用域进行执行，因此需要使用`data.xxx`进行取值\n>\n> 要注意使用模板的时候在不同的场景下要使用正确的取值方式。\n\n仔细看示例不难发现，语法跟 ejs 很像，`<% 这里面是 js 语句 %>`，所以只要会写 js，做页面渲染没有什么问题。另外以下是一些可用 js 方法。\n\n- `formatDate(value, format='LLL', inputFormat='')`格式化时间格式，关于 format 请前往 文档页面。\n- `formatTimeStamp(value, format='LLL')` 格式化时间戳为字符串。\n- `formatNumber(number)` 格式化数字格式，加上千分位。\n- `countDown(value)` 倒计时，显示离指定时间还剩下多少天，只支持时间戳。\n\n下面 filters 中的方法也可以使用如： `<%- date(data.xxx, 'YYYY-MM-DD') %>`\n\n## 注意事项\n\n#### 1. 模板字符串 和 Javascript 模板引擎 不可以交叉使用\n\n例如：\n\n\n\n\n","path":"/zh-CN/docs/concepts/template"},{"title":"扩展现有组件","body":"\n除了新增组件，在 amis 中还能扩展和修改现有组件。\n\n## 扩展表单验证\n\n如果默认的表单检测规则不满足需求，还可以通过代码的方式扩展。\n\n### 普通用法\n\nJSSDK 中的用法：\n\n\n\n这样在配置中就能使用下面的验证方法\n\n\n\n在 React 的使用方法是类似的\n\n\n\n### 更加灵活的提示错误\n\n> `2.9.1` 及以上版本\n\n如果想在一个验证函数里根据不同情况提示不同的错误信息，需要返回固定格式的结果：\n\n\n\n注意，当返回对象时，`error`必须为`true` 才会判定为错误：\n\n具体用法如下：\n\n\n\n## 同时支持多种类型编辑\n\n在表单编辑中，每个 name 一般对应一种类型，如果这个 name 有多种类型，比如下面的例子中 id 的值有可能是字符串，也有可能是数字，但 type 只能设置为一种类型，这种情况如何处理？\n\n\n\n有两种方式：\n\n### 使用另一个名称作为状态\n\n\n\n可以看到在一个 form 中可以有两个 name 相同的组件，通过 hiddenOn 或 visibleOn 来控制同时只显示一个。\n\n### 使用 PipeIn/PipeOut 方法\n\n如果不想增加一个新的 name，在 JS SDK 或 React 还有更高级的处理方法，可以增加一个 name 同样为 id 的 switch，实现 PipeIn/PipeOut 函数来进行自动识别，下面是个示例：\n\n\n\n不过这种写法的复杂度较高\n\n## 修改组件标签\n\n有些组件可以设置 `wrapperComponent`，比如 Form 下默认使用 form 标签，在浏览器中会自带回车提交功能，如果想去掉这个功能，可以将 `wrapperComponent` 设置为 `div`。\n","path":"/zh-CN/docs/extend/addon"},{"title":"如何贡献代码","body":"\n如果发现 amis 有不满足的功能，除了发 issue 等官方升级之外，最快的方法就是自己实现它，本文将介绍 amis 代码的基本结构，并一步步教你如何新增功能。\n\n## 准备开始\n\n1. 首先，你需要对 React 有基本了解，快速看一遍即可。\n2. 在 github 上 fork amis 项目到自己的账号下。\n3. 创建分支 `git checkout -b feat-xxx`\n\n## amis 代码结构\n\namis 主要代码在 `src` 和 `scss` 目录下，这里主要介绍 `src` 下的结构：\n\n\n\n虽然文件很多，但对于组件开发而言，大部分情况下只需要关注 `components` 及 `renderers` 目录下的内容就行，如果发现某个组件不满足需求，可以先在 `renderers` 中找到这个组件，对齐进行修改就行。\n\n下面我们将以一个实际例子来介绍如何新增一个组件。\n\n## 实战：avatar 组件\n\n本文的目标是新增 avatar 头像组件，完整演示如何在 amis 中添加一个新组件，完整实现可以参考这个 ，本文基于这个例子进行了简化。\n\n### 编写 React 组件代码代码\n\n由于这个组件并不需要被其他组件复用，所以只需要在 `renderers` 目录下实现就好，整体步骤是：\n\n新增 `src/renderers/Avatar.tsx` 文件，内容如下\n\n\n\n上面这段代码中，最核心的就是 `AvatarField`，这就是一个 React 组件。\n\n接下来还需要改两处地方：\n\n- 一个是 `src/Schema.ts`，需要在 `SchemaType` 里加入刚才定义的 `avatar`。\n- 另一个是 `src/index.tsx`，增加一行 `import './renders/Avatar';`。\n\n这样就在 amis 中新增了一个组件，接下来我们编写组件所需的样式。\n\n### 编写 SCSS 代码\n\n新组件一般都需要对应的样式，首先创建 `scss/components/_avatar.scss` 文件，内容是：\n\n```css\n// 注意必须有这个 #{$ns}，它是为了方便生成主题，比如在 cxd 主题下，会转成 `.cxd-Avatar`\n.#{$ns}Avatar {\n}\n```\n\n然后修改 `scss/themes/_common.scss`，通过 `@import '../components/avatar';` 引入这个新文件。\n\namis 中的 css 命名使用 规范，请按照这个规范编写。\n\n如果样式在不同主题下有区别，则需要使用 CSS 变量，在 `scss/_properties.scss` 里定义这个变量的默认值，让后在对应的主题文件中覆盖，比如 `scss/themes/_cxd-variables.scss`。\n\n### 编写文档\n\n新组件还需要有对应的文档来方便其他人了解和使用，首先在 `docs/zh-CN/components/avatar.md` 中创建文件，然后在 `examples/components/Components.tsx` 里引用。\n\n文档编写可以参考其他示例，需要演示这个组件的所有功能。\n\n## 提交 PR\n\n使用 `git push --set-upstream origin feat-xxx` 创建远程分支。\n\n然后通过系统提示的 `https://github.com/xxx/amis/pull/new/feat-xxx` 链接来创建 PR，官方团队会在一个工作日左右回复。\n","path":"/zh-CN/docs/extend/contribute"},{"title":"自定义组件 - React","body":"\n## React 临时扩展\n\namis 的配置最终会转成 React 组件来执行，所以如果只是想在某个配置中加入定制功能，可以直接在这个 JSON 配置里写 React 代码，比如下面这个例子：\n\n\n\n其中的 `mycustom` 就是一个临时扩展，它的 `children` 属性是一个函数，它的返回内容和 React 的 Render 方法一样，即 jsx，在这个方法里你可以写任意 JavaScript 来实现自己的定制需求，这个函数有两个参数 `value` 和 `onChange`，`value` 就是组件的值，`onChange` 方法用来改变这个值，比如上面的例子中，点击链接后就会修改 `mycustom` 为一个随机数，在提交表单的时候就变成了这个随机数，而 `data` 可以拿到其它控件的值，比如 `data.username`。\n\n> 注意与 \"children\" 并列有个 \"asFormItem\" 属性，这个属性表示这个节点的渲染会自动包裹成表单项，包裹成表单项就能配置\n> \"name\"、\"description\"、\"validation\" 之类的跟表单项有关的配置了。包括其中的 value 和 onChange 自动会跟 name 关联等功能，跟下面 `@FormItem` 注解是一个功能。\n\n与之类似的还有个 `component` 属性，这个属性可以传入 React Component，如果想用 React Hooks，请通过 `component` 传递，而不是 `children`。\n\n这种扩展方式既简单又灵活，但它是写在配置中的，无法在其他地方复用，也无法在可视化编辑器里编辑，如果需要复用或在可视化编辑器中使用，请使用下面的「注册自定义类型」方式：\n\n## React 注册自定义类型\n\n首先需要了解「」，了解了基本原理后，来看个简单的例子：\n\n\n\n> 上面这个语法需要开启 Decorator 功能，如果不支持，可以改成如下写法\n\n\n\n有了以上这段代码后，就可以这样使用了。\n\n\n\n看了前面应该不难理解，这里注册一个 React 组件，当节点的 type 信息是 `my-renderer` 结尾时，交给当前组件来完成渲染。\n\n如果这个组件还能通过 `children` 属性添加子节点，则需要使用下面这种写法：\n\n\n\n有了以上这段代码后，就可以这样使用了。\n\n\n\n跟第一个例子不同的地方是，这里多了个 `render` 方法，这个方法就是专门用来渲染子节点的。来看下参数说明：\n\n- `region` 区域名称，你有可能有多个区域可以作为容器，请不要重复。\n- `node` 子节点。\n- `props` 可选，可以通过此对象跟子节点通信等。\n\n### 属性支持变量\n\n> 1.8.0 及以上版本新增配置，之前版本需要调用 amis 里的 resolveVariableAndFilter 方法\n\n前面的例子中组件参数都是静态的，但因为配置了 `autoVar: true`，使得所有组件参数将自动支持变量，比如下面例子中的 `tip` 在组件内拿到的将是解析后的值\n\n\n\n### 表单项的扩展\n\n以上是普通渲染器的注册方式，如果是表单项，为了更简单的扩充，请使用 `FormItem` 注解，而不是 `Renderer`。 原因是如果用 `FormItem` 是不用关心：label 怎么摆，表单验证器怎么实现，如何适配表单的 3 种展现方式（水平、上下和内联模式），而只用关心：有了值后如何回显，响应用户交互设置新值。\n\n\n\n有了以上这段代码后，就可以这样使用了。\n\n\n\n> 注意: 使用 FormItem 默认是严格模式，即只有必要的属性变化才会重新渲染，有可能满足不了你的需求，如果忽略性能问题，可以传入 `strictMode`: `false` 来关闭。\n\n表单项开发主要关心两件事。\n\n1. 呈现当前值。如以上例子，通过 `this.props.value` 判定如果勾选了则显示`已勾选`，否则显示`请勾选`。\n2. 接收用户交互，通过 `this.props.onChange` 修改表单项值。如以上例子，当用户点击按钮时，切换当前选中的值。\n\n至于其他功能如：label/description 的展示、表单验证功能、表单布局（常规、左右或者内联）等等，只要是通过 FormItem 注册进去的都无需自己实现。\n\n需要注意，获取或者修改的是什么值跟配置中 `type` 并列的 `name` 属性有关，也就是说直接关联某个变量，自定义中直接通过 props 下发了某个指定变量的值和修改的方法。如果你想获取其他数据，或者设置其他数据可以看下以下说明：\n\n- `获取其他数据` 可以通过 `this.props.data` 查看，作用域中所有的数据都在这了。\n- `设置其他数据` 可以通过 `this.props.onBulkChange`， 比如: `this.props.onBulkChange({a: 1, b: 2})` 等于同时设置了两个值。当做数据填充的时候，这个方法很有用。\n\n### 其它高级定制\n\n下面是一些不太常用的 amis 扩展方式及技巧。\n\n#### 自定义验证器\n\n如果 amis 能满足需求了，则不需要关心。组件可以有自己的验证逻辑。\n\n\n\n上面的例子只是简单说明，另外可以做`异步验证`，validate 方法可以返回一个 promise。\n\n#### OptionsControl\n\n如果你的表单组件性质和 amis 的 Select、Checkboxes、List 差不多，用户配置配置 source 可通过 API 拉取选项，你可以用 OptionsControl 取代 FormItem 这个注解。\n\n用法是一样，功能方面主要多了以下功能。\n\n- 可以配置 options，options 支持配置 visibleOn hiddenOn 等表达式\n- 可以配置 `source` 换成动态拉取 options 的功能，source 中有变量依赖会自动重新拉取。\n- 下发了这些 props，可以更方便选项。\n - `options` 不管是用户配置的静态 options 还是配置 source 拉取的，下发到组件已经是最终的选项了。\n - `selectedOptions` 数组类型，当前用户选中的选项。\n - `loading` 当前选项是否在加载\n - `onToggle` 切换一个选项的值\n - `onToggleAll` 切换所有选项的值，类似于全选。\n\n#### 组件间通信\n\n关于组件间通信，amis 中有个机制就是，把需要被引用的组件设置一个 name 值，然后其他组件就可以通过这个 name 与其通信，比如这个。其实内部是依赖于内部的一个 Scoped Context。你的组件希望可以被别的组件引用，你需要把自己注册进去，默认自定义的非表单类组件并没有把自己注册进去，可以参考以下代码做添加。\n\n\n\n把自己注册进去了，其他组件就能引用到了。同时，如果你想找别的组件，也同样是通过 scoped 这个 context，如： `scoped.getComponentByName(\"xxxName\")` 这样就能拿到目标组件的实例了（前提是目标组件已经配置了 name 为 `xxxName`）。\n\n#### 其他功能方法\n\n自定义的渲染器 props 会下发一个非常有用的 env 对象。这个 env 有以下功能方法。\n\n- `env.fetcher` 可以用来做 ajax 请求如： `this.props.env.fetcher('xxxAPi', this.props.data).then((result) => console.log(result))`\n- `env.confirm` 确认框，返回一个 promise 等待用户确认如： `this.props.env.confirm('你确定要这么做？').then((confirmed) => console.log(confirmed))`\n- `env.alert` 用 Modal 实现的弹框，个人觉得更美观。\n- `env.notify` toast 某个消息 如： `this.props.env.notify(\"error\", \"出错了\")`\n- `env.jumpTo` 页面跳转。\n","path":"/zh-CN/docs/extend/custom-react"},{"title":"自定义组件 - SDK","body":"\n## 使用 custom 组件临时扩展\n\n基于 custom 组件可以直接在 amis 配置实现自定义功能，它的支持面最广，是唯一支持在可视化编辑器中使用的方法。\n\n使用 custom 组件类似如下写法：\n\n\n\n注意上面的代码用到了 JavaScript 函数，无法转成 json 格式，但这三个函数还支持字符串形式，上面的代码可以改成如下形式，这样就能在可视化编辑器里支持自定义组件了：\n\n\n\n注意上面的例子中两个组件的 name 是一样的，这是为了方便示例，因为 amis 中的数据是双向绑定的，因此 onChange 修改自身的时候，另一个「姓名」输入框由于 name 一样，也会同步更新。\n\n关于 custom 组件的更多属性请参考「」。\n\n## JS SDK 注册组件\n\namis 组件都是基于 React 的，所以需要使用一个简单的 React 组件来注册，可以是函数组件也可以是类组件，下面以函数组件为例，将中的代码替换成如下示例：\n\n\n\n### 示例：引入 Element UI\n\n首先在页面中加入 Element UI 所需的依赖\n\n\n\n然后将前面的 `React.useEffect` 改成如下即可：\n\n```javascript\nReact.useEffect(function () {\n dom.current.innerHTML = `\n <el-button @click=\"visible = true\">Button</el-button>\n <el-dialog :visible.sync=\"visible\" title=\"Hello world\">\n <p>Try Element</p>\n </el-dialog>\n `;\n new Vue({\n el: dom.current,\n data: function () {\n return {visible: false};\n }\n });\n});\n```\n","path":"/zh-CN/docs/extend/custom-sdk"},{"title":"调试工具","body":"\n> 1.6.1 及以上版本\n\namis 内置了调试工具，可以查看组件内部运行日志，方便分析问题，目前在文档右侧就有显示。\n\n## 开启方法\n\n默认不会开启这个功能，可以通过下面三种方式开启：\n\n1. render 的 env 里设置 `enableAMISDebug`。\n1. 配置全局变量 `enableAMISDebug` 的值为 `true`，比如 `window.enableAMISDebug = true`。\n1. 在页面 URL 参数中加上 `amisDebug=1`，比如 `http://xxx.com/?amisDebug=1`。\n\n开启之后，在页面右侧就会显示。\n\n## 目前功能\n\n目前 Debug 工具提供了两个功能:\n\n1. 运行日志，主要是 api 及数据转换的日志\n2. 查看组件数据链，Debug 工具展开后，点击任意组件就能看到这个组件的数据链\n","path":"/zh-CN/docs/extend/debug"},{"title":"可视化编辑器","body":"\n目前 amis 可视化编辑器也作为单独的 npm 包发布了出来，可以通过 npm 安装使用。\n\n在线体验：https://aisuda.github.io/amis-editor-demo\n示例代码：https://github.com/aisuda/amis-editor-demo\n\n## 使用\n\n目前有两个 npm 包：`amis-editor` 和 `amis-editor-core`。\n\n- `amis-editor-core` 包含了少量底层必要的功能实现，里面没有包含 amis 内置渲染器插件的任何实现。\n- `amis-editor` 基于 `amis-editor-core` 实现了 amis 内置的所有渲染器的可视化编辑器插件。\n\n如果你没有使用 amis 内置渲染器，推荐只使用 `amis-editor-core`，否则推荐使用 `amis-editor`。这里主要介绍 `amis-editor`, `amis-editor-core` 的使用方式是一样的。\n\n\n\n通过 `npm` 安装完后，在 React 项目中这样使用：\n\n\n\n## 属性说明\n\n- `value: Schema` amis json 配置，比如：`{type: 'page', body: 'contents...'}`\n- `onChange: (value: Schema) => void` 当编辑器修改的时候会触发。\n- `preview?: boolean` 是否为预览模式。\n- `autoFocus?: boolean` 是否自动聚焦第一个可编辑的组件。\n- `isMobile?: boolean` 是否为移动端模式，当为移动模式时，将采用 iframe 来预览。\n- `$schemaUrl?: string` 提供 amis 产出的 schema.json 的访问路径。主要用来给代码编辑模式提供属性提示信息。\n- `className?: string` 额外加个 css 类名，辅助样式定义。\n- `schemas?: JSONSchemaObject` 用来定义有哪些全局变量，辅助编辑器格式化绑定全局数据。\n- `theme?: string` amis 主题\n- `schemaFilter?: (schema: any, isPreview?: boolean) => any` 配置过滤器。可以用来实现 api proxy，比如原始配置中请求地址是 `http://baidu.com` 如果直接给编辑器预览请求，很可能会报跨域，可以自动转成 `/api/proxy?_url=xxxx`，走 proxy 解决。\n- `amisEnv?: any` 这是是给 amis 的 Env 对象，具体请前往 \n- `disableBultinPlugin?: boolean` 是否禁用内置插件\n- `disablePluginList?: Array<string> | (id: string, plugin: PluginClass) => boolean` 禁用插件列表\n- `plugins?: Array<PluginClass>` 额外的自定义插件，具体看下面的说明。\n- `isHiddenProps?: (key: string) => boolean` 是否为隐藏属性，隐藏属性是在配置中有，但是在代码编辑器中不可见。\n- `actionOptions?: any` 事件动作面板相关配置\n- `onInit?: ( event: PluginEvent<EventContext & {data: EditorManager;}>) => void` 初始化事件\n- `onActive?: (event: PluginEvent<ActiveEventContext>) => void` 点选事件\n- `beforeInsert?: (event: PluginEvent<InsertEventContext>) => false | void` 插入节点前事件\n- `afterInsert?: (event: PluginEvent<InsertEventContext>) => void;` 插入节点后事件\n- `beforeUpdate?: (event: PluginEvent<ChangeEventContext>) => false | void;` 面板里面编辑修改前的事件。可通过 event.preventDefault() 阻止。\n- `afterUpdate?: (event: PluginEvent<ChangeEventContext>) => false | void;` 面板里面编辑修改后的事件。\n- `beforeReplace?: (event: PluginEvent<ReplaceEventContext>) => false | void;` 更新渲染器前的事件，或者右键粘贴配置。可通过 event.preventDefault() 阻止。\n- `afterReplace?: (event: PluginEvent<ReplaceEventContext>) => void` 更新渲染器后的事件，或者右键粘贴配置。\n- `beforeMove?: (event: PluginEvent<MoveEventContext>) => false | void` 移动节点前触发，包括上移，下移。可通过 event.preventDefault() 阻止。\n- `afterMove?: (event: PluginEvent<MoveEventContext>) => void` 移动节点后触发，包括上移，下移。\n- `beforeDelete?: (event: PluginEvent<DeleteEventContext>) => false | void` 删除前触发。可通过 event.preventDefault() 阻止。\n- `afterDelete?: (event: PluginEvent<DeleteEventContext>) => void` 删除后触发\n- `beforeResolveEditorInfo?: ( event: PluginEvent<RendererInfoResolveEventContext> ) => false | void` 收集渲染器信息前触发。可通过 event.preventDefault() 阻止，如果阻止了，则目标组件不可编辑。\n- `afterResolveEditorInfo?: ( event: PluginEvent<RendererInfoResolveEventContext> ) => void` 收集渲染器信息后触发\n- `beforeResolveJsonSchema?: ( event: PluginEvent<RendererJSONSchemaResolveEventContext> ) => false | void` 基于渲染器获取配置的 jsonSchema 信息。可通过 event.preventDefault() 阻止。\n- `afterResolveJsonSchema?: ( event: PluginEvent<RendererJSONSchemaResolveEventContext> ) => void` 基于渲染器获取配置的 jsonSchema 信息。\n- `onDndAccept?: (event: PluginEvent<DragEventContext>) => false | void` 当将组件拖入某个容器时触发，用来决定接收不接收本次拖拽。\n- `onBuildPanels?: (event: PluginEvent<BuildPanelEventContext>) => void` 构建右侧面板的事件，可以干预右侧面板的生成，可以新增面板。\n- `onBuildContextMenus?: (event: PluginEvent<ContextMenuEventContext>) => void` 构建上下文菜单的事件\n- `onBuildToolbars?: (event: PluginEvent<BaseEventContext>) => void` 构建点选框顶部 icon 按钮事件\n- `onSelectionChange?: (event: PluginEvent<SelectionEventContext>) => void` 当点选发生变化的事件\n- `onPreventClick?: ( event: PluginEvent<PreventClickEventContext> ) => false | void` 禁用内部点击事件的事件，可以用来控制是否禁用编辑态内置组件的一些点选能力。\n- `onWidthChangeStart?: ` 当渲染器标记为 `widthMutable` 时会触发宽度变动事件\n- `onHeightChangeStart?: ` 当渲染器标记为 `heightMutable` 时会触发宽度变动事件\n- `onSizeChangeStart?: ` 当渲染器同时标记为 `widthMutable` 和 `heightMutable` 时会触发变动事件\n\n## 自定义插件\n\n开始之前，需要先自定义一个 amis 渲染器，然后再添加编辑器插件，让这个自定义渲染器可以在编辑器中可编辑。\n\n\n\n通过以上代码，amis 配置中通过 `type` 指定为 `my-renderer` 即可启用此组件。\n\n接下来添加编辑器插件，添加插件的方式有两种。\n\n- registerEditorPlugin 注册全局插件。\n- 不注册，调用 <Editor> 的时候时候通过 plugins 属性传入。\n\n效果都一样，重点还是怎么写个 Plugin，示例：\n\n\n\n定义好 plugin 后，可以有两种方式启用。\n\n\n\n\n\n## 工作原理\n\n编辑器在渲染 amis 配置的时候，会把所有的 json（配置） 节点都自动加个 `$$id` 唯一 id。然后复写了 `rendererResolver` 方法。某个节点 {type: 'xxxx'} 在找到对应 amis 组件渲染前，都会调用这个方法。\n这个方法会在渲染之前，基于 schema、渲染器信息，通过插件去收集编辑器信息，如果收集到了，会额外的通过一个 `Wrapper` 包裹。这个 `Wrapper` 主要是自动把 `$$id` 写入到 dom 的属性上`data-editor-id=\"$$id\"`。这样鼠标点击的时候，能够根据 dom 上的标记知道是哪个 json 节点，同时根据渲染器编辑器信息，能够生成对应的配置面板，并把对应 json 的节点做配置修改。\n\n有些组件是带区域的，所以除了 dom 上标记节点信息外，还需要标记区域信息。节点能够通过 `Wrapper` 自动包裹来实现，但是区域则不能，这个要去分析组件本身是怎么实现。最终目的是要通过 `RegionWrapper` 去包裹对应 JSX.Element 来完成标记。这个 `RegionWrapper` 会自动完成 dom 的标记 `data-region=\"xxx\" data-region-host=\"$$id\"`，这样点击到这个 dom 的时候，能知道是哪个组件的哪个区域，这样就能往里面拖入新组件。\n\n左侧的组件列表主要是将收集到的渲染器编辑器信息做个汇总展示，可拖入到指定区域内。\n\n## 注册渲染器信息\n\n如果想要渲染器在编辑器里面可点选，必须有插件提供这个渲染器的信息，这样才会被 `Wrapper` 包裹，才会在对应的 dom 上带上标记，才能点选。\n\n在插件中可以通过实现 `getRendererInfo` 方法来注册渲染器信息，如果某个插件设置了 `rendererName` 和 `name` 属性，同时它继承 `BasePlugin` 的，则会自动完成注册逻辑。\n\n\n\n`RendererInfoResolveEventContext` 主要包含以下信息：\n\n- `schema` 渲染器的配置\n- `schemaPath` 渲染器在整个配置中的路径信息\n- `renderer` 渲染器信息，即注册 amis 渲染器的时候注册的渲染器信息\n\n插件中可以基于这些信息来决定要不要注册编辑器插件，如果注册了则此渲染器可在编辑器中点选。可注册的信息主要包含：\n\n- `name: string` 渲染器名字，决定点选高亮框的名称显示\n- `searchKeywords?: string` 组件关键字，用来辅助组件列表搜索\n- `description?: string` 在组件列表中展示有用\n- `docLink?: string` 组件文档链接\n- `previewSchema?: any` 用来生成预览图\n- `tags ?:string | Array<string>` 分类, 决定会在哪个 tab 下面显示的\n- `scaffold ?: any` 在编辑器中拖入该组件时生成的默认配置项\n- `scaffolds ?: Array<any>` 脚手架也可以是多个，比如 Grid 组件，两栏，三栏组件都是用 grid 构建的，只是拖入时的初始配置不一样。\n- `$schema?: string` json schema 定义。如： `/schemas/UnkownSchema.json` 目前这个不支持自定义，只有内置渲染器才有这些信息。\n- `isBaseComponent?: boolean` 是否为内置渲染器，决定组建列表出现在内置 tab 下还是自定义 tab 下。\n- `disabledRendererPlugin?: boolean` 新增属性，用于判断是否出现在组件面板中，默认为 false，为 true 则不展示\n- `regions?: Array<RegionConfig>` 定义这个组件一共有哪些区域，比如页面组件包含的区域有：aside、body、toolbar 等。\n- `patchContainers?: Array<string>` 哪些容器属性需要自动转成数组的。如果不配置默认就从 regions 里面读取。\n- `overrides?: { [propName: string]: Function;}` 用来复写渲染器原型链上的方法，通常不需要这个。下面单独的篇章介绍\n- `vRendererConfig?: VRendererConfig` 虚拟渲染器的配置项，有时候需要给那些并不是渲染器的组件添加点选编辑功能。 比如： Tabs 下面的 Tab, 这个并不是个渲染器，但是需要可以点选修改内容。\n- `wrapperResolve?: (dom: HTMLElement) => HTMLElement | Array<HTMLElement>` 返回哪些 dom 节点，需要自动加上 data-editor-id 属性， 目前只有 TableCell 里面用到了，就它需要同时给某一列下所有 td 都加上那个属性。\n- `wrapperProps?: Record<string, any>` 默认下发哪些属性，如果要动态下发，请使用 filterProps, 比如，table 渲染器，默认下发 resizeable: false, 这样编辑的时候就不会出现列的宽度可调整功能。这个是运行态的功能，不应该出现在编辑态里面。\n- `filterProps?: (props: any, node: EditorNodeType) => Record<string, any>` 修改一些属性，一般用来干掉 $$id，或者渲染假数据, 这样它的孩子节点就不能直接点选编辑了，比如 Combo。\n- `renderRenderer?: (props: any, info: RendererInfo) => JSX.Element` 有些没有视图的组件，可以自己输出点内容，否则没办法点选编辑。\n- `multifactor?: boolean` 是否有多重身份？比如 CRUD 即是 CRUD 又可能是 Table，表格的列，即是表格列，也可能是其他文本框。 配置了这个后会自动添加多个 Panel 面板来编辑。\n- `scaffoldForm?: ScaffoldForm` 右键的时候是否出现重新构建，靠这个。同时首次新增此渲染器的时候会出现一个脚手架弹窗。下面会有单独内容介绍。\n\n## 如何定义右侧配置面板\n\n当点选某个组件的时候，编辑器内部会触发面板构建动作，每个插件都可以通过实现 `buildEditorPanel` 来插入右侧面板。\n\n\n\n\n\n通常右侧面板都是表单配置，使用 amis 配置就可以完成。所以推荐的做法是，直接在这个插件上面定义 `panelBody` 或者 `panelBodyCreator` 即可。\n\n\n\n\n\n`panelBodyCreator` 相对于 `panelBody` 的区别是，可以基于一些上下文信息来构建不同的表单。比如在表单里面的按钮，和在表单外面的按钮配置项不一样。\n\n\n\n`context` 中主要包含：\n\n- `selections` 当前选中的渲染器，可能是多个\n- `node` 节点信息\n- `schema` 当前组件配置\n- `info` 注册的渲染器编辑器信息\n\n## 如何扩充渲染器容器配置\n\n开始之前请先阅读 ，如果是容器组件，还需要在对应 React 虚拟 dom 前包裹 `RegionWrapper`, 来完成 dom 标记。如果在注册编辑器信息的时候定义了 `regions` 信息，则会根据这个信息，自动完成 `RegionWrapper` 包裹。\n\n这里先看简单的情况，比如 `container` 组件。它在 amis 大概是这样实现的容器功能。通过 `this.props.render('body', schema)` 来实现的容器功能。\n\n\n\n在插件中像这样定义 `regions` 即可使得 `container` 有了 `body` 这个 region。\n\n\n\n插件内部会根据这个信息，自动在 `render('body', body as any, {disabled})` 的地方包裹个 `RegionWrapper`。这种方式主要是通过篡改 `this.props.render` 方法实现的。\n\n再看个复杂点的情况如 `Form` 的 `actions` 区块输出。\n\n```tsx\nrenderFooter() {\n const actions = this.buildActions();\n\n if (!actions || !actions.length) {\n return null;\n }\n\n const {\n store,\n render,\n classnames: cx,\n showErrorMsg,\n showLoading,\n show\n } = this.props;\n\n return (\n <div className={cx('Modal-footer')}>\n {(showLoading !== false && store.loading) ||\n (showErrorMsg !== false && store.error) ? (\n <div className={cx('Dialog-info')} key=\"info\">\n {showLoading !== false ? (\n <Spinner size=\"sm\" key=\"info\" show={store.loading} />\n ) : null}\n {store.error && showErrorMsg !== false ? (\n <span className={cx('Dialog-error')}>{store.msg}</span>\n ) : null}\n </div>\n ) : null}\n {actions.map((action, key) =>\n render(`action/${key}`, action, {\n data: store.formData,\n onAction: this.handleAction,\n key,\n disabled: action.disabled || store.loading || !show\n })\n )}\n </div>\n );\n}\n```\n\n像这个区域，它应该包裹在 `.Modal-footer` 里面，没办法通过第一种方式实现。所以第二种配置方式是：\n\n\n\n通过 `renderMethod` 信息，去篡改渲染器（React Component）的原型链，在这个方法里面自动包裹 `RegionWrapper`。包裹也有多种策略，有时候要包裹在外面，有时要包裹在第一个虚拟 dom 里面。\n\n更多配置信息请参考以下 `RegionConfig` 信息\n\n- `key: string` 简单情况，如果区域直接用的 render('region', subSchema)，这种只需要配置 key 就能简单插入 Region 节点。\n- `label: string` 区域用来显示的名字。\n- `placeholder?: string` 区域占位字符，用于提示\n- `matchRegion?: (elem: JSX.Element | undefined | null, component: JSX.Element ) => boolean` 对于复杂的控件需要用到这个配置。如果配置了，则遍历 react dom 直到目标节点调换成 Region 节点，如果没有配置这个，但是又配置了 renderMethod 方法，那就直接将 renderMethod 里面返回的 react dom 直接包一层 Region\n- `renderMethod?: string` 指定要覆盖哪个方法。\n- `rendererName?: string` 通常是 hack 当前渲染器，单有时候当前渲染器其实是组合的别的渲染器。如果要篡改别的渲染器，则通过渲染器名字指定。\n- `insertPosition?: 'outter' | 'inner'` 当配置 renderMethod 的时候会自动把 Region 插入进去。 默认是 outter 模式，有时候可能需要配置成 inner， 比如 renderMethod 为 render 的时候。\n- `optional?: boolean` 是否为可选容器，如果是可选容器，不会强制自动创建成员\n- `renderMethodOverride?: (regions: Array<RegionConfig>, insertRegion: (component: JSX.Element, dom: JSX.Element, regions: Array<RegionConfig>, info: RendererInfo, manager: EditorManager) => JSX.Element ) => Function` 有时候有些包括是需要其他条件的，所以要自己写包裹逻辑。比如 Panel 里面的 renderBody\n- `wrapper?: React.ComponentType<RegionWrapperProps>` 用来指定用什么组件包裹，默认是 RegionWrapper\n- `wrapperResolve?: (dom: HTMLElement) => HTMLElement` 返回需要添加 data-region 的 dom 节点。\n- `modifyGhost?: (ghost: HTMLElement, schema?: any) => void` 当拖入到这个容器时，是否需要修改一下 ghost 结构？\n- `dndMode?: string` dnd 拖拽模式。比如 table 那种需要配置成 position-h\n- `accept?: (json: any) => boolean` 可以用来判断是否允许拖入当前节点。\n\n## 如何定义编辑器脚手架\n\n如果希望拖入组件的时候，弹出个配置框，基于用户不同的配置，生成不同的初始数据。则这里需要用到 `scaffoldForm` 配置。\n\n\n\n\n\n可用配置\n\n- `title` 脚手架框的标题\n- `body` 表单项配置，参考 amis 的 form 配置\n- `mode` 表单默认展示方式，参考 amis 的 form 配置\n- `size` 弹窗大小，参考 amis 的 dialog 配置\n- `initApi` 初始化接口\n- `api` 提交接口\n- `validate` 整体验证钩子\n- `pipeIn?: (value: any) => any` schema 配置转脚手架配置\n- `pipeOut?: (value: any) => any` 脚手架配置转 schema 配置\n- `canRebuild?: boolean` 是否允许重新构建\n\n## 如何构建点选框顶部菜单\n\n插件中定义 `buildEditorToolbar` 方法即可添加点选框顶部菜单\n\n\n\n## 如何构建上下文功能菜单\n\n插件中定义 `buildEditorContextMenu` 方法即可添加上下文功能菜单\n\n\n\n## 如何让渲染器可通过拖拽调整宽高\n\n首先组件需要支持宽高设置，为了演示效果，将之前的 `my-renderer` 改成如下代码：\n\n\n\n然后插件中加入以下代码即可完成拖拽调整宽高\n\n```tsx\nonActive(event: PluginEvent<ActiveEventContext>) {\n const context = event.context;\n\n if (context.info?.plugin !== this || !context.node) {\n return;\n }\n\n const node = context.node!;\n node.setHeightMutable(true);\n node.setWidthMutable(true);\n}\n\nonWidthChangeStart(\n event: PluginEvent<\n ResizeMoveEventContext,\n {\n onMove(e: MouseEvent): void;\n onEnd(e: MouseEvent): void;\n }\n >\n) {\n return this.onSizeChangeStart(event, 'horizontal');\n}\n\nonHeightChangeStart(\n event: PluginEvent<\n ResizeMoveEventContext,\n {\n onMove(e: MouseEvent): void;\n onEnd(e: MouseEvent): void;\n }\n >\n) {\n return this.onSizeChangeStart(event, 'vertical');\n}\n\nonSizeChangeStart(\n event: PluginEvent<\n ResizeMoveEventContext,\n {\n onMove(e: MouseEvent): void;\n onEnd(e: MouseEvent): void;\n }\n >,\n direction: 'both' | 'vertical' | 'horizontal' = 'both'\n) {\n const context = event.context;\n const node = context.node;\n if (node.info?.plugin !== this) {\n return;\n }\n\n const resizer = context.resizer;\n const dom = context.dom;\n const frameRect = dom.parentElement!.getBoundingClientRect();\n const rect = dom.getBoundingClientRect();\n const startX = context.nativeEvent.pageX;\n const startY = context.nativeEvent.pageY;\n\n event.setData({\n onMove: (e: MouseEvent) => {\n const dy = e.pageY - startY;\n const dx = e.pageX - startX;\n const height = Math.max(50, rect.height + dy);\n const width = Math.max(100, Math.min(rect.width + dx, frameRect.width));\n const state: any = {\n width,\n height\n };\n\n if (direction === 'both') {\n resizer.setAttribute('data-value', `${width}px x ${height}px`);\n } else if (direction === 'vertical') {\n resizer.setAttribute('data-value', `${height}px`);\n delete state.width;\n } else {\n resizer.setAttribute('data-value', `${width}px`);\n delete state.height;\n }\n\n node.updateState(state);\n\n requestAnimationFrame(() => {\n node.calculateHighlightBox();\n });\n },\n onEnd: (e: MouseEvent) => {\n const dy = e.pageY - startY;\n const dx = e.pageX - startX;\n const height = Math.max(50, rect.height + dy);\n const width = Math.max(100, Math.min(rect.width + dx, frameRect.width));\n const state: any = {\n width,\n height\n };\n\n if (direction === 'vertical') {\n delete state.width;\n } else if (direction === 'horizontal') {\n delete state.height;\n }\n\n resizer.removeAttribute('data-value');\n node.updateSchema(state);\n requestAnimationFrame(() => {\n node.calculateHighlightBox();\n });\n }\n });\n}\n```\n\n\n\n## 如何开启快速配置\n\n\n\n直接配置 `popOverBody` 即可\n\n\n\n## MiniEditor\n\n除了暴露 `Editor` 外，还有一个简单的编辑器 `MiniEditor`。与 `Editor` 的区别主要是，`MiniEditor` 只有编辑器区，没有左右两侧面板，像爱速搭的模型页面设计器就是基于此实现的。\n","path":"/zh-CN/docs/extend/editor"},{"title":"多语言","body":"\namis 中对多语言的支持有两方面：\n\n1. amis 内部组件的多语言，比如日期组件中的日期\n1. JSON 配置中的多语言，比如配置中的 label 值\n\n## amis 内部组件多语言\n\n分为 JS SDK 和 React 两种用法。\n\n### JS SDK\n\n从 1.1.0 版本开始已经自带英文翻译，所以只需要在 props 里设置 locale 即可。\n\n\n\n如果是其它语言，比如目前德语，需要单独引入文件\n\n\n\n### React\n\nReact 版本中没有内置英文翻译，需要自己 import，使用如下方法：\n\n\n\n在渲染 amis 组件的时候设置 locale 为 en-US\n\n\n\n## 全局文本替换\n\n> 1.5.0 及以上版本\n\namis 渲染的 env 参数可以配置全局文本替换，能基于它实现多语言替换功能\n\n\n\n比如下面的例子会对 `AMIS_HOST` 进行替换\n\n\n\n这个配置会对配置中的绝大部分字段进行替换，除了 `type, name, mode, target, reload` 这几个有特殊功能的字段。\n\n可以通过配置 `replaceTextIgnoreKeys` 属性来进行修改，让其它字段也避免被替换。\n\n## JSON 配置中设置多语言\n\n在 JSON 配置中，也可以设置不同语言下的不同展现，比如前面设置了 `locale` 为 `en-US`，这时在任意 JSON 配置中都能使用 `en-US` 对象来覆盖这个语言下的效果，用于实现简单的替换效果。\n\n\n\n请点击上方的切换语言下拉框切换到英文，就能看到 `label` 属性被替换了，除了 `label` 以外，还可以覆盖其他任意属性，比如将 type 换成其他。\n\n## 扩展内置组件的语言\n\n如果想扩展其他语言，首先参考 `https://github.com/baidu/amis/blob/master/src/locale/en-US.ts` 文件，然后参考后面的示例注册新语言，未翻译的文字都将使用中文。\n\n### JS SDK 扩展方法\n\n\n\n### React 扩展方法\n\n\n","path":"/zh-CN/docs/extend/i18n"},{"title":"工作原理","body":"\n实现自定义类型需要了解 amis 的工作原理。\n\n## 工作原理\n\namis 的渲染过程是将 `json` 转成对应的 React 组件。先通过 `json` 的 type 找到对应的 `Component`，然后把其他属性作为 `props` 传递过去完成渲染。\n\n拿一个表单页面来说，如果用 React 组件开发一般长这样。\n\n\n\n把以上配置方式换成 amis JSON, 则是：\n\n\n\n其实只需要把 json 节点，根据 type 信息自动转成 React Component 即可。\n\n> 原来组件注册是根据节点 path 注册，可以类型相同在不同的上下文中用不同的渲染器去渲染，后来发现这样反而增加了使用成本\n> 所以新版本直接通过 type 类型来注册组件，跟节点所在上下文无关。\n\nPage 组件的示例代码\n\n\n\nForm 组件的示例代码\n\n```jsx\n@Renderer({\n type: 'form'\n // ... 其他信息隐藏了\n})\nexport class FormRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n title,\n body,\n render // 用来渲染孩子节点，如果当前是叶子节点则可以忽略。\n } = this.props;\n return (\n <form className=\"form\">\n {body.map((control, index) => (\n <div className=\"form-item\" key={index}>\n {render(`${index}/control`, control)}\n </div>\n ))}\n </form>\n );\n }\n}\njsx\n@Renderer({\n type: 'input-text'\n // ... 其他信息隐藏了\n})\nexport class FormItemTextRenderer extends React.Component {\n // ... 其他信息隐藏了\n render() {\n const {\n label,\n name,\n onChange\n } = this.props;\n return (\n <div className=\"form-group\">\n <label>{label}<label>\n <input type=\"text\" onChange={(e) => onChange(e.currentTarget.value)} />\n </div>\n );\n }\n}\n```\n\n那么渲染过程就是根据节点 type 信息，跟组件池中的找到对应的组件实现，如果命中，则把当前节点转给对应组件渲染，节点中其他属性将作为目标组件的 props。需要注意的是，如果是容器组件，比如以上例子中的 `page` 组件，从 props 中拿到的 `body` 是一个子节点，由于节点类型是不固定，由使用者决定，所以不能直接完成渲染，所以交给属性中下发的 `render` 方法去完成渲染，`{render('body', body)}`，他的工作就是拿子节点的 type 信息去组件池里面找到对应的渲染器，然后交给对应组件去完成渲染。\n","path":"/zh-CN/docs/extend/internal"},{"title":"移动端展现","body":"\n## 移动端原生 UI\n\n从 1.6.0 版本开始，amis 会默认在移动端下使用仿原生 UI 的展现，比如日期选择会从底部弹出。\n\n由于这个仿原生 UI 是新开发的组件，有些 amis PC 版本的高级配置功能还不支持，比如 select 下的搜索过滤等，如果需要这些功能，可以先通过 props 里的 `useMobileUI` 属性关闭。\n\n方法 1：全局关闭\n\n\n\n方法 2：针对某个组件进行关闭\n\n\n\n## 移动端定制配置\n\n有时候我们需要在移动端下展示不同效果，可以通过 `mobile` 属性来在移动端下覆盖部分属性。\n\n\n\n请点击上方切换到移动端预览效果。\n\n`mobile` 属性可以出现在配置中的任意地方，替换父节点的任意属性，比如前面的例子可以写成放在 `form` 上替换所有 `body`\n\n\n\n> 注意这里对于移动端的判断是根据页面宽度，和 CSS 保持一致，所以即便是在 PC 上，如果页面宽度很小也会切换到 mobile 配置\n","path":"/zh-CN/docs/extend/mobile"},{"title":"页面交互行为跟踪","body":"\n从 1.5.0 版本开始，amis 内置了跟踪用户交互行为采集功能。\n\n## 使用方法\n\namis 只负责采集，对行为的存储和分析都需要外部实现。\n\n在 amis 渲染时的第三个参数 env 可以传递 tracker 函数，下面以 sdk 作为示例，具体实现可以根据实际需求修改，比如可以收集一段时间后再批量提交等。\n\n\n\n## 参数类型\n\neventTrack 的类型定义是\n\n\n\n有时候无法通过 `eventData` 区分点击行为，比如有个两个提交按钮\n\n\n\n当它触发事件的时 `EventTrack` 内容是一样的\n\n\n\n如何区分究竟是哪个事件？可以通过增加 `id` 属性，比如\n\n\n\n这样触发事件中就会包含 `id` 字段来方便区分，比如\n\n\n\n另一个方法是通过 `tracker` 的第二个参数 `props` 来判断，它可以拿到这个组件的所有属性配置\n\n## 事件示例\n\n除了下面的文档，还可以打开浏览器的控制台，在 `debug` 分类下可以看到实际操作时的例子\n\n### api\n\napi 的来源有两方面，一个是各种组件的 api 及 source 配置，另一个是 action 里的 ajax 类型请求\n\n以 crud 为例\n\n\n\n如果是 post 则类似下面的数据\n\n\n\n为了避免信息泄露在 eventData 里没有包含提交数据，要获取提交数据详情需要通过第二个参数，参考下面的例子\n\n\n\n### url\n\n这是打开外部链接事件，注意不要和 link 混淆，link 一般用来做应用内相对地址无刷新跳转\n\n示例\n\n\n\n这个事件有可能是 Link 组件触发，也有可能是 Action 组件触发，如果是 Action 这是类似下面的参数\n\n\n\nAction 组件会多些数据\n\n### link\n\n触发这个事件主要是 Action 和 Nav 组件\n\n如果是 Action，数据将会是\n\n\n\n如果是 Nav，数据将会是\n\n\n\n它们都有 label 及 link 字段\n\n### dialog\n\n这个事件主要由 action 触发，示例\n\n\n\n需要注意 dialog 里会包含所有弹框的 schema 配置，可能会导致提交数据太大，建议根据需求裁剪。\n\n### drawer\n\n这个事件主要由 action 触发，示例\n\n\n\n和前面的 dialog 示例，它的数据中会包含所有 drawer 配置，可能会内容过大，需要根据需求过滤\n\n### copy\n\n由 action 触发，示例如下\n\n\n\n### reload\n\n由 action 触发，示例\n\n\n\n### email\n\n由 action 触发，示例\n\n\n\n### prev/next\n\n可能有两个地方，一个是 Wizard 里的上一步下一步，还有可能是 Dialog 里的上一个下一个，示例\n\n\n\n### cancel\n\naction 里的取消事件，示例\n\n\n\n### close\n\naction 里的关闭事件，主要用于关闭弹框，示例\n\n\n\n### submit\n\n点击提交按钮的事件，这个事件可能还会同时触发 `api` 事件，比如表单的提交按钮。\n\n\n\n### confirm\n\naction 中的事件，主要用于关闭弹框\n\n\n\n### reset\n\n由 action 触发，主要用于重置表单数据，示例\n\n\n\n### reset-and-submit\n\n由 action 触发，会重置表单并提交数据\n\n\n\n### formItemChange\n\n表单项数据变化时，也就是用户在表单里输入和修改任何数据时触发，比如\n\n> 有一个特例是 input-password 类型的字段不会触发这个事件，避免隐私风险\n> 但在 api 中还是有可能包含隐私信息，因此建议前面 api 类的事件不记录数据提交内容\n\n\n\n事件数据里主要是 `name` `type` 和 `value`\n\n需要注意这个事件非常频繁，只要修改内容就会触发。\n\n和 action 类似，如果给表单项加上 `id` 字段也会透传到这里，方便用于区分同名输入框，比如\n\n\n\n### tabChange\n\ntab 切换事件，示例\n\n\n\n默认情况下 `key` 的值从 `0` 开始，如果 tab 上设置了 `hash` 值就会用这个值。\n\n同样，如果 tabs 设置了 id，也会输出这个 id 值方便区分\n\n### pageHidden\n\n当 tab 切换或者页面关闭时触发，可以当成用户离开页面的时间。\n\n### pageVisible\n\n当用户又切换回当前页面的时间，可以当做是用户重新访问的开始时间。\n\n由于 amis 可能被嵌入到页面中，所以 amis 无法知晓页面首次打开的时间，需要自行处理。\n\n### pageLoaded\n\n当Page组件加载完成时触发，可用于收集页面首次打开的时间，需确保当前页面有Page组件。 \n备注: 2.8.0以上版本支持。\n","path":"/zh-CN/docs/extend/tracker"},{"title":"将 amis 当成 UI 库用","body":"\namis 不仅有纯配置的用法，还能当成 UI 库来使用，实现 90% 低代码，10% 代码开发的混合模式，在灵活性上。\n\n> 需要注意以下都需要在配置中写函数，因此不再是纯粹的 JSON，所以暂时不能在可视化编辑器的「代码」模式下使用\n> 从 1.3.0 开始按钮的 onClick 支持字符串格式，因此可以在可视化编辑器中使用\n\n## 事件监听\n\namis 提供了一些交互配置，但有时候这些交互无法满足需求，这时我们可以监听这些事件，然后用代码实现复杂交互需求，比如最常见的是表单事件。\n\n\n\n这个例子中我们监听了 3 个事件，输入框数据变化、表单提交、按钮点击，然后在这些地方使用代码实现特殊功能。\n\n## 监听广播事件\n\n> 3.0.0 以后引入\n\namis 从 1.7.0 版本开始支持了，各个组件内部也陆续补充了很多事件（可以查看每个组件文档的最底下，有事件表说明）。像这类事件也是可以监听的，分为两步来实现：第一步监听组件事件做广播动作、第二步最外层监听广播事件写业务逻辑。\n\n配置 form 事件动作，当表单提交成功后，广播一个 `formSubmited` 事件。\n\n\n\n渲染 amis 的时候通过 `onBroadcast` 监听内部广播。\n\n\n\n## 使用 amis 公共方法\n\namis 对外还提供了一些方法，比如弹出消息通知，可以通过 `amisRequire('amis')` 获取到这些 amis 对外提供的方法。\n\n\n\n具体有哪些可以参考 \n\n## React 中引入 amis 的组件\n\n在 React 环境下使用 amis，还可以直接引入 amis 内置组件，在 amis 项目源码 `src/components` 下的组件都是标准 React 组件，可以在项目中直接引用，这样就能将 amis 当成纯粹 UI 库来使用。\n\n\n","path":"/zh-CN/docs/extend/ui-library"},{"title":"介绍","body":"\n## 什么是 amis\n\namis 是一个低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。\n\n## 为什么要做 amis？\n\n在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 `npm`、`webpack`、`react/vue`，必须熟悉 `ES6` 语法，最好还了解状态管理，比如 `Redux`，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的 ，相关的库有 **2347** 个，很多功能相似，挑选成本高。\n\n然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 `Hooks` 了、某个打包工具取代 `Webpack` 了……\n\n而有时候其实只想做个普通的增删改查界面，用于信息管理，类似下面这种：\n\n\n\n这个界面虽然用 `Bootstrap` 及各种前端 UI 库也能做出个大概，但仔细观察会发现它有大量细节功能，比如：\n\n- 可以对数据做筛选\n- 有按钮可以刷新数据\n- 编辑单行数据\n- 批量修改和删除\n- 按某列排序\n- 可以隐藏某些列\n- 可以调整列顺序\n- 自动生成顶部查询区域\n- 可调整列宽度\n- 开启整页内容拖拽排序\n- 表格有分页（页数还能同步到地址栏，不过这个例子中关了）\n- 有数据汇总\n- 支持导出 Excel\n- 「渲染引擎」那列的表头有提示文字\n- 鼠标移动到「平台」那列的内容时还有放大镜符号，可以展开查看更多\n- 如果往下拖动还有首行冻结来方便查看表头（因为文档页面的限制，这个功能在这里看不出来）\n\n全部实现这些需要大量的代码。\n\n但可以看到，用 amis 只需要 **157** 行 JSON 配置（其中 47 行只有一个括号），你不需要了解 `React/Vue`、`Webpack`，甚至不需要很了解 `JavaScript`，即便没学过 amis 也能猜到大部分配置的作用，只需要简单配置就能完成所有页面开发。\n\n这正是建立 amis 的初衷，我们认为：**对于大部分常用页面，应该使用最简单的方法来实现**，甚至不需要学习前端框架和工具。\n\n## 用 JSON 写页面有什么好处\n\n为了实现用最简单方式来生成大部分页面，amis 的解决方案是基于 来配置，它的独特好处是：\n\n- **不需要懂前端**：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 `JavaScript`，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；\n- **不受前端技术更新的影响**：百度内部最老的 amis 页面是 6 年多前创建的，至今还在使用，而当年的 `Angular/Vue/React` 版本现在都废弃了，当年流行的 `Gulp` 也被 `Webpack` 取代了，如果这些页面不是用 amis，现在的维护成本会很高；\n- **享受 amis 的不断升级**：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；\n- 可以 **完全** 使用 来制作页面：一般前端可视化编辑器只能用来做静态原型，而 amis 可视化编辑器做出的页面是可以直接上线的。\n\n## amis 的其它亮点\n\n- **提供完整的界面解决方案**：其它 UI 框架必须使用 JavaScript 来组装业务逻辑，而 amis 只需 JSON 配置就能完成完整功能开发，包括数据获取、表单提交及验证等功能，做出来的页面不需要经过二次开发就能直接上线；\n- **大量内置组件（120+），一站式解决**：其它 UI 框架大部分都只有最通用的组件，如果遇到一些稍微不常用的组件就得自己找第三方，而这些第三方组件往往在展现和交互上不一致，整合起来效果不好，而 amis 则内置大量组件，包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后台页面开发只需要了解 amis 就足够了；\n- **支持扩展**：除了低代码模式，还可以通过 来扩充组件，实际上 amis 可以当成普通 UI 库来使用，实现 90% 低代码，10% 代码开发的混合模式，既提升了效率，又不失灵活性；\n- **容器支持无限级嵌套**：可以通过嵌套来满足各种布局及展现需求；\n- **经历了长时间的实战考验**：amis 在百度内部得到了广泛使用，**在 6 年多的时间里创建了 5 万页面**，从内容审核到机器管理，从数据分析到模型训练，amis 满足了各种各样的页面需求，最复杂的页面有超过 1 万行 JSON 配置。\n\n## amis 不适合做什么？\n\n使用 JSON 有优点但也有明显缺点，在以下场合并不适合 amis：\n\n- **大量定制 UI**：JSON 配置使得 amis 更适合做有大量常见 UI 组件的页面，但对于面向普通客户（toC）的页面，往往追求个性化的视觉效果，这种情况下用 amis 就不合适，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。\n- **极为复杂或特殊的交互**：\n - 有些复杂的前端功能，比如 可视化编辑器，其中有大量定制的拖拽操作，这种需要依赖原生 DOM 实现的功能无法使用 amis。\n - 但对于某些交互固定的领域，比如图连线，amis 后续会有专门的组件来实现。\n\n## 阅读建议\n\n- 如果你是第一次接触 amis，那么请 **务必认真阅读完概念部分**，它会让你对 amis 有个整体的认识\n- 如果你已经掌握 amis 基本概念，且有一定的开发经验，需要参考 amis 组件相关文档的同学，那么请移步 \n\n## 让我们马上开始吧\n\n点击页面底部的下一篇，继续阅读文档。\n","path":"/zh-CN/docs/index"},{"title":"./docs/zh-CN/start/changelog.md","body":"# 更新记录\n\n请访问 https://github.com/baidu/amis/releases\n","path":"/zh-CN/docs/start/changelog"},{"title":"常见问题","body":"\n## 如何水平垂直居中\n\n1.1.5 版本之后可以使用 flex 布局，默认就是水平垂直居中。\n\n## CRUD 顶部有重叠遮挡\n\n在初始化 amis 渲染器的时候设置 `--affix-offset-top` css 变量设置成合适的值，或者通过 `\"affixHeader\": false` 关闭固定顶部功能。\n\n## 如何换行\n\n有时候返回结果中有 `\\n`，在页面展现的时候默认不会有换行效果，解决办法有 3 个：\n\n1. 使用 tpl、html、plain 或 static 组件，加上 `\"wrapperComponent\": \"pre\"` 配置项\n2. 引入 `helper.css`，给组件加上 `\"classname\": \"white-space-pre\"` 配置项（预计从 1.1.5 开始内置这个类，从而不需要引入 `helper.css`）\n3. 包在 `container` 容器中，使用 `style` 控制样式\n\n前两种方法比较简单，这里就只演示第三种，如果熟悉 css 可以很灵活实现各种展现控制：\n\n\n\n## 如何折行\n\n折行需要给对应的组件加上 `\"classname\": \"word-break\"`。\n\n## 如何实现左侧导航栏页面跳转？\n\n在 1.1.1 之后的版本提供了新的 app 组件，可以基于它实现导航功能，请参考 `https://github.com/aisuda/amis-admin` 项目。\n\n另外 amis 团队还开发了「」，即便完全不懂前端也能基于它开发应用。\n\n## 集成到 React 项目中报错\n\n一般都是因为 React、Mobx、mobx-react 版本有关，参考 amis 项目的 ，将版本保持一致，尤其是 Mobx，目前 amis 中使用的版本是 4，因为兼容性的考虑短期内不会升级到 5/6，使用 MobX 5/6 肯定会报错。\n\n## 有的功能在官网示例中能用，但在 React/SDK 中无法使用\n\n如果提示找不到渲染器，那肯定是版本较老，尝试以下两种方法解决：\n\n1. 使用最新 beta 版本，方法是去 查看最新版本号，比如最新版本是 1.1.2-beta.2\n ，就运行运行 `npm i amis@1.1.2-beta.2` 命令，在 `node_modules/amis/sdk` 目录中也能找到对应的 sdk 代码。\n2. 如果还是报错，可以使用最新代码自动编译的 sdk，下载地址是 `https://github.com/baidu/amis/blob/gh-pages/sdk.tar.gz`\n\n## 如何支持配置中的 URL 地址替换？\n\n> 1.5.0 及以上版本\n\n有个常用场景是在开发时使用 `localhost` 地址，而线上使用 `xxx.com`，这时可以使用 `replaceText` 属性，它是第四个参数，也就是 env 参数\n\n\n\n## 如何更新全局 data？\n\n使用下面的方式\n\n\n\n## CRUD api 分页功能失效\n\n如果 api 地址中有变量，比如 `/api/mock2/sample/${id}`，amis 就不会自动加上分页参数，需要自己加上，改成 `/api/mock2/sample/${id}?page=${page}&perPage=${perPage}`\n\n## CRUD 性能较慢怎么办？\n\n3.4.1 之后版本有个 `lazyRenderAfter` 配置项，默认是 100，可以改小点，延迟渲染不在屏幕中的行\n","path":"/zh-CN/docs/start/faq"},{"title":"快速开始","body":"\namis 有两种使用方法：\n\n- ，可以用在任意页面中\n- ，可以用在 React 项目中\n\nSDK 版本适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，可以像 Vue/jQuery 那样外链代码就能使用。\n\n## SDK\n\n下载方式：\n\n1. github 的 ，文件是 sdk.tar.gz。\n1. 使用 `npm i amis` 来下载，在 `node_modules\\amis\\sdk` 目录里就能找到。\n\n新建一个 hello.html 文件，内容如下：\n\n\n\n### 切换主题\n\njssdk 版本默认使用 `sdk.css` 即云舍主题，如果你想使用仿 Antd，请将 css 引用改成 `antd.css`。同时 js 渲染地方第四个参数传入 `theme` 属性。如：\n\n\n\n> 如果想使用 amis 1.2.2 之前的默认主题，名字是 ang\n\n### 初始值\n\n可以通过 props 里的 data 属性来赋予 amis 顶层数据域的值，类似下面的例子。\n\n> 3.1.0 开始可以传入 context 数据，无论哪层都可以使用到这个里面的数据。适合用来传递一些平台数据。\n\n\n\n### 控制 amis 的行为\n\n`amis.embed` 函数还支持以下配置项来控制 amis 的行为，比如在 fetcher 的时候加入自己的处理逻辑，这些函数参数的说明在后面 React 中也有介绍。\n\n\n\n同时返回的 `amisScoped` 对象可以获取到 amis 渲染的内部信息，它有如下方法：\n\n`getComponentByName(name)` 用于获取渲染出来的组件，比如下面的示例\n\n\n\n可以通过 `amisScoped.getComponentByName('page1.form1').getValues()` 来获取到所有表单的值，需要注意 page 和 form 都需要有 name 属性。\n\n还可以通过 `amisScoped.getComponentByName('page1.form1').setValues({'name1': 'othername'})` 来修改表单中的值。\n\n### 调用 amis 动作\n\n可以通过`amisScoped.doAction(actions, ctx)`来调用 amis 中的通用动作和目标组件的动作。了解事件动作机制可以查看。参数说明如下：\n\n- `actions`：动作列表，支持执行单个或多个动作\n- `ctx`：上下文，它可以为动作配置补充上下文数据，例如下面`toast`动作中`msg`配置中的`${myName}`就来自于补充上下文`ctx`\n\n下面的例子中依次执行了`toast提示`、`ajax请求`、`dialog弹窗`、`给目标组件赋值`动作。\n\n\n\n### 更新属性\n\n可以通过 amisScoped 对象的 updateProps 方法来更新下发到 amis 的属性。\n\n\n\n### 更新配置\n\n可以通过 amisScoped 对象的 udpateSchema 方法来更新更新内容配置。\n\n\n\n### 多页模式\n\n默认 amis 渲染是单页模式，如果想实现多页应用，请使用 。\n\n### Hash 路由\n\n默认 JSSDK 不是 hash 路由，如果你想改成 hash 路由模式，请查看此处代码实现。只需要修改 `env.isCurrentUrl`、`env.jumpTo` 和 `env.updateLocation` 这几个方法，并在路由切换的时候，通过 amisScoped 对象的 `updateProps` 方法，更新 `location` 属性即可。\n\n参考：https://github.com/baidu/amis/blob/master/examples/app/index.jsx\n\n### 销毁\n\n如果是单页应用，在离开当前页面的时候通常需要销毁实例，可以通过 unmount 方法来完成。\n\n\n\n## vue\n\n可以基于 SDK 版本封装成 component 供 vue 使用，具体请参考示例：https://github.com/aisuda/vue2-amis-demo\n\n## react\n\n初始项目请参考 <https://github.com/aisuda/amis-react-starter>。\n\n如果在已有项目中，React 版本需要是 `>=16.8.6`，mobx 需要 `^4.5.0`。\n\namis 1.6.5 及以上版本支持 React 17。\n\n### 安装\n\n\n\n### webpack 配置参考\n\n如果要使用代码编辑器，需要 `monaco-editor-webpack-plugin` 插件\n\n\n\n### 主题样式\n\n目前主要支持两个主题：`cxd（云舍）` 和 `antd（仿 Antd）`\n\n1. 引入样式文件：\n\nhtml 中引入：\n\n\n\njs 中引入：\n\n\n\n> 上面只是示例，请根据自己的项目结构调整引用路径\n> 如果要支持 IE 11 请引入 amis/sdk/cxd-ie11.css，但这样就没法支持 CSS 变量了\n\n2. 渲染器使用配置主题\n\n\n\n### 使用指南\n\n可以在 React Component 这么使用（TypeScript）。\n\n1. 安装部分示例需要的插件库\n\n\n\n> 为了方便示例，上面选用了我们常用几个插件库，你完全可以选择自己喜欢的插件并重新实现\n\n2. 代码实现（React Typescript）\n\n\n\nrender 有三个参数，后面会详细说明这三个参数内的属性\n\n\n\n### schema\n\n即页面配置，请前往 了解\n\n### props\n\n一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：\n\n\n\n这样，内部所有组件都能拿到 `username` 这个变量的值。当然，这里的 key 并不一定必须是 data , 你也可以是其它 key，但必须配合 schema 中的 `detectField` 属性一起使用。 如：\n\n\n\n### env\n\n环境变量，可以理解为这个渲染器工具的配置项，需要使用 amis 用户实现部分接口。他有下面若干参数：\n\n#### fetcher（必须实现）\n\n接口请求器，实现该函数才可以实现 ajax 发送，函数签名如下：\n\n\n\n> 你可以使用任何你喜欢的 ajax 请求库来实现这个接口\n\n#### notify\n\n\n\n用来实现消息提示。\n\n#### alert\n\n\n\n用来实现警告提示。\n\n#### confirm\n\n\n\n用来实现确认框。返回 boolean 值\n\n#### jumpTo\n\n\n\n用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。\n\n#### updateLocation\n\n\n\n地址替换，跟 jumpTo 类似。\n\n#### blockRouting\n\n设置阻止路由跳转的钩子函数，用来实现 form 未保存提前离开时出现确认框。\n\n\n\n#### theme: string\n\n目前支持是三种主题：`default`、`cxd` 和 `dark`\n\n#### isCurrentUrl\n\n\n\n判断目标地址是否为当前页面。\n\n#### copy\n\n\n\n用来实现内容复制，其中 `format` 可以为 text/html，或 text/plain\n\n#### tracker\n\n用户行为跟踪，请参考\n\n#### session\n\n默认为 'global'，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。\n\n#### getModalContainer\n\n\n\n用来决定弹框容器。\n\n#### loadRenderer\n\n\n\n可以通过它懒加载自定义组件，比如： https://github.com/baidu/amis/blob/master/packages/amis-core/__tests__/factory.test.tsx#L64-L91。\n\n#### affixOffsetTop: number\n\n固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。\n\n> 3.5.0 及以上版本请直接通过外层设置 `--affix-offset-top` css 变量。\n\n#### affixOffsetBottom: number\n\n固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。\n\n> 3.5.0 及以上版本请直接通过外层设置 `--affix-offset-bottom` css 变量。\n\n#### richTextToken: string\n\n内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者用免费的 Tinymce，不设置 token 默认就是 Tinymce。\n\n#### hideValidateFailedDetail: boolean\n\nForm 表单验证失败时在 notify 消息提示中是否隐藏详细信息，默认展示，设置为 true 时隐藏\n\n#### replaceText\n\n> 1.5.0 及以上版本\n\n可以用来实现变量替换及多语言功能，比如下面的例子\n\n\n\n它会替换 `api` 里的 `service` 字符串\n\n#### replaceTextIgnoreKeys\n\n> 1.5.0 及以上版本\n\n和前面的 `replaceText` 配合使用，某些字段会禁用文本替换，默认有以下：\n\n\n\n如果发现有字段被意外替换了，可以通过设置这个属性来避免\n\n通过字符串数组或者函数来过滤字段，比如：\n\n\n\n#### toastPosition\n\nToast 提示弹出位置，默认为`'top-center'`。\n支持的属性值有：\n\n\n\n#### loadChartExtends\n\n可以用来加载 echarts 插件，首次加载 echarts 完毕后调用，支持异步返回一个 promise 即可。\n\n#### loadTinymcePlugin\n\n可以用来加载 tinymce 插件，每次渲染 tinymce 的时候执行，可以用来加载 tinymce 插件。\n","path":"/zh-CN/docs/start/getting-started"},{"title":"CSS 变量","body":"\n目前示例中包含了一个，可以在线实时预览效果。\n\n要想使用 CSS 变量就必须知道某个组件都用到了哪些变量，目前最完善的方式是用 Chrome 开发者工具。\n\n不过如果你不知道如何使用，本文将会介绍一些常用的 CSS 变量，掌握他们也能完成大部分定制工作。\n\n## 基础颜色\n\n| 变量 | 类型 | 说明 |\n| -------------------- | ---- | ------------------------------ |\n| --black | 颜色 | 黑色颜色 |\n| --white | 颜色 | 白色颜色 |\n| --light | 颜色 | 最浅的颜色 |\n| --dark | 颜色 | 最深的颜色 |\n| --body-bg | 颜色 | 全局背景色 |\n| --background | 颜色 | table 等背景色 |\n| --primary | 颜色 | 主颜色，会影响主按钮颜色 |\n| --primary-onHover | 颜色 | 主颜色在鼠标移上去后的颜色 |\n| --primary-onActive | 颜色 | 主颜色在激活时的颜色，比如选中 |\n| --secondary | 颜色 | 次颜色，比如第二个按钮的颜色 |\n| --secondary-onHover | 颜色 | 次颜色在鼠标移上去后的颜色 |\n| --secondary-onActive | 颜色 | 次颜色在激活时的颜色 |\n| --success | 颜色 | 成功时的颜色 |\n| --success-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --success-onActive | 颜色 | 在激活时的颜色 |\n| --info | 颜色 | 显示信息的颜色，一般是蓝色 |\n| --info-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --info-onActive | 颜色 | 在激活时的颜色 |\n| --warning | 颜色 | 警告的颜色 |\n| --warning-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --warning-onActive | 颜色 | 在激活时的颜色 |\n| --danger | 颜色 | 错误的颜色 |\n| --danger-onHover | 颜色 | 在鼠标移上去后的颜色 |\n| --danger-onActive | 颜色 | 在激活时的颜色 |\n\n## 字体相关\n\n| 变量 | 类型 | 说明 |\n| --------------------- | -------- | ----------------------- |\n| --text-color | 颜色 | 文字颜色 |\n| --text--muted-color | 颜色 | 文字置灰时的颜色 |\n| --text--loud-color | 颜色 | 一般用于标题文字颜色 |\n| --button-color | 颜色 | 按钮文字颜色 |\n| --fontFamilyBase | 字体家族 | 基础字体家族 |\n| --fontFamilyMonospace | 字体家族 | 等宽字体家族 |\n| --fontSizeBase | 大小 | 基础字体大小，默认 14px |\n| --fontSizeMd | 大小 | 中等字体大小 |\n| --fontSizeLg | 大小 | 大字体大小 |\n| --fontSizeXl | 大小 | 最大字体大小 |\n| --fontSizeSm | 大小 | 小字体大小 |\n| --fontSizeXs | 大小 | 最小的字体大小 |\n| --lineHeightBase | 大小 | 基础行高 |\n\n## 边框相关\n\n| 变量 | 类型 | 说明 |\n| -------------- | ---- | ------------ |\n| --borderColor | 颜色 | 边框颜色 |\n| --borderRadius | 大小 | 默认边框圆角 |\n\n## 链接相关\n\n| 变量 | 类型 | 说明 |\n| ------------------------- | --------------- | ---------------------------------- |\n| --link-color | 颜色 | 链接颜色，默认用 --primary |\n| --link-decoration | text-decoration | 可以控制是否显示下划线 |\n| --link-onHover-color | 颜色 | 链接在鼠标移上去之后的颜色 |\n| --link-onHover-decoration | text-decoration | 可以控制鼠标移上去后是否显示下划线 |\n\n## 动画\n\n| 变量 | 类型 | 说明 |\n| -------------------- | ---- | ------------------------------------------------ |\n| --animation-duration | 时长 | 动画效果时长，默认 0.1s，可以设置为 0 来关闭动画 |\n\n## 图片\n\n| 变量 | 类型 | 说明 |\n| ------------ | ---------- | ---------------------------------- |\n| --Spinner-bg | background | 加载时的图片 url('data:image/...') |\n","path":"/zh-CN/style/css-vars"},{"title":"快速开始","body":"\n示例有个，可以在线实时预览效果。\n\n> 这是 1.1.0 版本中新增的功能\n\n在 amis 中自定义样式有四种方式：\n\n1. 使用 CSS 变量动态修改，通过这种方式修改大部分 amis 组件的样式，所有组件都会生效，注意这种方法不支持 IE11。\n2. 使用辅助 class，可以对单个组件做定制修改。\n3. 自己生成主题 CSS，可以修改所有配置，目前只能通过源码方式，请参考 `scss\\themes\\cxd.scss` 文件，修改变量后重新编译一个 css，需要注意这种方式在更新 amis 版本的时候最好重新编译，否则就会出现使用旧版 css 的情况，可能导致出错，因此不推荐使用。\n4. `wrapper` 组件可以直接写内嵌 `style`。\n\n本文主要介绍前两种方法：\n\n## CSS 变量\n\n在 page 下可以设置 cssVars 属性，通过它来动态修改 amis 内的 css 变量。\n\n\n\n具体有哪些变量请参考左侧的 说明。\n\n## 辅助 class\n\n辅助 class 参考自, 做了精简，把一些不常用的剔除了，响应式方面只保留 pc 和手机两种，css 未压缩版本大概是 800K 左右，比 tailwind 要小很多。\n\n使用方法：\n\n- JS SDK\n - 引入 sdk 中的文件 `<link rel=\"stylesheet\" href=\"sdk/helper.css\" />`\n- React\n - `import 'amis/lib/helper.css'`;\n\n目前这个文件没有和主题文件合并在一起，用户可以选择性加载。\n\n大部分 amis 组件都有 `className` 或者 `xxxClassName` 的配置，比如下面的配置给表单增加了边框、圆角和阴影\n\n\n\n还可以：\n\n- 通过 `flex` `flex-shrink-0` 来设置布局方式。\n- 通过 `bg-blue-100` `bg-white` 之类的类名设置背景色。\n- 通过 `shadow-md` 设置投影。\n- 通过 `rounded-xl` 设置圆角。\n- 通过 `text-xl`、`font-medium` 设置字体大小粗细。\n- 等等。。\n\n具体用法请查看左边的文档列表。\n","path":"/zh-CN/style/index"},{"title":"辅助类 - 响应式设计","body":"\n响应式设计目前只支持 pc 端和手机端，其他设备目前不支持，貌似也没必要支持。当什么前缀都不加时，就是给所有视图模式添加样式，包括移动端和 pc 端。如果你在 css 类名前面再加个 `m:` 前缀，就是专门给手机端设置样式。如果你在类名前面加个 `pc:` 前缀，则是给桌面端设置样式。\n\n\n","path":"/zh-CN/style/responsive-design"},{"title":"辅助类 - 状态样式","body":"\n除了给默认状态设置样式外，还支持几个特定状态的样式设置比如：hover（鼠标悬停）、active（当前选中）、focus（当前聚焦）或者 disabled（当前不可用）。\n\n\n\n## Hover\n\n在 css 类名前面添加 `hover:` 表示在 hover 时启用这个样式比如。\n\n\n\n## Group-Hover\n\n当 hover 某个元素的时候，你想要给子元素设置不同的样式，需要两步操作。\n\n1. 给容器添加 `group` 类名。\n2. 给子元素添加 `group-hover:` 前缀形式的样式类。\n\n\n\n## Focus\n\n当要给元素设置「聚焦态」样式时，类名添加 `focus:` 前缀。\n\n\n\n## Active\n\n当要给元素设置「选中态」样式时，类名添加 `active:` 前缀。\n\n\n\n## Disabled\n\n当要给元素设置「禁用态」样式时，类名添加 `disabled:` 前缀。\n\n\n\n## 结合响应式设计一起？\n\n那就先加「设备前缀」，再加「状态前缀」。如：`pc:hover:bg-pink-500`、`m:hover:bg-blue-500`\n\n\n","path":"/zh-CN/style/state"},{"title":"API","body":"\nAPI 类型用于配置请求接口的格式，涉及请求方式、请求地址、请求数据体等等相关配置\n\n## 简单配置\n\n如果你只需要配置简单的 ajax 接口，可以使用简单字符串格式，如下：\n\n\n\n- **method**：get、post、put、delete，默认为 get\n- **url**：接口地址，即模板字符串\n\n示例：\n\n\n\n## 接口返回格式（重要）\n\n所有配置在 amis 组件中的接口，都要符合下面的返回格式\n\n\n\n- **status**: 返回 `0`，表示当前接口正确返回，否则按错误请求处理；\n- **msg**: 返回接口处理信息，主要用于表单提交或请求失败时的 `toast` 显示；\n- **data**: 必须返回一个具有 `key-value` 结构的对象。\n\n**`status`**、**`msg`** 和 **`data`** 字段为接口返回的必要字段。\n\n> 1.1.7\n\n为了方便更多场景使用，还兼容了以下这些错误返回格式：\n\n1. errorCode 作为 status、errorMessage 作为 msg\n2. errno 作为 status、errmsg/errstr 作为 msg\n3. error 作为 status、errmsg 作为 msg\n4. error.code 作为 status、error.message 作为 msg\n5. message 作为 msg\n\n### 正确的格式\n\n\n\n### 错误的格式\n\n直接返回字符串或者数组都是不推荐的\n\n\n\n### 兼容格式\n\n> 1.0.19 及以上版本。\n\n为了支持多种后端，amis 支持直接返回数据的方式，无需返回 status 和将数据放在 data 字段中，比如下面的例子：\n\n\n\n但这种方式无法显示错误信息，只能通过返回 http 状态码来标识错误。\n\n### 配置弹框时间\n\n可以通过 `msgTimeout` 控制弹框时间，它的时间是毫秒\n\n\n\n## 复杂配置\n\nAPI 还支持配置对象类型\n\n### 基本用法\n\n\n\n### 配置请求方式\n\n可以配置`method`指定接口的请求方式，支持：`get`、`post`、`put`、`delete`、`patch`。\n\n> `method`值留空时：\n>\n> - 在初始化接口中，默认为`get`请求\n> - 在`form`提交接口，默认为`post`请求\n\n### 配置请求地址\n\n可以配置`url`指定接口请求地址，支持。\n\n### 配置请求数据\n\n可以配置`data`，配置自定义接口请求数据体。\n\n\n\n支持\n\n> 当`method`配置为`get`时，`data`中的值默认会添加到请求路径中\n\n需要注意一下，配置了数据发送，默认如果值是 `undefined` 也会作为空字符发送，比如以上这个例子直接提交会发送, name 和 email 两个字段，值分别为空字符。由于历史原因这个已经不能再修改了。如果你想实现没有填写的值不发送，则需要配置成。\n\n\n\n这样 `undefined` 的值不会发送了。\n\n### 不处理 key 中的路径\n\n> since 1.5.0\n\n默认请求数据体中配置 key，如果带路径会自动转成对象如：\n\n\n\n最终发送出去的数据格式为\n\n\n\n如果数据映射中的 key 不想被处理路径则需要配置 `convertKeyToPath` 为 false 如：\n\n\n\n这样发送的数据格式为\n\n\n\n### 配置请求数据格式\n\n可以配置`dataType`，来指定请求的数据体格式，默认为`json`\n\n> 下面例子中 api 没有配置`data`属性，因为`form`会默认将所有表单项的值进行提交。\n\n#### application/json\n\n默认是`application/json`，不需要额外配置。\n\n> 注意：当数据域里的 key 为 `&` 且值为 `$$` 时, 将所有原始数据打平设置到 `data` 中.\n\n\n\n#### application/x-www-form-urlencoded\n\n配置`\"dataType\": \"form\"`，可配置发送体格式为`application/x-www-form-urlencoded`\n\n\n\n#### multipart/form-data\n\n配置`\"dataType\": \"form-data\"`，可配置发送体格式为`multipart/form-data`\n\n\n\n当表单项中文件类型数据，则自动使用`multipart/form-data`数据体\n\n\n\n> `asBlob`配置项会指定当前 File 控件不再自己上传了，而是直接把文件数据作为表单项的值，文件内容会在 Form 表单提交的接口里面一起带上。\n\n### 配置自定义请求头\n\n可以配置`headers`对象，添加自定义请求头\n\n\n\n### 配置请求条件\n\n可以配置表达式`sendOn`来实现：当符合某个条件的情况下，接口才触发请求\n\n\n\n查看 **选项 2** 的`source`属性，他是 API 类型值，支持配置`sendOn` ，实现根据条件请求接口。\n\n### 配置接口缓存\n\n当你在某种情况下，需要非常频繁的请求同一个接口，例如列表中，每一行中都有一个 Service 进行数据拉取操作，\n\n\n\n如上，如果你打开浏览器网络面板，会发现`/api/mock2/page/initData`接口将重复请求多次，次数为你当前列表的数据条数。\n\n这往往并不理想，你可以设置`cache`来设置缓存时间，单位是毫秒，在设置的缓存时间内，同样的请求将不会重复发起，而是会获取缓存好的请求响应数据。\n\n\n\n这下我们再打开网络面板，发现只有一条请求了\n\n### 配置返回数据\n\n如果接口返回的数据结构不符合预期，可以通过配置 `responseData`来修改，同样支持，可用来映射的数据为接口的实际数据（接口返回的 `data` 部分），额外加 `api` 变量。其中 `api.query` 为接口发送的 query 参数，`api.body` 为接口发送的内容体原始数据。\n\n> 注意：当数据域里的 key 为 `&` 且值为 `$$` 时, 表示将所有原始数据打平设置到 `data` 中.\n\n\n\n假如接口实际返回为：\n\n\n\n经过映射，给组件的数据为：\n\n\n\n另一个常用示例是 `\"type\": \"select\"` 的 `source` 数据源，如果接口返回的是：\n\n\n\n而 select 所需的数据格式是 `[{\"label\": \"lab\", \"value\": 1}]`，如何进行映射？\n\n方法是\n\n\n\n需要注意上面例子中 `items` 是因为数据直接放在了 `data` 中，如果是放在其他字段中就换成对应的字段名。\n\n### 配置请求适配器\n\namis 的 API 配置，如果无法配置出你想要的请求结构，那么可以配置`requestAdaptor`发送适配器\n\n**发送适配器** 是指在接口请求前，对请求进行一些自定义处理，例如修改发送数据体、添加请求头、等等，基本用法是，获取暴露的`api`参数，并且对该参数进行一些修改，并`return`出去：\n\n##### 暴露的参数\n\n发送适配器暴露以下参数以供用户进行操作:\n\n- **api**：当前请求的 api 对象，一般包含下面几个属性：\n - url：当前接口 Api 地址\n - method：当前请求的方式\n - data：请求的数据体, 注意当请求方式为 `get` 时，`data` 在传入适配器时会被删除，请通过 query 读取，或者修改\n - query：请求的查询参数，所有请求参数都会被合并到 query 中，包含 data 参数和 url 参数\n - headers：请求的头部信息\n - context: 发送请求时的上下文数据\n- **context** 发送请求时的上下文数据\n\n> 6.5.0 版本开始支持在发送适配中修改 query 参数，之前的版本只能修改 url 参数。\n\n##### 字符串形式\n\n如果在 JSON 文件中配置的话，`requestAdaptor`只支持字符串形式。\n\n用法示例：\n\n\n\n上例中的适配器实际上是如下代码的字符串形式：\n\n\n\n字符串形式的适配器代码最后会自动包裹成函数，你只需要补充内部的函数实现，并将修改好的 `api` 对象 `return` 出去：\n\n\n\n##### 函数形式\n\n如果你的使用环境为 js 文件，则可以直接传入函数，如下：\n\n\n\n上面例子中，我们获取暴露的`api`对象中的`data`变量，并且为其添加了一个新的字段`foo`，并且一起返回出去就可以了，这样我们的请求数据体中就会加上我们这个新的字段。\n\n你也可以使用`debugger`自行进行调试。\n\n#### 拦截请求\n\n如果 api 发送适配器中，修改 api 对象，在 api 对象里面放入 `mockResponse` 属性，则会拦截请求发送，amis 内部会直接使用 `mockResponse` 的结果返回。\n\n\n\n### 配置接收适配器\n\n同样的，如果后端返回的响应结构不符合 amis 的，而后端不方便调整时，可以配置`adaptor`实现接收适配器\n\n**接收适配器** 是指在接口请求后，对响应进行一些自定义处理，例如修改响应的数据结构、修改响应的数据等等。\n\n例如：接口正确返回的格式中，会返回`\"code\": 200`，而 amis 中，接口返回格式需要`\"status\": 0`，这时候就需要接收适配器进行调整结构。\n\n##### 暴露的参数\n\n接收适配器器暴露以下参数以供用户进行操作:\n\n- **payload**：当前请求的响应 payload，即 response.data\n- **response**：当前请求的原始响应\n- **api**：api 上的配置项，还可以通过 `api.data` 获得数据域里的内容\n- **context** 发送请求时的上下文数据\n\n##### 字符串形式\n\n如果在 JSON 文件中配置的话，`adaptor`只支持字符串形式。\n\n用法示例：\n\n\n\n上例中的适配器实际上是如下代码的字符串形式：\n\n\n\n字符串形式的适配器代码最后会自动包裹成函数，你只需要补充内部的函数实现，并将修改好的 `payload` 对象 `return` 出去：\n\n\n\n##### 函数形式\n\n如果你的使用环境为 js 文件，则可以直接传入函数，如下：\n\n\n\n### 配置文件下载\n\n如果 API 返回的是文件下载，需要加上这个配置：\n\n\n\n比如点一个按钮下载的完整示例是：\n\n\n\n还需要在这个 `/api` 返回的 header 中配置 `content-type` 和 `Content-Disposition`，比如\n\n\n\n如果只有 `Content-Type`，比如 Excel 的 `application/vnd.openxmlformats-officedocument.spreadsheetml.sheet`，则应该使用的方式来实现下载。\n\n如果是跨域请求，还需要配置\n\n\n\n如果自己覆盖了 `fetcher` 函数，需要有类似如下代码，具体可以参考 `embed.tsx` 里的实现\n\n\n\n### 配置提示信息\n\n可以通过`messages`自定义接口请求提示信息。\n\n\n\n### replaceData\n\n返回的数据是否替换掉当前的数据，默认为 `false`（即追加），设置为`true`就是完全替换当前数据。\n\n## 自动刷新\n\n凡是拉取类接口，默认都会开启自动刷新，比如 form 配置 initApi: `/api/initForm?tpl=${tpl}`。这个接口会在 form 初始化的请求。当接口中有参数时，amis 会监控这个接口的实际结果是否有变化，假如这个时候 form 里面有个字段名为 tpl 的表单项，它的值发生变化，这个 form 的 initApi 又会请求一次。\n\n\n\n这个功能是自动开启的，直接配置 api 地址（`/api/xxx?xx=${xxx}`），或者对象形式配置 `{method: 'get', url: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/xxx?xx=${xxx}'}` 都会自动启动这个功能。如果想要关闭这个功能，有两种方式。\n\n1. 把依赖的数据写在对象形式的 data 里面比如 `{method: 'get', url: 'https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/xxx', data: {'xx': \"${xxx}\"}}`。\n2. 对象形式添加 `autoRefresh: false` 属性。\n\n【重点】利用这个 feature 结合 `sendOn` 接口发送条件，可以做到接口的串行加载。比如，接口 2 的地址上写上接口 1 会返回的某个字段，然后配置接口 2 的发送条件为这个字段必须存在时。这样接口 2 就会等接口 1 完了才会加载。\n\n## 跟踪数据自动刷新\n\n> since 1.1.6\n\n之前的版本，配置的 api 默认就会具备自动刷新功能，除非显式的配置 `autoRefresh: false` 来关闭。自动刷新主要通过跟踪 api 的 url 属性来完成的，如果 url 中了使用了某个变量，而这个变量发生变化则会触发自动刷新。\n也就说这个 url 地址，既能控制 api 请求的 query 参数，同时又起到跟踪变量重新刷新接口的作用。这个设定大部分情况下都是合理的，但是有时候想要跟踪 url 参数以外的变量就做不到了。所以新增了此属性 `trackExpression`，显式的配置需要跟踪的变量如：\n\n> 如果`trackExpression` 追踪的数据是**对象数据**，可以使用的`json`方法将数据序列化之后再比较，例如`\"trackExpression\": \"${fieldToTrack|json}\"`\n\n\n\n## GraphQL\n\n1.7.0 及之前的版本需要通过配置 `data` 里的 `query` 和 `variables` 字段可以实现 GraphQL 查询\n\n\n\n1.8.0 及以上版本简化了 GraphQL 的支持，增加了 `graphql` 属性，如果配置了就会自动并自动将 data 当成 `variables`，上面的例子可以简化为下面的写法，除了简化之外还方便了可视化编辑器编辑\n\n\n\n如果设置了 `data` 会被当成 `variables`，比如在 CRUD 里设置分页参数，比如下面的例子\n\n\n\n## 属性表\n\n| 字段名 | 说明 | 类型 | 备注 |\n| --------------- | ------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| method | 请求方式 | 字符串 | 支持：get、post、put、delete |\n| url | 请求地址 | | - |\n| data | 请求数据 | 对象或字符串 | 支持数据映射 |\n| dataType | 数据体格式 | 字符串 | 默认为 `json` 可以配置成 `form` 或者 `form-data`。当 `data` 中包含文件时，自动会采用 `form-data（multipart/form-data）` 格式。当配置为 `form` 时为 `application/x-www-form-urlencoded` 格式。 |\n| qsOptions | -- | 对象或字符串 | 当 dataType 为 form 或者 form-data 的时候有用。具体参数请参考这里，默认设置为: `{ arrayFormat: 'indices', encodeValuesOnly: true }` |\n| headers | 请求头 | 对象 | - |\n| sendOn | 请求条件 | | - |\n| cache | 接口缓存时间 | 整型数字 | - |\n| requestAdaptor | 发送适配器 | 字符串 | ，支持字符串串格式，或者直接就是函数如： |\n| adaptor | 接收适配器 | 字符串 | 如果接口返回不符合要求，可以通过配置一个适配器来处理成 amis 需要的。同样支持 Function 或者 字符串函数体格式 |\n| replaceData | 替换当前数据 | 布尔 | 返回的数据是否替换掉当前的数据，默认为 `false`，即：`追加`，设置成 `true` 就是完全替换。 |\n| responseType | 返回类型 | 字符串 | 如果是下载需要设置为 'blob' |\n| autoRefresh | 是否自动刷新 | 布尔 | 配置是否需要自动刷新接口。 |\n| responseData | 配置返回数据 | 对象 | 对返回结果做个映射 |\n| trackExpression | 跟踪变量 | 字符串 | 配置跟踪变量表达式 |\n| messages | 提示信息 | 对象 | 配置接口请求的提示信息，messages.success 表示请求成功提示信息、messages.failed 表示请求失败提示信息，2.4.1 及以上版本 |\n","path":"/zh-CN/docs/types/api"},{"title":"ClassName","body":"\namis 中大部分的组件都支持配置 className 和 xxxClassName，他可以用来配置组件 dom 上的 css 类名，可以结合帮助类 css 来定制一些样式。具体帮助类 css 请前往。\n\n配置方式有两种：\n\n1. 直接配置字符串如：`className: \"text-danger\"` 文字标红。\n2. 采用对象配置，这个用法主要是方便写表达式如：`className: {\"text-danger\": \"${status == 1}\"}` 表示当数据 status 状态是 1 时，文字飘红。\n\n> 注意 3.5 版本开始类名中支持表达式如: `text-${status == 1 ? 'danger' : 'success'}`\n\n\n","path":"/zh-CN/docs/types/classname"},{"title":"Definitions","body":"\n`Definitions`建立当前页面公共的配置项，在其他组件中可以通过`$ref`来引用当前配置项中的内容。\n\n> 注意 definitions 只能在顶级节点中定义。\n\n\n\n## 树形结构\n\n`Definitions` 最大的作用其实是能够实现对数据格式的递归引用，实现无限层级编辑：\n\n\n","path":"/zh-CN/docs/types/definitions"},{"title":"SchemaNode","body":"\nSchemaNode 是指每一个 amis 配置节点的类型，支持`模板`、`Schema（配置）`以及`SchemaArray（配置数组）`三种类型\n\n## 模板\n\n\n\n上例中的`body`属性所配置的属性值`\"Hello ${text}!\"`就是一个模板\n\n更多使用说明见 \n\n## Schema 配置\n\n`Schema`，即**组件的 JSON 配置**\n\n**它至少需要一个`type`字段，用以标识当前`Schema`的类型。**\n\n\n\n`type`, `data`, `body`这三个字段组成的`JSON`对象，便是一个`Schema`，它由`type`字段作为标识，指明当前 `Schema` 是 `Page`组件节点\n\n而通过查看 可知，`body`属性类型是`SchemaNode`，即可以在`body`中，嵌套配置其他组件。我们在这里，用`type`和`tpl` JSON 对象，配置了 `Tpl` 组件，渲染了一段模板字符串。\n\n> amis 可以通过该方法，在`Schema`中嵌套配置其他`SchemaNode`，从而搭建非常复杂的页面应用。\n\n### 配置显隐\n\n所有的`Schema`类型都可以通过配置`visible`或`hidden`，`visibleOn`或`hiddenOn`来控制组件的显隐，下面是两种方式\n\n##### 静态配置\n\n通过配置`\"hidden\": true`或者`\"visible\": false`来隐藏组件\n\n\n\n下面那个表单被隐藏了。\n\n##### 通过条件配置显隐\n\n你也通过 配置`hiddenOn`，来实现在某个条件下禁用当前组件.\n\n\n\n为了方便说明，我们在 form 中演示了条件显隐，实际上，只要当前数据域中数据有变化，都可以实现组件显隐\n\n> `visible`和`hidden`，`visibleOn`和`hiddenOn`除了判断逻辑相反以外，没有任何区别\n\n## SchemaArray 配置数组\n\n明白了何为`Schema`之后，你就会很轻松理解`SchemaArray`，它其实就是支持通过数组配置`Schema`，从而在某一节点层级下，配置多个组件\n\n\n\n非常容易看出来，我们给`body`属性，配置了数组结构的`Schema`，从而实现在`body`下，渲染两个`tpl`，来输入两段文字的效果\n","path":"/zh-CN/docs/types/schemanode"}]} |