- FORM文档
- Variables
- Option Attributes
- Props Attributes
- Type Attributes
- Format Attributes
- Column Attributes
- Events
- Methods
- ScopedSlot
Variables
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
option | 组件配置属性,详情见下面Option属性 | Object | — | — |
upload-before | 图片上传前的回调,会暂停图片上传function(file,done),done用于继续图片上传 | Function | — | — |
upload-after | 图片上传后的回调,function(res,done),done用于结束操作 | Function | — | — |
Option Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
card | 卡片效果 | Boolean | true/false | false |
emptyBtn | 清空按钮 | Boolean | true/false | true |
emptySize | 清空按钮的大小 | String | medium/mini/small | medium |
emptyText | 清空按钮的文字 | String | - | 清空 |
group | 分组 | Array | - | - |
gutter | 项之间的间 | Number | - | 20 |
icon | 表单的标题图标 | String | - | 80 |
label | 表单的标题名称 | String | - | 80 |
labelWidth | 表单的label宽度 | String | - | 80 |
labelPosition | 表单的label位置 | String | left/top/right | left |
menuBtn | 是否显示按钮 | Boolean | true/false | true |
menuPostion | 按钮的位置 | String | left/center/right | center |
prop | 表单的标题列字段 | String | - | 80 |
props | 字典的全局key配置 | Object | - | - |
size | 表单全局控件的大小 | String | medium/mini/small | medium |
submitBtn | 提交按钮 | Boolean | true/false | true |
submitSize | 提交按钮的大小 | String | medium/mini/small | medium |
submitText | 提交按钮的文字 | String | - | 提交 |
Props Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
label | 字典的名称属性值 | String | — | — |
value | 字典的值属性值 | String | — | — |
children | 字典的子属性值 | String | — | — |
res | 网络字典返回的数据格式 | String | — | — |
Type Attributes
TIP
这是type属性可以配置的组件,当然你也可以自定义,参考第三方组件导入
参数 | 类型 |
---|
cascader | 级联框 |
checkbox | 多选框 |
date | 日期框 |
datetime | 日期时间框 |
daterange | 日期范围 |
datetimerange | 日期时间范围 |
dates | 多个日期 |
dynamic | 动态输入框 |
input | 输入框 |
month | 月 |
password | 密码框 |
radio | 单选框 |
select | 选择框 |
switch | 开关框 |
textarea | 文本框 |
time | 时间框 |
timerange | 时间范围 |
tree | 树框 |
week | 周 |
year | 年 |
使用format
指定输入框的格式;使用valueFormat
指定绑定值的格式。
默认情况下,组件接受并返回Date
对象。以下为可用的格式化字串,以UTC2017年1月2日03:04:05为例:
WARNING
请注意大小写
格式 | 含义 | 备注 | 举例 |
---|
yyyy | 年 | | 2017 |
M | 月 | 不补0 | 1 |
MM | 月 | | 01 |
W | 周 | 仅周选择器的format 可用;不补0 | 1 |
WW | 周 | 仅周选择器的format 可用 | 01 |
d | 日 | 不补0 | 2 |
dd | 日 | | 02 |
H | 小时 | 24小时制;不补0 | 3 |
HH | 小时 | 24小时制 | 03 |
h | 小时 | 12小时制,须和A 或a 使用;不补0 | 3 |
hh | 小时 | 12小时制,须和A 或a 使用 | 03 |
m | 分钟 | 不补0 | 4 |
mm | 分钟 | | 04 |
s | 秒 | 不补0 | 5 |
ss | 秒 | | 05 |
A | AM/PM | 仅format 可用,大写 | AM |
a | am/pm | 仅format 可用,小写 | am |
timestamp | JS时间戳 | 仅value-format 可用;组件绑定值为number 类型 | 1483326245000 |
Column Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|
accept | 为upload时文件类型 | String/Array | — | - |
cascaderChange | 级联选择时下级是否自选 | Boolean | true/false | true |
dataType | 数据的类型 | String | number/string | - |
cascaderItem | 需要级联的子节点prop | Array | - | - |
changeOnSelect | 是否允许选择任意一级的选项 | Boolean | true/false | false |
clearable | 表单清空 | Boolean | true/false | false |
disabled | 全部是否禁止 | Boolean | true/false | false |
defaultIndex | 级联选择下级默认选择的index | Number | - | 1 |
endPlaceholder | 日期范围结束占位符 | String | - | - |
formHeight | 表单行高度 | Number | - | auto |
formslot | 表单自定义 | Boolean | true/false | false |
formWidth | 表单行高度 | Number/String | - | 50% |
filesize | 为upload时文件的大小 | Number | - | - |
filterable | 级联框是否可以搜索 | Boolean | true/false | false |
Function(value,row,column) | - | - | | |
format | 显示值时间格式(当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates | - | - | - |
formatter | 用来格式化内容 | Function(row,value,label,column) | - | - |
label | 列名称 | String | — | - |
typeslot | 表单组件自定义 | Boolean | true/false | false |
multiple | 多选(当type为select/tree时) | Boolean | true/false | false |
minRows | 最小行(当type为ueditor/textarea) | Number | - | 2 |
maxRows | 最大行(当type为ueditor/textarea) | Number | - | 4 |
offset | 当前项的偏移量 | Number | - | 0 |
precision | 数字框输入精度(当type为number时) | Number | - | 2 |
prop | 列字段 | String | — | - |
placeholder | 辅助语 | String | — | 请选择/请输入+label |
readonly | 只读 | Boolean | true/false | false |
rules | 表单规则,参考ele表单规则配置 | Object | - | - |
row | 截断后面的排列 | Boolean | true/false | false |
span | 表单栅列 | Number | - | 12 |
startPlaceholder | 日期范围开始占位符 | String | - | - |
size | 表单大小 | String | small/mini | small |
showSllLevels | 级联输入框中是否显示选中值的完整路径 | Boolean | true/false | true |
separator | 级联输入框选项分隔符 | String | - | 斜杠'/' |
tip | 辅助提示语 | String | - | - |
tipPlacement | 辅助提示语的方向 | String | top-start/top/top-end/left-start/leftleft-end/right-start/right/right-endbottom-start/bottom/bottom-end | bottom |
type | 类型 | String | input/select/radio/checkbox/textarea/cascader/date/time/datetime/daterange/timerange/datetimerange/week/month/year/dates/ueditor/password/switch/tree | input |
display | 全部是否可见 | Boolean | true/false | true |
valueDefault | 表单的默认值 | Number/String | - | - |
checkStrictly | 不遵循父子规则 | Boolean | true/false | true |
tags | select组件多选时是否超出后合并标签 | Boolean | true/false | false |
valueFormat | 真实值的时间格式(当type为date/time/datetime/daterangetimerange/datetimerange/week/month/year/dates) | - | - | - |
Events
事件名 | 说明 | 参数 |
---|
reset-change | 重置表单回调 | |
submit | 表单提交事件 | |
Methods
方法名 | 说明 | 参数 |
---|
clearValidate | 清空表格钟表单验证。 | |
validate | 对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个promise | |
resetForm | 清空表单数据 | |
findColumnIndex | 根据prop去找column的配置属性的下标 | |
submit | 提交表单数据 | |
ScopedSlot
name | 说明 |
---|
列的名称 | 列自定义列的内容,参数为{row,label,dic,$index} |
列表单的名称 | 表单自定义列的内容,参数为{row,label,dic,$index} |
列表单的名称+Header(nameHeader) | 表单分组头部自定义的内容 |
列表单的名称+Type(nameType) | 表单自定义列的内容,参数为{row,label,value} |
menuForm | 表单操作按钮的自定义内容,参数为{row,label,dic,$index} |