工作中用到的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的属性表
属性名类型默认值说明typestring"panel"指定为 Panel 渲染器classNamestring"panel-default"外层 Dom 的类名headerClassNamestring"panel-heading"header 区域的类名footerClassNamestring"panel-footer bg-light lter wrapper"footer 区域的类名actionsClassNamestring"panel-footer"actions 区域的类名bodyClassNamestring"panel-body"body 区域的类名titleSchemaNode标题headerSchemaNode头部容器bodySchemaNode内容容器footerSchemaNode底部容器affixFooterboolean是否固定底部容器actionsArray
tabs
描述
选项卡容器组件
示例代码
{
"type": "page",
"body": {
"type": "tabs",
"swipeable": true,
"tabs": [
{
"title": "Tab 1",
"tab": "Content 1"
},
{
"title": "Tab 2",
"tab": "Content 2"
}
]
}
}
效果
tabs的属性表
属性名类型默认值说明typestring"tabs"指定为 Tabs 渲染器defaultKeystring / number组件初始化时激活的选项卡，hash 值或索引值，支持使用表达式 2.7.1 以上版本activeKeystring / number激活的选项卡，hash 值或索引值，支持使用表达式，可响应上下文数据变化classNamestring外层 Dom 的类名linksClassNamestringTabs 标题区的类名contentClassNamestringTabs 内容区的类名tabsModestring展示模式，取值可以是 line、card、radio、vertical、chrome、simple、strong、tiled、sidebartabsArraytabs 内容sourcestringtabs 关联数据，关联后可以重复生成选项卡toolbarSchemaNodetabs 中的工具栏toolbarClassNamestringtabs 中工具栏的类名tabs[x].titlestring | SchemaNodeTab 标题，当是 SchemaNode 时，该 title 不支持 editable 为 true 的双击编辑tabs[x].iconiconTab 的图标tabs[x].iconPositionleft / rightleftTab 的图标位置tabs[x].tabSchemaNode内容区tabs[x].hashstring设置以后将跟 url 的 hash 对应tabs[x].reloadboolean设置以后内容每次都会重新渲染，对于 crud 的重新拉取很有用tabs[x].unmountOnExitboolean每次退出都会销毁当前 tab 栏内容tabs[x].classNamestring"bg-white b-l b-r b-b wrapper-md"Tab 区域样式tabs[x].tipstring3.2.0及以上版本支持 Tab 提示，当开启 showTip 时生效，作为 Tab 在 hover 时的提示显示，可不配置，如不设置，tabs[x].title 作为提示显示tabs[x].closablebooleanfalse是否支持删除，优先级高于组件的 closabletabs[x].disabledbooleanfalse是否禁用mountOnEnterbooleanfalse只有在点中 tab 的时候才渲染unmountOnExitbooleanfalse切换 tab 的时候销毁addablebooleanfalse是否支持新增addBtnTextstring增加新增按钮文案closablebooleanfalse是否支持删除draggablebooleanfalse是否支持拖拽showTipbooleanfalse是否支持提示showTipClassNamestring'' 提示的类editablebooleanfalse是否可编辑标签名。当 tabs[x].title 为 SchemaNode 时，双击编辑 Tab 的 title 显示空的内容scrollablebooleantrue是否导航支持内容溢出滚动。（属性废弃）sidePositionleft / rightleftsidebar 模式下，标签栏位置collapseOnExceednumber当 tabs 超出多少个时开始折叠collapseBtnLabelstringmore用来设置折叠按钮的文字swipeablebooleanfalse是否开启手势滑动切换（移动端生效）
wrapper
描述
简单的一个包裹容器组件，相当于用 div 包含起来，最大的用处是用来配合 css 进行布局
示例代码
{
"type": "page",
"body": {
"type": "wrapper",
"body": "内容",
"className": "b"
}
}
效果
wrapper的属性表
属性名类型默认值说明typestring"wrapper"指定为 Wrapper 渲染器classNamestring外层 Dom 的类名sizestring支持: xs、sm、md和lgstyleObject | string自定义样式bodySchemaNode内容容器
action
描述
Action 行为按钮，是触发页面行为的主要方法之一
示例代码
{
"type": "page",
"body": {
"label": "弹框",
"type": "button",
"actionType": "dialog",
"dialog": {
"title": "弹框",
"body": "这是个简单的弹框。"
}
}
}
效果
点击按钮之后
action的属性表
属性名类型默认值说明typestringaction指定为 Page 渲染器。actionTypestring-【必填】这是 action 最核心的配置，来指定该 action 的作用类型，支持：ajax、link、url、drawer、dialog、confirm、cancel、prev、next、copy、close。labelstring-按钮文本。可用 ${xxx} 取值。levelstringdefault按钮样式，支持：link、primary、secondary、info、success、warning、danger、light、dark、default。sizestring-按钮大小，支持：xs、sm、md、lg。iconstring-设置图标，例如fa fa-plus。iconClassNamestring-给图标上添加类名。rightIconstring-在按钮文本右侧设置图标，例如fa fa-plus。rightIconClassNamestring-给右侧图标上添加类名。activeboolean-按钮是否高亮。activeLevelstring-按钮高亮时的样式，配置支持同level。activeClassNamestringis-active给按钮高亮添加类名。blockboolean-用display:"block"来显示按钮。confirmText模板-当设置后，操作在开始前会询问用户。可用 ${xxx} 取值。confirmTitle模板-确认框标题，前提是 confirmText 有内容，支持模版语法reloadstring-指定此次操作完后，需要刷新的目标组件名字（组件的name值，自己配置的），多个请用 , 号隔开。tooltipstring-鼠标停留时弹出该段文字，也可以配置对象类型：字段为title和content。可用 ${xxx} 取值。disabledTip'string' | 'TooltipObject'-被禁用后鼠标停留时弹出该段文字，也可以配置对象类型：字段为title和content。可用 ${xxx} 取值。tooltipPlacementstringtop如果配置了tooltip或者disabledTip，指定提示信息位置，可配置top、bottom、left、right。closeboolean or string-当action配置在dialog或drawer的actions中时，配置为true指定此次操作完后关闭当前dialog或drawer。当值为字符串，并且是祖先层弹框的名字的时候，会把祖先弹框关闭掉。requiredArray
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的属性表
属性名类型默认值说明typestring"form" 指定为 Form 渲染器namestring设置一个名字后，方便其他组件与其通信modestringnormal表单展示方式，可以是：normal、horizontal 或者 inlinehorizontalObject{"left":2, "right":10, "justify": false}当 mode 为 horizontal 时有用，用来控制 label 的展示占比labelAlign"right" | "left""right"表单项标签对齐方式，默认右对齐，仅在 mode为horizontal 时生效labelWidthnumber | string表单项标签自定义宽度titlestring"表单"Form 的标题submitTextString"提交"默认的提交按钮名称，如果设置成空，则可以把默认按钮去掉。classNamestring外层 Dom 的类名bodyArray<表单项 or SchemaNode>Form 表单项集合actionsArray<行为按钮>Form 提交按钮，成员为 ActionmessagesObject消息提示覆写，默认消息读取的是 API 返回的消息，但是在此可以覆写它。messages.fetchSuccessstring获取成功时提示messages.fetchFailedstring获取失败时提示messages.saveSuccessstring保存成功时提示messages.saveFailedstring保存失败时提示wrapWithPanelbooleantrue是否让 Form 用 panel 包起来，设置为 false 后，actions 将无效。panelClassNamestring外层 panel 的类名apiAPIForm 用来保存数据的 api。initApiAPIForm 用来获取初始数据的 api。rules Array<{rule:string;
message:string;name?: string[]}>
表单组合校验规则intervalnumber3000刷新时间(最低 3000)silentPollingbooleanfalse配置刷新时是否显示加载动画stopAutoRefreshWhenstring""通过表达式 来配置停止刷新的条件initAsyncApiAPIForm 用来获取初始数据的 api,与 initApi 不同的是，会一直轮询请求该接口，直到返回 finished 属性为 true 才 结束。initFetchbooleantrue设置了 initApi 或者 initAsyncApi 后，默认会开始就发请求，设置为 false 后就不会起始就请求接口initFetchOnstring用表达式来配置initFinishedFieldstringfinished设置了 initAsyncApi 后，默认会从返回数据的 data.finished 来判断是否完成，也可以设置成其他的 xxx，就会从 data.xxx 中获取initCheckIntervalnumber3000设置了 initAsyncApi 以后，默认拉取的时间间隔asyncApiAPI设置此属性后，表单提交发送保存接口后，还会继续轮询请求该接口，直到返回 finished 属性为 true 才 结束。checkIntervalnumber3000轮询请求的时间间隔，默认为 3 秒。设置 asyncApi 才有效finishedFieldstring"finished"如果决定结束的字段名不是 finished 请设置此属性，比如 is_successsubmitOnChangebooleanfalse表单修改即提交submitOnInitbooleanfalse初始就提交一次resetAfterSubmitbooleanfalse提交后是否重置表单primaryFieldstring"id"设置主键 id, 当设置后，检测表单是否完成时（asyncApi），只会携带此数据。targetstring默认表单提交自己会通过发送 api 保存数据，但是也可以设定另外一个 form 的 name 值，或者另外一个 CRUD 模型的 name 值。 如果 target 目标是一个 Form ，则目标 Form 会重新触发 initApi，api 可以拿到当前 form 数据。如果目标是一个 CRUD 模型，则目标模型会重新触发搜索，参数为当前 Form 数据。当目标是 window 时，会把当前表单的数据附带到页面地址上。redirectstring设置此属性后，Form 保存成功后，自动跳转到指定页面。支持相对地址，和绝对地址（相对于组内的）。reloadstring操作完后刷新目标对象。请填写目标组件设置的 name 值，如果填写为 window 则让当前页面整体刷新。autoFocusbooleanfalse是否自动聚焦。canAccessSuperDatabooleantrue指定是否可以自动获取上层的数据并映射到表单项上persistDatastring""指定一个唯一的 key，来配置当前表单是否开启本地缓存persistDataKeysstring[]""指指定只有哪些 key 缓存clearPersistDataAfterSubmitbooleantrue指定表单提交成功后是否清除本地缓存preventEnterSubmitbooleanfalse禁用回车提交表单trimValuesbooleanfalsetrim 当前表单项的每一个值promptPageLeavebooleanfalseform 还没保存，即将离开页面前是否弹框确认。columnCountnumber0表单项显示为几列inheritDatabooleantrue默认表单是采用数据链的形式创建个自己的数据域，表单提交的时候只会发送自己这个数据域的数据，如果希望共用上层数据域可以设置这个属性为 false，这样上层数据域的数据不需要在表单中用隐藏域或者显式映射才能发送了。staticboolean2.4.0 整个表单静态方式展示，详情请查看示例页staticClassNamestring2.4.0 表单静态展示时使用的类名closeDialogOnSubmitboolean提交的时候是否关闭弹窗。当 form 里面有且只有一个弹窗的时候，本身提交会触发弹窗关闭，此属性可以关闭此行为
select
描述
下拉框选择器
示例代码
{
"type": "page",
"body": {
"type": "form",
"body": [
{
"label": "选项",
"type": "select",
"name": "select",
"menuTpl": "
"options": [
{
"label": "A",
"value": "a"
},
{
"label": "B",
"value": "b"
},
{
"label": "C",
"value": "c"
}
]
}
]
}
}
效果
图一
图二
select的属性表
属性名类型默认值说明optionsArray
input
描述
一类功能很全的输入框组件，可以有很多功能（还有很多使用的组件同学们可自行去官网查看使用嗷）
input-text
描述
常用于输入用户信息，或填写资料等，表单里不可或缺的表单项
示例代码
{
"type": "page",
"body": {
"type": "form",
"api": "/amis/api/mock2/form/saveForm",
"body": [
{
"name": "text",
"type": "input-text",
"label": "text"
}
]
}
}
效果
input-text的属性表
属性名类型默认值说明optionsArray
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模板最大值stepnumber步长precisionnumber精度，即小数点后几位，支持 0 和正整数showStepsbooleantrue是否显示上下点击按钮readOnlybooleanfalse只读prefixstring前缀suffixstring后缀unitOptionsstring[]单位选项1.4.0kilobitSeparatorbooleanfalse千分分隔keyboardbooleantrue键盘事件（方向上下）bigbooleanfalse是否使用大数2.3.0displayMode"base" | "enhance""base"样式类型borderMode"full" | "half" | "none""full"边框模式，全边框，还是半边框，或者没边框resetValuenumber | string""清空输入内容时，组件值将设置为 resetValueclearValueOnEmptybooleanfalse内容为空时从数据域中删除该表单项对应的值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属性表
属性名类型默认值说明allowCitybooleantrue允许选择城市allowDistrictbooleantrue允许选择区域searchablebooleanfalse是否出搜索框extractValuebooleantrue默认 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的属性表
属性名类型默认值说明版本valuestring默认值valueFormatstringX日期选择器值格式，更多格式类型请参考 文档3.4.0 版本后支持displayFormatstringYYYY-MM-DD日期选择器显示格式，即时间戳格式，更多格式类型请参考 文档3.4.0 版本后支持closeOnSelectbooleanfalse点选日期后，是否马上关闭选择框placeholderstring"请选择日期"占位文本shortcutsstring | string[] | Array<{"label": string; date: string}>日期快捷键，字符串格式为预设值，对象格式支持写表达式3.1.0版本后支持表达式minDatestring限制最小日期maxDatestring限制最大日期utcbooleanfalse保存 utc 值clearablebooleantrue是否可清除embedbooleanfalse是否内联模式disabledDatestring用字符函数来控制哪些天不可以被点选
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的属性表
属性名类型默认值说明版本valuestring默认值valueFormatstringX日期时间选择器值格式，更多格式类型请参考 文档3.4.0 版本后支持displayFormatstringYYYY-MM-DD HH:mm:ss日期时间选择器显示格式，即时间戳格式，更多格式类型请参考 文档3.4.0 版本后支持placeholderstring"请选择日期以及时间"占位文本shortcutsstring | string[] | Array<{"label": string; date: string}>日期时间快捷键3.1.0版本后支持表达式minDatestring限制最小日期时间maxDatestring限制最大日期时间utcbooleanfalse保存 utc 值clearablebooleantrue是否可清除embedbooleanfalse是否内联timeConstraintsobjecttrue请参考input-time 里的说明isEndDatebooleanfalse如果配置为 true，会自动默认为 23:59:59 秒disabledDatestring用字符函数来控制哪些天不可以被点选
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的属性表
属性名类型默认值说明版本allSheetsbooleanfalse是否解析所有 sheetparseMode'array' 或 'object''object'解析模式includeEmptybooleantrue是否包含空值plainTextbooleantrue是否解析为纯文本placeholderstring"拖拽 Excel 到这，或点击上传"占位文本提示2.8.1autoFillRecord
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的属性表
属性名类型默认值说明receiverAPI上传文件接口acceptstringtext/plain默认只支持纯文本，要支持其他类型，请配置此属性为文件后缀.xxxcapturestringundefined用于控制 input[type=file] 标签的 capture 属性，在移动端可控制输入来源asBase64booleanfalse将文件以base64的形式，赋值给当前组件asBlobbooleanfalse将文件以二进制的形式，赋值给当前组件maxSizenumber默认没有限制，当设置后，文件大小大于此值将不允许上传。单位为BmaxLengthnumber默认没有限制，当设置后，一次只允许上传指定数量文件。multiplebooleanfalse是否多选。dragbooleanfalse是否为拖拽上传joinValuesbooleantrue拼接值extractValuebooleanfalse提取值delimiterstring,拼接值autoUploadbooleantrue否选择完就自动开始上传hideUploadButtonbooleanfalse隐藏上传按钮stateTextMapobject{ init: '', pending: '等待上传', uploading: '上传中', error: '上传出错', uploaded: '已上传', ready: '' }上传状态文案fileFieldstringfile如果你不想自己存储，则可以忽略此属性。nameFieldstringname接口返回哪个字段用来标识文件名valueFieldstringvalue文件的值用那个字段来标识。urlFieldstringurl文件下载地址的字段名。btnLabelstring上传按钮的文字downloadUrlboolean或string"" 1.1.6 版本开始支持 post:http://xxx.com/${value} 这种写法默认显示文件路径的时候会支持直接下载，可以支持加前缀如：http://xx.dom/filename= ，如果不希望这样，可以把当前配置项设置为 false。useChunkboolean或"auto""auto"amis 所在服务器，限制了文件上传大小不得超出 10M，所以 amis 在用户选择大文件的时候，自动会改成分块上传模式。chunkSizenumber5 * 1024 * 1024分块大小startChunkApiAPIstartChunkApichunkApiAPIchunkApifinishChunkApiAPIfinishChunkApiconcurrencynumber分块上传时并行个数documentationstring文档内容documentLinkstring文档链接initAutoFillbooleantrue初表单反显时是否执行
input-password
描述
输入密码组件，可配置是否显示密码
示例代码
{
"type": "page",
"body": {
"type": "form",
"api": "/amis/api/mock2/form/saveForm",
"body": [
{
"type": "input-password",
"name": "password",
"label": "密码"
}
]
}
}
效果
input-password的属性表
属性名类型默认值说明revealPasswordbooleantrue是否展示密码显/隐按钮
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的属性表
属性名类型默认值说明saveAsUbbboolean是否保存为 ubb 格式receiverAPI默认的图片保存 APIvideoReceiverAPI默认的视频保存 API 仅支持 froala 编辑器fileFieldstring上传文件时的字段名sizestring框的大小，可设置为 md 或者 lgoptionsobject需要参考 tinymce 或 froala 的文档buttonsArray
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的属性表
属性名类型默认值说明typestring"input-table"指定为 Table 渲染器addablebooleanfalse是否可增加一行editablebooleanfalse是否可编辑removablebooleanfalse是否可删除showTableAddBtnbooleantrue是否显示表格操作栏添加按钮，前提是要开启可新增功能showFooterAddBtnbooleantrue是否显示表格下方添加按，前提是要开启可新增功能addApiAPI-新增时提交的 APIfooterAddBtnSchemaNode-底部新增按钮配置updateApiAPI-修改时提交的 APIdeleteApiAPI-删除时提交的 APIaddBtnLabelstring增加按钮名称addBtnIconstring"plus"增加按钮图标copyBtnLabelstring复制按钮文字copyBtnIconstring"copy"复制按钮图标editBtnLabelstring""编辑按钮名称editBtnIconstring"pencil"编辑按钮图标deleteBtnLabelstring""删除按钮名称deleteBtnIconstring"minus"删除按钮图标confirmBtnLabelstring""确认编辑按钮名称confirmBtnIconstring"check"确认编辑按钮图标cancelBtnLabelstring""取消编辑按钮名称cancelBtnIconstring"times"取消编辑按钮图标needConfirmbooleantrue是否需要确认操作，，可用来控控制表格的操作交互canAccessSuperDatabooleanfalse是否可以访问父级数据，也就是表单中的同级数据，通常需要跟 strictMode 搭配使用strictModebooleantrue为了性能，默认其他表单项项值变化不会让当前表格更新，有时候为了同步获取其他表单项字段，需要开启这个。minLengthnumber0最小行数, 2.4.1版本后支持变量maxLengthnumberInfinity最大行数, 2.4.1版本后支持变量perPagenumber-每页展示几行数据，如果不配置则不会显示分页器columnsarray[]列信息columns[x].quickEditboolean 或者 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": "
添加其他 Html 片段 需要支持变量替换（todo）.
"}
]
}
}
},
{
"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的属性表
属性名类型默认值说明版本optionsArray
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": {
"*": "${grade}"
}
}
]
}
}
效果
crud的属性表
属性名类型默认值说明版本typestringtype 指定为 CRUD 渲染器modestring"table""table" 、 "cards" 或者 "list"titlestring""可设置成空，当设置成空时，没有标题栏classNamestring表格外层 Dom 的类名apiAPICRUD 用来获取列表数据的 api。deferApiAPI当行数据中有 defer 属性时，用此接口进一步加载内容loadDataOnceboolean是否一次性加载所有数据（前端分页）loadDataOnceFetchOnFilterbooleantrue在开启 loadDataOnce 时，filter 时是否去重新请求 apisourcestring数据映射接口返回某字段的值，不设置会默认使用接口返回的${items}或者${rows}，也可以设置成上层数据源的内容filterForm设置过滤器，当该表单提交后，会把数据带给当前 mode 刷新列表。filterTogglableboolean | {label: string; icon: string; activeLabel: string; activeIcon?: stirng;}false是否可显隐过滤器filterDefaultVisiblebooleantrue设置过滤器默认是否可见。initFetchbooleantrue是否初始化的时候拉取数据, 只针对有 filter 的情况, 没有 filter 初始都会拉取数据intervalnumber3000刷新时间(最低 1000)silentPollingbooleanfalse配置刷新时是否隐藏加载动画stopAutoRefreshWhenstring""通过表达式来配置停止刷新的条件stopAutoRefreshWhenModalIsOpenbooleanfalse当有弹框时关闭自动刷新，关闭弹框又恢复syncLocationbooleantrue是否将过滤条件的参数同步到地址栏draggablebooleanfalse是否可通过拖拽排序resizablebooleantrue是否可以调整列宽度itemDraggableOnboolean用表达式来配置是否可拖拽排序saveOrderApiAPI保存排序的 api。quickSaveApiAPI快速编辑后用来批量保存的 API。quickSaveItemApiAPI快速编辑配置成及时保存时使用的 API。bulkActionsArray
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的属性表
属性名类型默认值说明版本typestring"type" 指定为 table 渲染器titlestring标题sourcestring${items}数据源, 绑定当前环境变量deferApiAPI当行数据中有 defer 属性时，用此接口进一步加载内容affixHeaderbooleantrue是否固定表头columnsTogglableauto 或者 booleanauto展示列显示开关, 自动即：列数量大于或等于 5 个时自动开启placeholderstring 或者 SchemaTpl暂无数据当没数据的时候的文字提示classNamestringpanel-default外层 CSS 类名tableClassNamestringtable-db table-striped表格 CSS 类名headerClassNamestringAction.md-table-header顶部外层 CSS 类名footerClassNamestringAction.md-table-footer底部外层 CSS 类名toolbarClassNamestringAction.md-table-toolbar工具栏 CSS 类名columnsArray
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": "<%= data.item %> "
}
}
}
效果
each的属性表
属性名类型默认值说明typestring"each"指定为 Each 组件valuearray[]用于循环的值namestring获取数据域中变量sourcestring获取数据域中变量， 支持 数据映射itemsobject使用value中的数据，循环输出渲染器。placeholderstring当 value 值不存在或为空数组时的占位文本itemKeyNamestringitem获取循环当前数组成员indexKeyNamestringindex获取循环当前索引
mapping
描述
根据匹配条件，替换内容，挺实用的
示例代码
{
"type": "page",
"body": {
"type": "mapping",
"value": "2",
"map": {
"1": "漂亮",
"2": "开心",
"3": "惊吓",
"4": "紧张",
"*": "其他：${type}"
}
}
}
效果
mapping的属性表
属性名类型默认值说明classNamestring外层 CSS 类名placeholderstring占位文本mapobject或Array
dialog
描述
Dialog 弹框 主要由 Action 触发，主要展示一个对话框以供用户操作
示例代码
{
"type": "page",
"body": {
"label": "点击弹框",
"type": "button",
"actionType": "dialog",
"dialog": {
"title": "弹框标题",
"body": "这是一个弹框"
}
}
}
效果
图一
图二
dialog的属性表
属性名类型默认值说明typestring"dialog" 指定为 Dialog 渲染器titleSchemaNode弹出层标题bodySchemaNode往 Dialog 内容区加内容sizestring指定 dialog 大小，支持: xs、sm、md、lg、xl、fullbodyClassNamestringmodal-bodyDialog body 区域的样式类名closeOnEscbooleanfalse是否支持按 Esc 关闭 DialogshowCloseButtonbooleantrue是否显示右上角的关闭按钮showErrorMsgbooleantrue是否在弹框左下角显示报错信息showLoadingbooleantrue是否在弹框左下角显示 loading 动画disabledbooleanfalse如果设置此属性，则该 Dialog 只读没有提交操作。actionsArray
drawer
描述
抽屉型弹出框
示例代码
{
"type": "page",
"body": {
"label": "弹出",
"type": "button",
"actionType": "drawer",
"drawer": {
"title": "抽屉标题",
"body": "这是一个抽屉"
}
}
}
效果
图一
图二
drawer的属性表
属性名类型默认值说明typestring"drawer" 指定为 Drawer 渲染器titleSchemaNode弹出层标题bodySchemaNode往 Drawer 内容区加内容sizestring指定 Drawer 大小，支持: xs、sm、md、lg、xlpositionstringright指定 Drawer 方向，支持: left、right、top、bottomclassNamestringDrawer 最外层容器的样式类名headerClassNamestringDrawer 头部 区域的样式类名bodyClassNamestringmodal-bodyDrawer body 区域的样式类名footerClassNamestringDrawer 页脚 区域的样式类名showCloseButtonbooleantrue是否展示关闭按钮，当值为 false 时，默认开启 closeOnOutsidecloseOnEscbooleanfalse是否支持按 Esc 关闭 DrawercloseOnOutsidebooleanfalse点击内容区外是否关闭 Draweroverlaybooleantrue是否显示蒙层resizablebooleanfalse是否可通过拖拽改变 Drawer 大小widthstring | number500px容器的宽度，在 position 为 left 或 right 时生效heightstring | number500px容器的高度，在 position 为 top 或 bottom 时生效actionsArray
toast
描述
轻提示
示例代码
{
"type": "page",
"body": [
{
"label": "提示",
"type": "button",
"actionType": "toast",
"toast": {
"items": [
{
"body": "轻提示内容"
}
]
}
},
{
"label": "提示2",
"type": "button",
"actionType": "toast",
"toast": {
"items": [
{
"body": "轻提示内容2"
}
]
}
}
]
}
效果
图一
图二
toast的属性表
属性名类型默认值说明actionTypestring"toast"指定为 toast 轻提示组件itemsArray
注
以上的所以api以及数据都是需要自己定义的，请勿直接cv，有问题可留言，我解决不了我就问我领导哈哈
小结
总的来说，基本用法都大差不差，都是先指定类型，然后再看看属性表里有没有能用到的属性，尝试着互相嵌套，搞清楚组件之间的逻辑关系，就可以入门啦！