工作中用到的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，有问题可留言，我解决不了我就问我领导哈哈

小结

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