基础介绍
为什么要用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,有问题可留言,我解决不了我就问我领导哈哈
小结
总的来说,基本用法都大差不差,都是先指定类型,然后再看看属性表里有没有能用到的属性,尝试着互相嵌套,搞清楚组件之间的逻辑关系,就可以入门啦!