工作中用到的amis组件以及使用方法

基础介绍

为什么要用amis？

因为公司叫我用

emmm，但用下来发现真的很好用，百度之前也在用这个框架搭页面，搭了7，8年了，没出过bug，而且使用简单，我只是有1，2年的工作经验，用着很舒服，就算没有工作经验，上手也快的

至于amis的包的引用以及安装，可以去看官网，这里就展示常见的组件以及主要使用的属性字段

amis版本的hello world！

{
  "type": "page",
  "body": "hello world!"
}

以上的代码就能生成一个页面，并且body部分就会生成一句话，hello world！

type 这个字段非常重要，指明了我需要渲染的是什么组件，我一般都放第一句，如果不放的话会报错

body 字段也是非常重要的，表明了，这个组件的组成部分是什么，可以嵌套，一般是直接跟{},也可以跟[{},{}]，例如下面的例子

代码一

{
  "type": "page",//指定组件类型
  "body": {
    "type": "form",//指定为form表单
    "title": "我是标题",//表单的标题
    "mode": "horizontal",//表单的展开模式，此为横向，纵向为normal
    "columnCount": 2,//表单项占的列数
    "actions": [//表单的底部按钮的集合，代码二会展示多个按钮怎么写
      {
        "type": "button",//组件类型为按钮
        "label": "登录",//按钮文字
        "level": "primary"//按钮类型，此为蓝色，还有其它的例如danger，info，success等
      }
    ],
    "body":{
      "type": "input-text",//表单的主题内容，此组件为input的文字输入框
      "label": "姓名：",//input输入框的标题
      "placeholder": "请填写姓名"//input输入框没有内容时的占位符
    }
  }
}

效果一：

代码二

{
  "type": "page",
  "body": {
    "type": "form",
    "title": "我是标题",
    "mode": "horizontal",
    "columnCount": 2,
    "actions": [
      {
        "type": "button",
        "label": "登录",
        "level": "primary"
      },
      {
        "type": "button",
        "label": "退出",
        "level": "danger"
      }
    ],
    "body": [
      {
        "type": "input-text",
        "label": "姓名：",
        "placeholder": "请填写姓名"
      },
      {
        "type": "input-password",
        "label": "密码：",
        "placeholder": "请输入密码"
      }
    ]
  }
}

效果二：

数据域的初始化

怎么通过接口获取数据呢？获取之后怎么渲染在页面上呢？

添加初始化接口,使用${}取值语法渲染

 "initApi": {
             "url": "news_preserve_list"
               }

取得的接口数据如下

{
  "total": 11,
  "items": [
    {
      "remark": "2222",
      "enable": true,
      "type": "煤机新闻",
      "title": "12",
      "objectId": "65698e3a6aa58e39d93a8071",
      "createdAt": "2023-12-01 15:41:46",
      "updatedAt": "2023-12-01T07:41:46.442Z"
    },
    {
      "remark": "8",
      "enable": true,
      "type": "商务公告",
      "title": "8",
      "objectId": "65698e076aa58e39d93a7fb7",
      "createdAt": "2023-12-01 15:40:55",
      "updatedAt": "2023-12-01T07:40:55.351Z"
    },
    {
      "remark": "备注7",
      "enable": true,
      "type": "煤机新闻",
      "title": "我是标题7",
      "objectId": "65698df16aa58e39d93a7f5d",
      "createdAt": "2023-12-01 15:40:33",
      "updatedAt": "2023-12-01T07:40:33.779Z"
    }
  ]
}

如果是crud组件的话，可以使用name自动获取数据，如果不是的话，可以使用${}取值，给大家举一个稍微完整点的例子

{
  "type": "crud",//组件类型为crud
  "syncLocation": false,//是否将过滤条件的参数同步到地址栏上
  "footerToolbar": [//页脚的按钮
    "switch-per-page",//选择每页的页数
    "pagination"//分页器
  ],
  "api": {
    "url": "/CustomApi/get_api_data?api_key=news_preserve_list",//接口地址
    "method": "post",//请求方式
    "data": {
      "&": "$$"//携带的数据，这里是全部携带的意思
    }
  },
  "filter": {//过滤器，可以实现条件搜索
    "title": "条件搜索",//标题
    "columnCount": 2,//分成几列
    "mode": "horizontal",//横向展开模式
    "size": "md",//大小为中等
    "body": [
      {
        "type": "input-text",
        "label": "标题",
        "name": "title"
      }
    ]
  },
  "columns": [//每一列的表头，name属性很重要，可以自动去寻找数组的对象里面的属性值并且自动填上，每行数据都自动生成一个objectId，点击编辑或者详情或者删除的时候，会自动拿到，就要把这个objectId传过去，后端才知道要操作哪一行数据
    {
      "name": "title",
      "label": "标题",
      "width": "20%"
    },
    {
      "name": "type",
      "label": "类别",
      "width": "20%"
    },
    {
      "name": "remark",
      "label": "备注",
      "width": "30%"
    },
    {
      "type": "operation",//关于操作这行数据的按钮，都写在这里
      "label": "操作",
      "width": "30%",
      "buttons": [
        {
          "label": "编辑",
          "type": "button",
          "level": "default",
          "actionType": "dialog",//这行意思为点击的时候会打开一个弹出框
          "disabled": false,
          "dialog": {//之后就是设置该弹出框的内容
            "title": "编辑",
            "size": "lg",
            "body": [
              {
                "'$ref'": "news",//设置内容为前面自定义的组件，写在definitions里面，该例子没有，只是列举该写法，news为自定义组件的名字
                "debug": false,//是否启用调试模式，这个可以查看数据接收或者发送的时候长什么样子
                "api": {
                  "url": "/CustomApi/get_api_data?api_key=news_preserve_edit",
                  "method": "post",
                  "data": {
                    "objectId": "$objectId"
                  }
                }
              }
            ]
          }
        },
        {
          "label": "删除",
          "type": "button",
          "level": "danger",
          "confirmText": "确定删除吗？",
          "actionType": "ajax",
          "api": {
            "url": "/CustomApi/get_api_data?api_key=news_preserve_delete",
            "method": "post",
            "data": {
              "objectId": "$objectId"
            }
          }
        }
      ]
    }
  ]
}

组件的使用

学会了怎么使用组件了，接下来就来学习比较常见的组件，使用方法如出一辙，主要是要去看对应的属性表，要看仔细！

panel

描述

可以把相关信息以面板的形式展示到一块

示例代码

{
  "type": "page",
  "body": {
    "type": "panel",
    "title": "面板标题",
    "body": "面板内容"
  }
}

效果

补充

可以嵌套其它组件，放在body内

嵌套其它组件的代码

{
  "type": "page",
  "data": {
    "dataOne": [
      {
        "name": "比尔盖茨",
        "height": "170",
        "age": "32",
        "weight": "50kg",
        "files": []
      },
      {
        "name": "乔布斯",
        "height": "180",
        "age": "68",
        "weight": "60kg",
        "files": []
      }
    ]
  },
  "body": [
    {
      "type": "page",
      "body": {
        "type": "panel",
        "title": "面板标题",
        "body": [
          {
            "type": "property",
            "column": 2,
            "title": "富商信息",
            "items": [
              {
                "label": "姓名",
                "content": "比尔盖茨"
              },
              {
                "label": "身高",
                "content": "180"
              },
              {
                "label": "年龄",
                "content": "68"
              },
              {
                "label": "体重",
                "content": "75kg"
              },
              {
                "label": "附件",
                "content": {
                  "type": "input-file"
                },
                "span": 2
              }
            ]
          },
          {
            "type": "input-table",
            "title": "机器配置",
            "name": "dataOne",
            "columns": [
              {
                "label": "姓名",
                "name": "name"
              },
              {
                "label": "身高",
                "name": "height"
              },
              {
                "label": "年龄",
                "name": "age"
              },
              {
                "label": "体重",
                "name": "weight"
              },
              {
                "label": "附件",
                "name": "files",
                "type": "input-file"
              }
            ]
          }
        ]
      }
    }
  ]
}//看着代码比较多，实际结构很简单，就是把panel里面的body替换成了上面一个property属性表，下面一个input-table表

效果图

panel的属性表

属性名	类型	默认值	说明
type	`string`	`"panel"`	指定为 Panel 渲染器
className	`string`	`"panel-default"`	外层 Dom 的类名
headerClassName	`string`	`"panel-heading"`	header 区域的类名
footerClassName	`string`	`"panel-footer bg-light lter wrapper"`	footer 区域的类名
actionsClassName	`string`	`"panel-footer"`	actions 区域的类名
bodyClassName	`string`	`"panel-body"`	body 区域的类名
title	SchemaNode		标题
header	SchemaNode		头部容器
body	SchemaNode		内容容器
footer	SchemaNode		底部容器
affixFooter	`boolean`		是否固定底部容器
actions	Array<Action>		按钮区域

tabs

描述

选项卡容器组件

示例代码

{
  "type": "page",
  "body": {
    "type": "tabs",
    "swipeable": true,
    "tabs": [
      {
        "title": "Tab 1",
        "tab": "Content 1"
      },
      {
        "title": "Tab 2",
        "tab": "Content 2"
      }
    ]
  }
}

效果

tabs的属性表

属性名	类型	默认值	说明
type	`string`	`"tabs"`	指定为 Tabs 渲染器
defaultKey	`string` / `number`		组件初始化时激活的选项卡，hash 值或索引值，支持使用表达式 `2.7.1 以上版本`
activeKey	`string` / `number`		激活的选项卡，hash 值或索引值，支持使用表达式，可响应上下文数据变化
className	`string`		外层 Dom 的类名
linksClassName	`string`		Tabs 标题区的类名
contentClassName	`string`		Tabs 内容区的类名
tabsMode	`string`		展示模式，取值可以是 `line`、`card`、`radio`、`vertical`、`chrome`、`simple`、`strong`、`tiled`、`sidebar`
tabs	`Array`		tabs 内容
source	`string`		tabs 关联数据，关联后可以重复生成选项卡
toolbar	SchemaNode		tabs 中的工具栏
toolbarClassName	`string`		tabs 中工具栏的类名
tabs[x].title	`string` \| SchemaNode		Tab 标题，当是 SchemaNode 时，该 title 不支持 editable 为 true 的双击编辑
tabs[x].icon	`icon`		Tab 的图标
tabs[x].iconPosition	`left` / `right`	`left`	Tab 的图标位置
tabs[x].tab	SchemaNode		内容区
tabs[x].hash	`string`		设置以后将跟 url 的 hash 对应
tabs[x].reload	`boolean`		设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用
tabs[x].unmountOnExit	`boolean`		每次退出都会销毁当前 tab 栏内容
tabs[x].className	`string`	`"bg-white b-l b-r b-b wrapper-md"`	Tab 区域样式
tabs[x].tip	`string`		`3.2.0及以上版本支持` Tab 提示，当开启 `showTip` 时生效，作为 Tab 在 hover 时的提示显示，可不配置，如不设置，`tabs[x].title` 作为提示显示
tabs[x].closable	`boolean`	false	是否支持删除，优先级高于组件的 `closable`
tabs[x].disabled	`boolean`	false	是否禁用
mountOnEnter	`boolean`	false	只有在点中 tab 的时候才渲染
unmountOnExit	`boolean`	false	切换 tab 的时候销毁
addable	`boolean`	false	是否支持新增
addBtnText	`string`	增加	新增按钮文案
closable	`boolean`	false	是否支持删除
draggable	`boolean`	false	是否支持拖拽
showTip	`boolean`	false	是否支持提示
showTipClassName	`string`	`''`	提示的类
editable	`boolean`	false	是否可编辑标签名。当 `tabs[x].title` 为 SchemaNode 时，双击编辑 Tab 的 title 显示空的内容
scrollable	`boolean`	true	是否导航支持内容溢出滚动。（属性废弃）
sidePosition	`left` / `right`	`left`	`sidebar` 模式下，标签栏位置
collapseOnExceed	`number`		当 tabs 超出多少个时开始折叠
collapseBtnLabel	`string`	`more`	用来设置折叠按钮的文字
swipeable	`boolean`	false	是否开启手势滑动切换（移动端生效）

wrapper

描述

简单的一个包裹容器组件，相当于用 div 包含起来，最大的用处是用来配合 css 进行布局

示例代码

{
  "type": "page",
  "body": {
    "type": "wrapper",
    "body": "内容",
    "className": "b"
  }
}

效果

wrapper的属性表

属性名	类型	默认值	说明
type	`string`	`"wrapper"`	指定为 Wrapper 渲染器
className	`string`		外层 Dom 的类名
size	`string`		支持: `xs`、`sm`、`md`和`lg`
style	`Object` \| `string`		自定义样式
body	SchemaNode		内容容器

action

描述

Action 行为按钮，是触发页面行为的主要方法之一

示例代码

{
  "type": "page",
  "body": {
    "label": "弹框",
    "type": "button",
    "actionType": "dialog",
    "dialog": {
      "title": "弹框",
      "body": "这是个简单的弹框。"
    }
  }
}

效果

点击按钮之后

action的属性表

属性名	类型	默认值	说明
type	`string`	`action`	指定为 Page 渲染器。
actionType	`string`	-	【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：`ajax`、`link`、`url`、`drawer`、`dialog`、`confirm`、`cancel`、`prev`、`next`、`copy`、`close`。
label	`string`	-	按钮文本。可用 `${xxx}` 取值。
level	`string`	`default`	按钮样式，支持：`link`、`primary`、`secondary`、`info`、`success`、`warning`、`danger`、`light`、`dark`、`default`。
size	`string`	-	按钮大小，支持：`xs`、`sm`、`md`、`lg`。
icon	`string`	-	设置图标，例如`fa fa-plus`。
iconClassName	`string`	-	给图标上添加类名。
rightIcon	`string`	-	在按钮文本右侧设置图标，例如`fa fa-plus`。
rightIconClassName	`string`	-	给右侧图标上添加类名。
active	`boolean`	-	按钮是否高亮。
activeLevel	`string`	-	按钮高亮时的样式，配置支持同`level`。
activeClassName	`string`	`is-active`	给按钮高亮添加类名。
block	`boolean`	-	用`display:"block"`来显示按钮。
confirmText	模板	-	当设置后，操作在开始前会询问用户。可用 `${xxx}` 取值。
confirmTitle	模板	-	确认框标题，前提是 confirmText 有内容，支持模版语法
reload	`string`	-	指定此次操作完后，需要刷新的目标组件名字（组件的`name`值，自己配置的），多个请用 `,` 号隔开。
tooltip	`string`	-	鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。
disabledTip	`'string' \| 'TooltipObject'`	-	被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为`title`和`content`。可用 `${xxx}` 取值。
tooltipPlacement	`string`	`top`	如果配置了`tooltip`或者`disabledTip`，指定提示信息位置，可配置`top`、`bottom`、`left`、`right`。
close	`boolean` or `string`	-	当`action`配置在`dialog`或`drawer`的`actions`中时，配置为`true`指定此次操作完后关闭当前`dialog`或`drawer`。当值为字符串，并且是祖先层弹框的名字的时候，会把祖先弹框关闭掉。
required	`Array<string>`	-	配置字符串数组，指定在`form`中进行操作之前，需要指定的字段名的表单项通过验证

form

描述

表单是 amis 中核心组件之一，主要作用是提交或者展示表单数据

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-text",
        "name": "name",
        "label": "姓名："
      },
      {
        "name": "email",
        "type": "input-email",
        "label": "邮箱："
      }
    ]
  }
}

效果

form的属性表

属性名	类型	默认值	说明
type	`string`		`"form"` 指定为 Form 渲染器
name	`string`		设置一个名字后，方便其他组件与其通信
mode	`string`	`normal`	表单展示方式，可以是：`normal`、`horizontal` 或者 `inline`
horizontal	`Object`	`{"left":2, "right":10, "justify": false}`	当 mode 为 `horizontal` 时有用，用来控制 label 的展示占比
labelAlign	`"right" \| "left"`	`"right"`	表单项标签对齐方式，默认右对齐，仅在 `mode`为`horizontal` 时生效
labelWidth	`number \| string`		表单项标签自定义宽度
title	`string`	`"表单"`	Form 的标题
submitText	`String`	`"提交"`	默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。
className	`string`		外层 Dom 的类名
body	Array<表单项 or SchemaNode>		Form 表单项集合
actions	Array<行为按钮>		Form 提交按钮，成员为 Action
messages	`Object`		消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。
messages.fetchSuccess	`string`		获取成功时提示
messages.fetchFailed	`string`		获取失败时提示
messages.saveSuccess	`string`		保存成功时提示
messages.saveFailed	`string`		保存失败时提示
wrapWithPanel	`boolean`	`true`	是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。
panelClassName	`string`		外层 panel 的类名
api	API		Form 用来保存数据的 api。
initApi	API		Form 用来获取初始数据的 api。
rules	Array<{rule:string; message:string;name?: string[]}>		表单组合校验规则
interval	`number`	`3000`	刷新时间(最低 3000)
silentPolling	`boolean`	`false`	配置刷新时是否显示加载动画
stopAutoRefreshWhen	`string`	`""`	通过表达式来配置停止刷新的条件
initAsyncApi	API		Form 用来获取初始数据的 api,与 initApi 不同的是，会一直轮询请求该接口，直到返回 finished 属性为 true 才结束。
initFetch	`boolean`	`true`	设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口
initFetchOn	`string`		用表达式来配置
initFinishedField	`string`	`finished`	设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取
initCheckInterval	`number`	`3000`	设置了 initAsyncApi 以后，默认拉取的时间间隔
asyncApi	API		设置此属性后，表单提交发送保存接口后，还会继续轮询请求该接口，直到返回 `finished` 属性为 `true` 才结束。
checkInterval	`number`	3000	轮询请求的时间间隔，默认为 3 秒。设置 `asyncApi` 才有效
finishedField	`string`	`"finished"`	如果决定结束的字段名不是 `finished` 请设置此属性，比如 `is_success`
submitOnChange	`boolean`	`false`	表单修改即提交
submitOnInit	`boolean`	`false`	初始就提交一次
resetAfterSubmit	`boolean`	`false`	提交后是否重置表单
primaryField	`string`	`"id"`	设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。
target	`string`		默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 `CRUD` 模型的 name 值。如果 target 目标是一个 `Form` ，则目标 `Form` 会重新触发 `initApi`，api 可以拿到当前 form 数据。如果目标是一个 `CRUD` 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 `window` 时，会把当前表单的数据附带到页面地址上。
redirect	`string`		设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。
reload	`string`		操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 `window` 则让当前页面整体刷新。
autoFocus	`boolean`	`false`	是否自动聚焦。
canAccessSuperData	`boolean`	`true`	指定是否可以自动获取上层的数据并映射到表单项上
persistData	`string`	`""`	指定一个唯一的 key，来配置当前表单是否开启本地缓存
persistDataKeys	`string[]`	`""`	指指定只有哪些 key 缓存
clearPersistDataAfterSubmit	`boolean`	`true`	指定表单提交成功后是否清除本地缓存
preventEnterSubmit	`boolean`	`false`	禁用回车提交表单
trimValues	`boolean`	`false`	trim 当前表单项的每一个值
promptPageLeave	`boolean`	`false`	form 还没保存，即将离开页面前是否弹框确认。
columnCount	`number`	0	表单项显示为几列
inheritData	`boolean`	`true`	默认表单是采用数据链的形式创建个自己的数据域，表单提交的时候只会发送自己这个数据域的数据，如果希望共用上层数据域可以设置这个属性为 false，这样上层数据域的数据不需要在表单中用隐藏域或者显式映射才能发送了。
static	`boolean`		`2.4.0` 整个表单静态方式展示，详情请查看示例页
staticClassName	`string`		`2.4.0` 表单静态展示时使用的类名
closeDialogOnSubmit	`boolean`		提交的时候是否关闭弹窗。当 form 里面有且只有一个弹窗的时候，本身提交会触发弹窗关闭，此属性可以关闭此行为

select

描述

下拉框选择器

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "body": [
      {
        "label": "选项",
        "type": "select",
        "name": "select",
        "menuTpl": "<div>${label} 值：${value}, 当前是否选中: ${checked}</div>",
        "options": [
          {
            "label": "A",
            "value": "a"
          },
          {
            "label": "B",
            "value": "b"
          },
          {
            "label": "C",
            "value": "c"
          }
        ]
      }
    ]
  }
}

效果

图一

图二

select的属性表

属性名	类型	默认值	说明
options	`Array<object>`或`Array<string>`		选项组
source	API或数据映射		动态选项组
autoComplete	API		自动提示补全
delimiter	`string`	`false`	拼接符
labelField	`string`	`"label"`	选项标签字段
valueField	`string`	`"value"`	选项值字段
joinValues	`boolean`	`true`	拼接值
extractValue	`boolean`	`false`	提取值
checkAll	`boolean`	`false`	是否支持全选
checkAllLabel	`string`	`全选`	全选的文字
checkAllBySearch	`boolean`	`true`	有检索时只全选检索命中的项
defaultCheckAll	`boolean`	`false`	默认是否全选
creatable	`boolean`	`false`	新增选项
multiple	`boolean`	`false`	多选
searchable	`boolean`	`false`	检索
filterOption	`string`	`(options: Option[], inputValue: string, option: {keys: string[]}) => Option[]`
createBtnLabel	`string`	`"新增选项"`	新增选项
addControls	Array<表单项>		自定义新增表单项
addApi	API		配置新增选项接口
editable	`boolean`	`false`	编辑选项
editControls	Array<表单项>		自定义编辑表单项
editApi	API		配置编辑选项接口
removable	`boolean`	`false`	删除选项
deleteApi	API		配置删除选项接口
autoFill	`object`		自动填充
menuTpl	`string`		支持配置自定义菜单
clearable	`boolean`		单选模式下是否支持清空
hideSelected	`boolean`	`false`	隐藏已选选项
mobileClassName	`string`		移动端浮层类名
selectMode	`string`	``	可选：`group`、`table`、`tree`、`chained`、`associated`。分别为：列表形式、表格形式、树形选择形式、级联选择形式，关联选择形式（与级联选择的区别在于，级联是无限极，而关联只有一级，关联左边可以是个 tree）。
searchResultMode	`string`		如果不设置将采用 `selectMode` 的值，可以单独配置，参考 `selectMode`，决定搜索结果的展示形式。
columns	`Array<Object>`		当展示形式为 `table` 可以用来配置展示哪些列，跟 table 中的 columns 配置相似，只是只有展示功能。
leftOptions	`Array<Object>`		当展示形式为 `associated` 时用来配置左边的选项集。
leftMode	`string`		当展示形式为 `associated` 时用来配置左边的选择形式，支持 `list` 或者 `tree`。默认为 `list`。
rightMode	`string`		当展示形式为 `associated` 时用来配置右边的选择形式，可选：`list`、`table`、`tree`、`chained`。
maxTagCount	`number`		标签的最大展示数量，超出数量后以收纳浮层的方式展示，仅在多选模式开启后生效
overflowTagPopover	`TooltipObject`	`{"placement": "top", "trigger": "hover", "showArrow": false, "offset": [0, -10]}`	收纳浮层的配置属性，详细配置参考Tooltip
optionClassName	`string`		选项 CSS 类名
popOverContainerSelector	`string`		弹层挂载位置选择器，会通过`querySelector`获取
clearable	`boolean`		是否展示清空图标
overlay	`{ width: string \| number, align: "left" \| "center" \| "right" }`		弹层宽度与对齐方式 `2.8.0 以上版本`
showInvalidMatch	`boolean`	`false`	选项值与选项组不匹配时选项值是否飘红

input

描述

一类功能很全的输入框组件，可以有很多功能（还有很多使用的组件同学们可自行去官网查看使用嗷）

input-text

描述

常用于输入用户信息，或填写资料等，表单里不可或缺的表单项

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "name": "text",
        "type": "input-text",
        "label": "text"
      }
    ]
  }
}

效果

input-text的属性表

属性名	类型	默认值	说明
options	`Array<object>`或`Array<string>`		选项组
source	`string`或 API		动态选项组
autoComplete	`string`或 API		自动补全
multiple	`boolean`		是否多选
delimiter	`string`	`,`	拼接符
labelField	`string`	`"label"`	选项标签字段
valueField	`string`	`"value"`	选项值字段
joinValues	`boolean`	`true`	拼接值
extractValue	`boolean`	`false`	提取值
addOn	`addOn`		输入框附加组件，比如附带一个提示文字，或者附带一个提交按钮。
addOn.type	`string`		请选择 `text` 、`button` 或者 `submit`。
addOn.label	`string`		文字说明
addOn.position	`'left' \| 'right'`	`'right'`	addOn 位置
addOn.xxx	`string`		其他参数请参考按钮文档
trimContents	`boolean`		是否去除首尾空白文本。
clearValueOnEmpty	`boolean`		文本内容为空时去掉这个值
creatable	`boolean`		是否可以创建，默认为可以，除非设置为 false 即只能选择选项中的值
clearable	`boolean`		是否可清除
resetValue	`string`	`""`	清除后设置此配置项给定的值。
prefix	`string`	`""`	前缀
suffix	`string`	`""`	后缀
showCounter	`boolean`		是否显示计数器
minLength	`number`		限制最小字数
maxLength	`number`		限制最大字数
transform	`object`		自动转换值，可选 `transform: { lowerCase: true, upperCase: true }`
borderMode	`"full"\| "half" \| "none"`	`"full"`	输入框边框模式，全边框，还是半边框，或者没边框。
inputControlClassName	`string`		control 节点的 CSS 类名
nativeInputClassName	`string`		原生 input 标签的 CSS 类名
nativeAutoComplete	`string`	`off`	原生 input 标签的 `autoComplete` 属性，比如配置集成 `new-password`

input-number

描述

跟input-text效果差不多，但是顾名思义，只能用来接收数字型的数据，可以设置最大最小值和步长，步长就是每次变化的度

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-number",
        "name": "number",
        "label": "数字"
      }
    ]
  }
}

效果

input-number的属性表

属性名	类型	默认值	说明	版本
min	模板		最小值
max	模板		最大值
step	`number`		步长
precision	`number`		精度，即小数点后几位，支持 0 和正整数
showSteps	`boolean`	`true`	是否显示上下点击按钮
readOnly	`boolean`	`false`	只读
prefix	`string`		前缀
suffix	`string`		后缀
unitOptions	`string[]`		单位选项	`1.4.0`
kilobitSeparator	`boolean`	`false`	千分分隔
keyboard	`boolean`	`true`	键盘事件（方向上下）
big	`boolean`	`false`	是否使用大数	`2.3.0`
displayMode	`"base" \| "enhance"`	`"base"`	样式类型
borderMode	`"full" \| "half" \| "none"`	`"full"`	边框模式，全边框，还是半边框，或者没边框
resetValue	`number \| string`	`""`	清空输入内容时，组件值将设置为 `resetValue`
clearValueOnEmpty	`boolean`	`false`	内容为空时从数据域中删除该表单项对应的值	`2.8.0`

input-city

描述

这个组件目前我没用过，但是看了一眼示例，真的很简单，vue的话你想实现真的很麻烦，原生要写很多代码，你还得去找省份城市的数据，elementUi甚至没有这个组件，amis你直接调用就行了

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "name": "city",
        "type": "input-city",
        "label": "城市",
        "searchable": true
      }
    ]
  }
}

效果

注意，存储的值为该地的位置邮编

input-city属性表

属性名	类型	默认值	说明
allowCity	`boolean`	`true`	允许选择城市
allowDistrict	`boolean`	`true`	允许选择区域
searchable	`boolean`	`false`	是否出搜索框
extractValue	`boolean`	`true`	默认 `true` 是否抽取值，如果设置成 `false` 值格式会变成对象，包含 `code`、`province`、`city` 和 `district` 文字信息。

input-date

描述

很常见的选择日期的组件

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-date",
        "name": "date",
        "label": "日期",
        "style": {
          "width": "200px"
        }
      }
    ]
  }
}

效果

保存的值为时间戳，若要更改值格式可使用format属性，设置为:"YYYY-MM-DD，若要更改展示格式则使用inputFormat属性，设置为:"YYYY-MM-DD"，更多请查看moment官方文档

input-date的属性表

属性名	类型	默认值	说明	版本
value	`string`		默认值
valueFormat	`string`	`X`	日期选择器值格式，更多格式类型请参考文档	3.4.0 版本后支持
displayFormat	`string`	`YYYY-MM-DD`	日期选择器显示格式，即时间戳格式，更多格式类型请参考文档	3.4.0 版本后支持
closeOnSelect	`boolean`	`false`	点选日期后，是否马上关闭选择框
placeholder	`string`	`"请选择日期"`	占位文本
shortcuts	`string \| string[] \| Array<{"label": string; date: string}>`		日期快捷键，字符串格式为预设值，对象格式支持写表达式	`3.1.0`版本后支持表达式
minDate	`string`		限制最小日期
maxDate	`string`		限制最大日期
utc	`boolean`	`false`	保存 utc 值
clearable	`boolean`	`true`	是否可清除
embed	`boolean`	`false`	是否内联模式
disabledDate	`string`		用字符函数来控制哪些天不可以被点选

input-datetime

描述

保存更详细的时间的组件

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-datetime",
        "name": "datetime",
        "label": "日期时间"
      }
    ]
  }
}

效果

保存的值为时间戳，若要更改值格式可使用format属性，设置为:"YYYY-MM-DD，若要更改展示格式则使用inputFormat属性，设置为:"YYYY-MM-DD"，更多请查看

moment官方文档

input-datetime的属性表

属性名	类型	默认值	说明	版本
value	`string`		默认值
valueFormat	`string`	`X`	日期时间选择器值格式，更多格式类型请参考文档	3.4.0 版本后支持
displayFormat	`string`	`YYYY-MM-DD HH:mm:ss`	日期时间选择器显示格式，即时间戳格式，更多格式类型请参考文档	3.4.0 版本后支持
placeholder	`string`	`"请选择日期以及时间"`	占位文本
shortcuts	`string \| string[] \| Array<{"label": string; date: string}>`		日期时间快捷键	`3.1.0`版本后支持表达式
minDate	`string`		限制最小日期时间
maxDate	`string`		限制最大日期时间
utc	`boolean`	`false`	保存 utc 值
clearable	`boolean`	`true`	是否可清除
embed	`boolean`	`false`	是否内联
timeConstraints	`object`	`true`	请参考input-time 里的说明
isEndDate	`boolean`	`false`	如果配置为 true，会自动默认为 23:59:59 秒
disabledDate	`string`		用字符函数来控制哪些天不可以被点选

input-excel

描述

这个组件是通过前端对 Excel 进行解析，将结果作为表单项，使用它有两个好处：

节省后端开发成本，无需再次解析 Excel

可以前端实时预览效果，比如配合 input-table或者picker 组件进行二次修改

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-excel",
        "name": "excel",
        "label": "上传 Excel",
        "placeholder": "请拖拽Excel文件到当前区域"
      },
      {
        "type": "input-table",
        "name": "excel",
        "visibleOn": "data.excel",
        "columns": [
          {
            "name": "item_no",
            "label": "物料号",
            "type": "input-text"
          },
          {
            "name": "item_note",
            "label": "物料",
            "type": "input-text"
          },
          {
            "name": "item_material",
            "label": "规格",
            "type": "input-text"
          },
          {
            "name": "graph_no",
            "label": "图号",
            "type": "input-text"
          },
          {
            "name": "required_qty",
            "label": "需求数量",
            "type": "input-text"
          }
        ]
      }
    ]
  }
}

文件截图

效果

建议设置form表单的debug为true，可以看到待发送的数据结构

input-excel的属性表

属性名	类型	默认值	说明	版本
allSheets	`boolean`	false	是否解析所有 sheet
parseMode	`'array'` 或 `'object'`	'object'	解析模式
includeEmpty	`boolean`	true	是否包含空值
plainText	`boolean`	true	是否解析为纯文本
placeholder	`string`	`"拖拽 Excel 到这，或点击上传"`	占位文本提示	`2.8.1`
autoFill	`Record<string, string>`		自动填充	`3.5.0`

input-file

描述

用来负责文件上传，文件上传成功后会返回文件地址，这个文件地址会作为这个表单项的值，整个表单提交的时候，其实提交的是文件地址，文件上传已经在这个控件中完成了

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-file",
        "name": "file",
        "label": "File",
        "accept": "*",
        "receiver": "/amis/api/upload/file"
      }
    ]
  }
}

效果

input-file的属性表

属性名	类型	默认值	说明
receiver	API		上传文件接口
accept	`string`	`text/plain`	默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀`.xxx`
capture	`string`	`undefined`	用于控制 input[type=file] 标签的 capture 属性，在移动端可控制输入来源
asBase64	`boolean`	`false`	将文件以`base64`的形式，赋值给当前组件
asBlob	`boolean`	`false`	将文件以二进制的形式，赋值给当前组件
maxSize	`number`		默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为`B`
maxLength	`number`		默认没有限制，当设置后，一次只允许上传指定数量文件。
multiple	`boolean`	`false`	是否多选。
drag	`boolean`	`false`	是否为拖拽上传
joinValues	`boolean`	`true`	拼接值
extractValue	`boolean`	`false`	提取值
delimiter	`string`	`,`	拼接值
autoUpload	`boolean`	`true`	否选择完就自动开始上传
hideUploadButton	`boolean`	`false`	隐藏上传按钮
stateTextMap	object	`{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }`	上传状态文案
fileField	`string`	`file`	如果你不想自己存储，则可以忽略此属性。
nameField	`string`	`name`	接口返回哪个字段用来标识文件名
valueField	`string`	`value`	文件的值用那个字段来标识。
urlField	`string`	`url`	文件下载地址的字段名。
btnLabel	`string`		上传按钮的文字
downloadUrl	`boolean`或`string`	`""` 1.1.6 版本开始支持 `post:http://xxx.com/${value}` 这种写法	默认显示文件路径的时候会支持直接下载，可以支持加前缀如：`http://xx.dom/filename=` ，如果不希望这样，可以把当前配置项设置为 `false`。
useChunk	`boolean`或`"auto"`	`"auto"`	amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。
chunkSize	`number`	`5 * 1024 * 1024`	分块大小
startChunkApi	API		startChunkApi
chunkApi	API		chunkApi
finishChunkApi	API		finishChunkApi
concurrency	`number`		分块上传时并行个数
documentation	`string`		文档内容
documentLink	`string`		文档链接
initAutoFill	`boolean`	`true`	初表单反显时是否执行

input-password

描述

输入密码组件，可配置是否显示密码

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-password",
        "name": "password",
        "label": "密码"
      }
    ]
  }
}

效果

input-password的属性表

属性名	类型	默认值	说明
revealPassword	`boolean`	`true`	是否展示密码显/隐按钮

inputRichText

描述

这个也是很好用，我最近做的一个功能就是用这个做的，可以做到让用户自己编辑文章，可以插入图片，表格，超链接等等，最后保存为string就行了，然后解析渲染的时候设置type为html

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-rich-text",
        "name": "rich",
        "label": "Rich Text"
      }
    ]
  }
}

效果

inputRichText的属性表

属性名	类型	说明
saveAsUbb	`boolean`	是否保存为 ubb 格式
receiver	API	默认的图片保存 API
videoReceiver	API	默认的视频保存 API `仅支持 froala 编辑器`
fileField	string	上传文件时的字段名
size	`string`	框的大小，可设置为 `md` 或者 `lg`
options	`object`	需要参考 tinymce 或 froala 的文档
buttons	`Array<string>`	froala 专用，配置显示的按钮，tinymce 可以通过前面的 options 设置toolbar 字符串

input-table

描述

可以用来展示数组类型的数据。配置columns 数组，来定义列信息

注意，input-table的外层不能是panel，这是我测试过的，如果有误，请同学们自行测试

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "debug": true,
    "data": {
      "table": [
        {
          "a": "a1",
          "b": "b1",
          "c": "c1"
        }
      ]
    },
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "input-table",
        "name": "table",
        "columns": [
          {
            "name": "a",
            "label": "A"
          },
          {
            "name": "b",
            "label": "B"
          },
          {
            "name": "c",
            "label": "C",
            "type": "input-text"
          }
        ]
      }
    ]
  }
}

效果

input-table的属性表

属性名	类型	默认值	说明
type	`string`	`"input-table"`	指定为 Table 渲染器
addable	`boolean`	`false`	是否可增加一行
editable	`boolean`	`false`	是否可编辑
removable	`boolean`	`false`	是否可删除
showTableAddBtn	`boolean`	`true`	是否显示表格操作栏添加按钮，前提是要开启可新增功能
showFooterAddBtn	`boolean`	`true`	是否显示表格下方添加按，前提是要开启可新增功能
addApi	API	-	新增时提交的 API
footerAddBtn	SchemaNode	-	底部新增按钮配置
updateApi	API	-	修改时提交的 API
deleteApi	API	-	删除时提交的 API
addBtnLabel	`string`		增加按钮名称
addBtnIcon	`string`	`"plus"`	增加按钮图标
copyBtnLabel	`string`		复制按钮文字
copyBtnIcon	`string`	`"copy"`	复制按钮图标
editBtnLabel	`string`	`""`	编辑按钮名称
editBtnIcon	`string`	`"pencil"`	编辑按钮图标
deleteBtnLabel	`string`	`""`	删除按钮名称
deleteBtnIcon	`string`	`"minus"`	删除按钮图标
confirmBtnLabel	`string`	`""`	确认编辑按钮名称
confirmBtnIcon	`string`	`"check"`	确认编辑按钮图标
cancelBtnLabel	`string`	`""`	取消编辑按钮名称
cancelBtnIcon	`string`	`"times"`	取消编辑按钮图标
needConfirm	`boolean`	`true`	是否需要确认操作，，可用来控控制表格的操作交互
canAccessSuperData	`boolean`	`false`	是否可以访问父级数据，也就是表单中的同级数据，通常需要跟 strictMode 搭配使用
strictMode	`boolean`	`true`	为了性能，默认其他表单项项值变化不会让当前表格更新，有时候为了同步获取其他表单项字段，需要开启这个。
minLength	`number`	`0`	最小行数, `2.4.1`版本后支持变量
maxLength	`number`	`Infinity`	最大行数, `2.4.1`版本后支持变量
perPage	`number`	-	每页展示几行数据，如果不配置则不会显示分页器
columns	`array`	[]	列信息
columns[x].quickEdit	`boolean` 或者 `object`	-	配合 editable 为 true 一起使用
columns[x]. quickEditOnUpdate	`boolean` 或者 `object`	-	可以用来区分新建模式和更新模式的编辑配置

picker

描述

列表选取，在功能上和 Select 类似，但它能显示更复杂的信息

示例代码

{
  "type": "page",
  "body": {
    "type": "form",
    "api": "/amis/api/mock2/form/saveForm",
    "body": [
      {
        "type": "picker",
        "name": "type4",
        "joinValues": true,
        "valueField": "id",
        "labelField": "engine",
        "label": "Picker",
        "embed": true,
        "source": "/amis/api/mock2/crud/tree?waitSeconds=1",
        "size": "lg",
        "value": "4,5",
        "multiple": true,
        "pickerSchema": {
          "mode": "table",
          "name": "thelist",
          "quickSaveApi": "/amis/api/mock2/sample/bulkUpdate",
          "quickSaveItemApi": "/amis/api/mock2/sample/$id",
          "draggable": true,
          "headerToolbar": {
            "wrapWithPanel": false,
            "type": "form",
            "className": "text-right",
            "target": "thelist",
            "mode": "inline",
            "body": [
              {
                "type": "input-text",
                "name": "keywords",
                "addOn": {
                  "type": "submit",
                  "label": "搜索",
                  "level": "primary",
                  "icon": "fa fa-search pull-left"
                }
              }
            ]
          },
          "columns": [
            {
              "name": "engine",
              "label": "Rendering engine",
              "sortable": true,
              "searchable": true,
              "type": "text",
              "toggled": true
            },
            {
              "name": "browser",
              "label": "Browser",
              "sortable": true,
              "type": "text",
              "toggled": true
            },
            {
              "name": "platform",
              "label": "Platform(s)",
              "sortable": true,
              "type": "text",
              "toggled": true
            },
            {
              "name": "version",
              "label": "Engine version",
              "quickEdit": true,
              "type": "text",
              "toggled": true
            },
            {
              "name": "grade",
              "label": "CSS grade",
              "quickEdit": {
                "mode": "inline",
                "type": "select",
                "options": [
                  "A",
                  "B",
                  "C",
                  "D",
                  "X"
                ],
                "saveImmediately": true
              },
              "type": "text",
              "toggled": true
            },
            {
              "type": "operation",
              "label": "操作",
              "width": 100,
              "buttons": [
                {
                  "type": "button",
                  "icon": "fa fa-eye",
                  "actionType": "dialog",
                  "dialog": {
                    "title": "查看",
                    "body": {
                      "type": "form",
                      "body": [
                        {
                          "type": "static",
                          "name": "engine",
                          "label": "Engine"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "static",
                          "name": "browser",
                          "label": "Browser"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "static",
                          "name": "platform",
                          "label": "Platform(s)"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "static",
                          "name": "version",
                          "label": "Engine version"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "static",
                          "name": "grade",
                          "label": "CSS grade"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "html",
                          "html": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
                        }
                      ]
                    }
                  }
                },
                {
                  "type": "button",
                  "icon": "fa fa-pencil",
                  "actionType": "dialog",
                  "dialog": {
                    "position": "left",
                    "size": "lg",
                    "title": "编辑",
                    "body": {
                      "type": "form",
                      "name": "sample-edit-form",
                      "api": "/amis/api/mock2/sample/$id",
                      "body": [
                        {
                          "type": "input-text",
                          "name": "engine",
                          "label": "Engine",
                          "required": true
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "input-text",
                          "name": "browser",
                          "label": "Browser",
                          "required": true
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "input-text",
                          "name": "platform",
                          "label": "Platform(s)",
                          "required": true
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "input-text",
                          "name": "version",
                          "label": "Engine version"
                        },
                        {
                          "type": "divider"
                        },
                        {
                          "type": "select",
                          "name": "grade",
                          "label": "CSS grade",
                          "options": [
                            "A",
                            "B",
                            "C",
                            "D",
                            "X"
                          ]
                        }
                      ]
                    }
                  }
                },
                {
                  "type": "button",
                  "icon": "fa fa-times text-danger",
                  "actionType": "ajax",
                  "confirmText": "您确认要删除?",
                  "api": "delete:/amis/api/mock2/sample/$id"
                }
              ],
              "toggled": true
            }
          ]
        }
      }
    ]
  }
}

效果

picker的属性表

属性名	类型	默认值	说明	版本
options	`Array<object>`或`Array<string>`		选项组
source	`string`或 API 或数据映射		动态选项组
multiple	`boolean`		是否为多选。
delimiter	`boolean`	`false`	拼接符
labelField	`boolean`	`"label"`	选项标签字段
valueField	`boolean`	`"value"`	选项值字段
joinValues	`boolean`	`true`	拼接值
extractValue	`boolean`	`false`	提取值
autoFill	`object`		自动填充
modalTitle	`string`	`"请选择"`	设置模态框的标题
modalMode	`string`	`"dialog"`	设置 `dialog` 或者 `drawer`，用来配置弹出方式。
pickerSchema	`string`	`{mode: 'list', listItem: {title: '${label}'}}`	即用 List 类型的渲染，来展示列表信息。更多配置参考 CRUD
embed	`boolean`	`false`	是否使用内嵌模式
overflowConfig	`OverflowConfig`	参考OverflowConfig	开启最大标签展示数量的相关配置	`3.4.0`

crud

描述

CRUD，即增删改查组件，主要用来展现数据列表，并支持各类【增】【删】【改】【查】等操作

这个组件非常好用，一般的管理系统的表格数据的增删改查就用它，还可以设置filters来添加搜索条件

注意 CRUD 所需的数据必须放 items 中，因此如果只是想显示表格类型的数据没有分页，请使用 Table

示例代码

{
  "type": "page",
  "body": {
    "type": "crud",
    "syncLocation": false,
    "api": "/amis/api/mock2/sample",
    "headerToolbar": [
      "export-excel"
    ],
    "filter": {
        "title": "条件搜索",
        "columnCount": 2,
        "mode": "horizontal",
        "size": "md",
        "body": [
          {
            "type": "input-text",
            "label": "ID",
            "name": "id"
          }
        ]
    },
    "columns": [
      {
        "name": "id",
        "label": "ID"
      },
      {
        "name": "engine",
        "label": "Rendering engine"
      },
      {
        "name": "browser",
        "label": "Browser"
      },
      {
        "name": "platform",
        "label": "Platform(s)"
      },
      {
        "name": "version",
        "label": "Engine version"
      },
      {
        "name": "grade",
        "label": "CSS grade",
        "type": "mapping",
        "map": {
          "*": "<span class=\"label label-info\">${grade}</span>"
        }
      }
    ]
  }
}

效果

crud的属性表

属性名	类型	默认值	说明	版本
type	`string`		`type` 指定为 CRUD 渲染器
mode	`string`	`"table"`	`"table" 、 "cards" 或者 "list"`
title	`string`	`""`	可设置成空，当设置成空时，没有标题栏
className	`string`		表格外层 Dom 的类名
api	API		CRUD 用来获取列表数据的 api。
deferApi	API		当行数据中有 defer 属性时，用此接口进一步加载内容
loadDataOnce	`boolean`		是否一次性加载所有数据（前端分页）
loadDataOnceFetchOnFilter	`boolean`	`true`	在开启 loadDataOnce 时，filter 时是否去重新请求 api
source	`string`		数据映射接口返回某字段的值，不设置会默认使用接口返回的`${items}`或者`${rows}`，也可以设置成上层数据源的内容
filter	Form		设置过滤器，当该表单提交后，会把数据带给当前 `mode` 刷新列表。
filterTogglable	`boolean` \| `{label: string; icon: string; activeLabel: string; activeIcon?: stirng;}`	`false`	是否可显隐过滤器
filterDefaultVisible	`boolean`	`true`	设置过滤器默认是否可见。
initFetch	`boolean`	`true`	是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据
interval	`number`	`3000`	刷新时间(最低 1000)
silentPolling	`boolean`	`false`	配置刷新时是否隐藏加载动画
stopAutoRefreshWhen	`string`	`""`	通过表达式来配置停止刷新的条件
stopAutoRefreshWhenModalIsOpen	`boolean`	`false`	当有弹框时关闭自动刷新，关闭弹框又恢复
syncLocation	`boolean`	`true`	是否将过滤条件的参数同步到地址栏
draggable	`boolean`	`false`	是否可通过拖拽排序
resizable	`boolean`	`true`	是否可以调整列宽度
itemDraggableOn	`boolean`		用表达式来配置是否可拖拽排序
saveOrderApi	API		保存排序的 api。
quickSaveApi	API		快速编辑后用来批量保存的 API。
quickSaveItemApi	API		快速编辑配置成及时保存时使用的 API。
bulkActions	Array<Action>		批量操作列表，配置后，表格可进行选中操作。
messages	`Object`		覆盖消息提示，如果不指定，将采用 api 返回的 message
messages.fetchFailed	`string`		获取失败时提示
messages.saveOrderFailed	`string`		保存顺序失败提示
messages.saveOrderSuccess	`string`		保存顺序成功提示
messages.quickSaveFailed	`string`		快速保存失败提示
messages.quickSaveSuccess	`string`		快速保存成功提示
primaryField	`string`	`"id"`	设置 ID 字段名。
perPage	`number`	10	设置一页显示多少条数据。
orderBy	`string`		默认排序字段，这个是传给后端，需要后端接口实现
orderDir	`asc` \| `desc`		排序方向
defaultParams	`Object`		设置默认 filter 默认参数，会在查询的时候一起发给后端
pageField	`string`	`"page"`	设置分页页码字段名。
perPageField	`string`	`"perPage"`	设置分页一页显示的多少条数据的字段名。注意：最好与 defaultParams 一起使用，请看下面例子。
pageDirectionField	`string`	`"pageDir"`	分页方向字段名可能是 forward 或者 backward
perPageAvailable	`Array<number>`	`[5, 10, 20, 50, 100]`	设置一页显示多少条数据下拉框可选条数。
orderField	`string`		设置用来确定位置的字段名，设置后新的顺序将被赋值到该字段中。
hideQuickSaveBtn	`boolean`	`false`	隐藏顶部快速保存提示
autoJumpToTopOnPagerChange	`boolean`	`false`	当切分页的时候，是否自动跳顶部。
syncResponse2Query	`boolean`	`true`	将返回数据同步到过滤器上。
keepItemSelectionOnPageChange	`boolean`	`true`	保留条目选择，默认分页、搜素后，用户选择条目会被清空，开启此选项后会保留用户选择，可以实现跨页面批量操作。
labelTpl	`string`		单条描述模板，`keepItemSelectionOnPageChange`设置为`true`后会把所有已选择条目列出来，此选项可以用来定制条目展示文案。
headerToolbar	Array	`['bulkActions', 'pagination']`	顶部工具栏配置
footerToolbar	Array	`['statistics', 'pagination']`	底部工具栏配置
alwaysShowPagination	`boolean`	`false`	是否总是显示分页
affixHeader	`boolean`	`true`	是否固定表头(table 下)
autoGenerateFilter	`Object \| boolean`		是否开启查询区域，开启后会根据列元素的 `searchable` 属性值，自动生成查询条件表单
resetPageAfterAjaxItemAction	`boolean`	`false`	单条数据 ajax 操作后是否重置页码为第一页
autoFillHeight	`boolean` 丨 `{height: number}`		内容区域自适应高度
canAccessSuperData	`boolean`	`true`	指定是否可以自动获取上层的数据并映射到表格行数据上，如果列也配置了该属性，则列的优先级更高
matchFunc	`string`	CRUDMatchFunc	自定义匹配函数, 当开启`loadDataOnce`时，会基于该函数计算的匹配结果进行过滤，主要用于处理列字段类型较为复杂或者字段值格式和后端返回不一致的场景	`3.5.0`

table

描述

表格展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像Service这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过source属性，获取数据链中的数据，完成数据展示

示例代码

{
  "type": "page",
  "body": {
    "type": "service",
    "api": "/amis/api/mock2/sample?perPage=5",
    "body": [
      {
        "type": "table",
        "title": "表格1",
        "source": "$rows",
        "columns": [
          {
            "name": "engine",
            "label": "Engine"
          },
          {
            "name": "version",
            "label": "Version"
          }
        ]
      }
    ]
  }
}

效果

table的属性表

属性名	类型	默认值	说明	版本
type	`string`		`"type"` 指定为 table 渲染器
title	`string`		标题
source	`string`	`${items}`	数据源, 绑定当前环境变量
deferApi	API		当行数据中有 defer 属性时，用此接口进一步加载内容
affixHeader	`boolean`	`true`	是否固定表头
columnsTogglable	`auto` 或者 `boolean`	`auto`	展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启
placeholder	`string` 或者 `SchemaTpl`	`暂无数据`	当没数据的时候的文字提示
className	`string`	`panel-default`	外层 CSS 类名
tableClassName	`string`	`table-db table-striped`	表格 CSS 类名
headerClassName	`string`	`Action.md-table-header`	顶部外层 CSS 类名
footerClassName	`string`	`Action.md-table-footer`	底部外层 CSS 类名
toolbarClassName	`string`	`Action.md-table-toolbar`	工具栏 CSS 类名
columns	`Array<Column>`		用来设置列信息
combineNum	`number`		自动合并单元格
itemActions	Array<Action>		悬浮行操作按钮组
itemCheckableOn	表达式		配置当前行是否可勾选的条件，要用表达式
itemDraggableOn	表达式		配置当前行是否可拖拽的条件，要用表达式
checkOnItemClick	`boolean`	`false`	点击数据行是否可以勾选当前行
rowClassName	`string`		给行添加 CSS 类名
rowClassNameExpr	模板		通过模板给行添加 CSS 类名
prefixRow	`Array`		顶部总结行
affixRow	`Array`		底部总结行
itemBadge	BadgeSchema		行角标配置
autoFillHeight	`boolean` 丨 `{height: number}` 丨 `{maxHeight: number}`		内容区域自适应高度，可选择自适应、固定高度和最大高度	`maxHeight` 需要 `2.8.0` 以上版本
resizable	`boolean`	`true`	列宽度是否支持调整
selectable	`boolean`	`false`	支持勾选
multiple	`boolean`	`false`	勾选 icon 是否为多选样式`checkbox`，默认为`radio`
lazyRenderAfter	`number`	`100`	用来控制从第几行开始懒渲染行，用来渲染大表格时有用
tableLayout	`auto` \| `fixed`	`auto`	当配置为 fixed 时，内容将不会撑开表格，自动换行

tableView

描述

通过表格的方式来展现数据，和 table 的不同之处：

数据源要求不同

table 的数据源需要是多行的数据，最典型的就是来自某个数据库的表

table view 的数据源可以来自各种固定的数据，比如单元格的某一列是来自某个变量

功能不同

table 只能用来做数据表的展现

table view 除了展现复杂的报表，还能用来进行布局

合并单元格方式不同

table 的合并单元格需要依赖数据

table view 的合并单元格是手动指定的，因此可以支持不规则的数据格式

示例代码

{
  "type": "page",
  "body": {
    "type": "service",
    "data": {
      "beijing": "20",
      "tianjing": "19"
    },
    "body": [
      {
        "type": "table-view",
        "trs": [
          {
            "background": "#F7F7F7",
            "tds": [
              {
                "body": {
                  "type": "tpl",
                  "tpl": "地区"
                }
              },
              {
                "body": {
                  "type": "tpl",
                  "tpl": "城市"
                }
              },
              {
                "body": {
                  "type": "tpl",
                  "tpl": "销量"
                }
              }
            ]
          },
          {
            "tds": [
              {
                "rowspan": 2,
                "body": {
                  "type": "tpl",
                  "tpl": "华北"
                }
              },
              {
                "body": {
                  "type": "tpl",
                  "tpl": "北京"
                }
              },
              {
                "body": {
                  "type": "tpl",
                  "tpl": "${beijing}"
                }
              }
            ]
          },
          {
            "tds": [
              {
                "body": {
                  "type": "tpl",
                  "tpl": "天津"
                }
              },
              {
                "body": {
                  "type": "tpl",
                  "tpl": "${tianjing}"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

效果

tableView的属性表

建议去官网查询，那里更详细，主要是懒嘿嘿

each

描述

循环渲染需要的组件，在vue就相当于v-for

示例代码

{
  "type": "page",
  "data": {
    "arr": [
      "A",
      "B",
      "C"
    ]
  },
  "body": {
    "type": "each",
    "name": "arr",
    "items": {
      "type": "tpl",
      "tpl": "<span class='label label-default m-l-sm'><%= data.item %></span> "
    }
  }
}

效果

each的属性表

属性名	类型	默认值	说明
type	`string`	`"each"`	指定为 Each 组件
value	`array`	`[]`	用于循环的值
name	`string`		获取数据域中变量
source	`string`		获取数据域中变量，支持数据映射
items	`object`		使用`value`中的数据，循环输出渲染器。
placeholder	`string`		当 `value` 值不存在或为空数组时的占位文本
itemKeyName	`string`	`item`	获取循环当前数组成员
indexKeyName	`string`	`index`	获取循环当前索引

mapping

描述

根据匹配条件，替换内容，挺实用的

示例代码

{
  "type": "page",
  "body": {
    "type": "mapping",
    "value": "2",
    "map": {
      "1": "<span class='label label-info'>漂亮</span>",
      "2": "<span class='label label-success'>开心</span>",
      "3": "<span class='label label-danger'>惊吓</span>",
      "4": "<span class='label label-warning'>紧张</span>",
      "*": "<span class='label label-default'>其他：${type}</span>"
    }
  }
}

效果

mapping的属性表

属性名	类型	默认值	说明
className	`string`		外层 CSS 类名
placeholder	`string`		占位文本
map	`object`或`Array<object>`		映射配置
source	`string` or `API`		API 或数据映射
valueField	`string`	value	`2.5.2` map 或 source 为`Array<object>`时，用来匹配映射的字段名
labelField	`string`	label	`2.5.2` map 或 source 为`Array<object>`时，用来展示的字段名注：配置后映射值无法作为`schema`组件渲染
itemSchema	`string`或SchemaNode		`2.5.2` 自定义渲染模板，支持`html`或`schemaNode`；当映射值是`非object`时，可使用`${item}`获取映射值；当映射值是`object`时，可使用映射语法: `${xxx}`获取`object`的值；也可使用数据映射语法：`${xxx}`获取数据域中变量值。

dialog

描述

Dialog 弹框主要由 Action 触发，主要展示一个对话框以供用户操作

示例代码

{
  "type": "page",
  "body": {
    "label": "点击弹框",
    "type": "button",
    "actionType": "dialog",
    "dialog": {
      "title": "弹框标题",
      "body": "这是一个弹框"
    }
  }
}

效果

图一

图二

dialog的属性表

属性名	类型	默认值	说明
type	`string`		`"dialog"` 指定为 Dialog 渲染器
title	SchemaNode		弹出层标题
body	SchemaNode		往 Dialog 内容区加内容
size	`string`		指定 dialog 大小，支持: `xs`、`sm`、`md`、`lg`、`xl`、`full`
bodyClassName	`string`	`modal-body`	Dialog body 区域的样式类名
closeOnEsc	`boolean`	`false`	是否支持按 `Esc` 关闭 Dialog
showCloseButton	`boolean`	`true`	是否显示右上角的关闭按钮
showErrorMsg	`boolean`	`true`	是否在弹框左下角显示报错信息
showLoading	`boolean`	`true`	是否在弹框左下角显示 loading 动画
disabled	`boolean`	`false`	如果设置此属性，则该 Dialog 只读没有提交操作。
actions	Array<Action>	【确认】和【取消】	如果想不显示底部按钮，可以配置：`[]`
data	`object`		支持数据映射，如果不设定将默认将触发按钮的上下文中继承数据。

drawer

描述

抽屉型弹出框

示例代码

{
  "type": "page",
  "body": {
    "label": "弹出",
    "type": "button",
    "actionType": "drawer",
    "drawer": {
      "title": "抽屉标题",
      "body": "这是一个抽屉"
    }
  }
}

效果

图一

图二

drawer的属性表

属性名	类型	默认值	说明
type	`string`		`"drawer"` 指定为 Drawer 渲染器
title	SchemaNode		弹出层标题
body	SchemaNode		往 Drawer 内容区加内容
size	`string`		指定 Drawer 大小，支持: `xs`、`sm`、`md`、`lg`、`xl`
position	`string`	`right`	指定 Drawer 方向，支持: `left`、`right`、`top`、`bottom`
className	`string`		Drawer 最外层容器的样式类名
headerClassName	`string`		Drawer 头部区域的样式类名
bodyClassName	`string`	`modal-body`	Drawer body 区域的样式类名
footerClassName	`string`		Drawer 页脚区域的样式类名
showCloseButton	`boolean`	`true`	是否展示关闭按钮，当值为 `false` 时，默认开启 closeOnOutside
closeOnEsc	`boolean`	`false`	是否支持按 Esc 关闭 Drawer
closeOnOutside	`boolean`	`false`	点击内容区外是否关闭 Drawer
overlay	`boolean`	`true`	是否显示蒙层
resizable	`boolean`	`false`	是否可通过拖拽改变 Drawer 大小
width	`string \| number`	`500px`	容器的宽度，在 `position` 为 `left` 或 `right` 时生效
height	`string \| number`	`500px`	容器的高度，在 `position` 为 `top` 或 `bottom` 时生效
actions	Array<Action>	【确认】和【取消】	可以不设置，默认只有两个按钮。
data	`object`		支持数据映射，如果不设定将默认将触发按钮的上下文中继承数据。

toast

描述

轻提示

示例代码

{
  "type": "page",
  "body": [
    {
      "label": "提示",
      "type": "button",
      "actionType": "toast",
      "toast": {
        "items": [
          {
            "body": "轻提示内容"
          }
        ]
      }
    },
    {
      "label": "提示2",
      "type": "button",
      "actionType": "toast",
      "toast": {
        "items": [
          {
            "body": "轻提示内容2"
          }
        ]
      }
    }
  ]
}

效果

图一

图二

toast的属性表

属性名	类型	默认值	说明
actionType	`string`	`"toast"`	指定为 toast 轻提示组件
items	`Array<ToastItem>`	`[]`	轻提示内容
position	`string`	`top-center（移动端为center）`	提示显示位置，可用'top-right'、'top-center'、'top-left'、'bottom-center'、'bottom-left'、'bottom-right'、'center'
closeButton	`boolean`	`false`	是否展示关闭按钮，移动端不展示
showIcon	`boolean`	`true`	是否展示图标
timeout	`number`	`5000（error类型为6000，移动端为3000）`	持续时间

注

以上的所以api以及数据都是需要自己定义的，请勿直接cv，有问题可留言，我解决不了我就问我领导哈哈

小结

总的来说，基本用法都大差不差，都是先指定类型，然后再看看属性表里有没有能用到的属性，尝试着互相嵌套，搞清楚组件之间的逻辑关系，就可以入门啦！