Element-UI整理（二）：表单

目录

1. Radio 单选框
2. Checkbox 多选框
3. Input 输入框
4. InputNumber 计数器
5. Select 选择器
6. Cascader 级联选择器
7. Switch 开关
8. Slider 滑块
9. TimePicker 时间选择器
10. DatePicker 日期选择器
11. DateTimePicker 日期时间选择器
12. Upload 上传
13. Rate 评分
14. ColorPicker 颜色选择器
15. Transfer 穿梭框
16. Form 表单

内容

Radio

Radio Attributes：

参数	说明	类型	可选值	默认值
label	Radio 的 value	string / number / boolean	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Radio 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—
name	原生 name 属性	string	—	—

Radio Events：

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

Radio-group Attributes：

参数	说明	类型	可选值	默认值
size	单选框组尺寸，仅对按钮形式的 Radio 或带有边框的 Radio 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
text-color	按钮形式的 Radio 激活时的文本颜色	string	—	#ffffff
fill	按钮形式的 Radio 激活时的填充色和边框色	string	—	#409EFF

Radio-group Events：

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

Radio-button Attributes：

参数	说明	类型	可选值	默认值
label	Radio 的 value	string / number	—	—
disabled	是否禁用	boolean	—	false
name	原生 name 属性	string	—	—

Checkbox

Checkbox Attributes

参数	说明	类型	可选值	默认值
label	选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）	string / number / boolean	—	—
true-label	选中时的值	string / number	—	—
false-label	没有选中时的值	string / number	—	—
disabled	是否禁用	boolean	—	false
border	是否显示边框	boolean	—	false
size	Checkbox 的尺寸，仅在 border 为真时有效	string	medium / small / mini	—
name	原生 name 属性	string	—	—
checked	当前是否勾选	boolean	—	false
indeterminate	设置 indeterminate 状态，只负责样式控制	boolean	—	false

Checkbox Events

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	更新后的值

Checkbox-group Attributes

参数	说明	类型	可选值	默认值
size	多选框组尺寸，仅对按钮形式的 Checkbox 或带有边框的 Checkbox 有效	string	medium / small / mini	—
disabled	是否禁用	boolean	—	false
min	可被勾选的 checkbox 的最小数量	number	—	—
max	可被勾选的 checkbox 的最大数量	number	—	—
text-color	按钮形式的 Checkbox 激活时的文本颜色	string	—	#ffffff
fill	按钮形式的 Checkbox 激活时的填充色和边框色	string	—	#409EFF

Checkbox-group Events

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	更新后的值

Checkbox-button Attributes

参数	说明	类型	可选值	默认值
label	选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）	string / number / boolean — —
true-label	选中时的值	string / number	—	—
false-label	没有选中时的值	string / number	—	—
disabled	是否禁用	boolean	—	false
name	原生 name 属性	string	—	—
checked	当前是否勾选	boolean	—	false

Input

Input Attributes

参数	说明	类型	可选值	默认值
type	类型	string	text / textarea	text
value	绑定值	string / number	—	—
maxlength	最大输入长度	number	—	—
minlength	最小输入长度	number	—	—
placeholder	输入框占位文本	string	—	—
clearable	是否可清空	boolean	—	false
disabled	禁用	boolean	—	false
size	输入框尺寸，只在 type!=“textarea” 时有效	string	medium / small / mini	—
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—
rows	输入框行数，只对 type=“textarea” 有效	number	—	2
autosize	自适应内容高度，只对 type=“textarea” 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }	boolean / object	—	false
auto-complete	原生属性，自动补全	string	on, off	off
name	原生属性	string	—	—
readonly	原生属性，是否只读	boolean	—	false
max	原生属性，设置最大值	—	—	—
min	原生属性，设置最小值	—	—	—
step	原生属性，设置输入字段的合法数字间隔	—	—	—
resize	控制是否能被用户缩放	string	none, both, horizontal, vertical	—
autofocus	原生属性，自动获取焦点	boolean	true, false	false
form	原生属性	string	—	—
label	输入框关联的label文字	string	—	—
tabindex	输入框的tabindex	string	—	—

Input slots：

name	说明
prefix	输入框头部内容，只对 type=“text” 有效
suffix	输入框尾部内容，只对 type=“text” 有效
prepend	输入框前置内容，只对 type=“text” 有效
append	输入框后置内容，只对 type=“text” 有效

Input Events

事件名称	说明	回调参数
blur	在 Input 失去焦点时触发	(event: Event)
focus	在 Input 获得焦点时触发	(event: Event)
change	在 Input 值改变时触发	(value: string

Input Methods

方法名	说明	参数
focus	使 input 获取焦点	-

Autocomplete Attributes

参数	说明	类型	可选值	默认值
placeholder	输入框占位文本	string	—	—
disabled	禁用	boolean	—	false
valueKey	输入建议对象中用于显示的键名	string	—	value
value	必填值，输入绑定值	string	—	—
debounce	获取输入建议的去抖延时	number	—	300
fetch-suggestions	返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它	Function(queryString, callback)	—	—
popper-class	Autocomplete 下拉列表的类名	string	—	—
trigger-on-focus	是否在输入框 focus 时显示建议列表	boolean	—	true
name	原生属性	string	—	—
select-when-unmatched	在输入没有任何匹配建议的情况下，按下回车是否触发 select 事件	boolean	—	false
label	输入框关联的label文字	string	—	—
prefix-icon	输入框头部图标	string	—	—
suffix-icon	输入框尾部图标	string	—	—

Autocomplete slots

name	说明
prefix	输入框头部内容
suffix	输入框尾部内容
prepend	输入框前置内容
append	输入框后置内容

Autocomplete Events

事件名称	说明	回调参数
select	点击选中建议项时触发	选中建议项

InputNumber

Attributes

参数	说明	类型	可选值	默认值
value	绑定值	number	—	—
min	设置计数器允许的最小值	number	—	0
max	设置计数器允许的最大值	number	—	Infinity
step	计数器步长	number	—	1
size	计数器尺寸	string	medium、small、mini	—
disabled	是否禁用计数器	boolean	—	false
controls	是否使用控制按钮	boolean	—	true
debounce	输入时的去抖延迟，毫秒	number	—	300
controls-position	控制按钮位置	string	right -
name	原生属性	string	—	—
label	输入框关联的label文字	string	—	—

Events

事件名称	说明	回调参数
change	绑定值被改变时触发	最后变更的值
blur	在组件 Input 失去焦点时触发	(event: Event)
focus	在组件 Input 获得焦点时触发	(event: Event)

Methods

方法名	说明	参数
focus	使 input 获取焦点	-

Select

Select Attributes

参数	说明	类型	可选值	默认值
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
value-key	作为 value 唯一标识的键名，绑定值为对象类型时必填	string	—	value
size	输入框尺寸	string	large/small/mini	—
clearable	单选时是否可以清空选项	boolean	—	false
collapse-tags	多选时是否将选中值按文字的形式展示	boolean	—	false
multiple-limit	多选时用户最多可以选择的项目数，为 0 则不限制	number	—	0
name	select input 的 name 属性	string	—	—
placeholder	占位符	string	—	请选择
filterable	是否可搜索	boolean	—	false
allow-create	是否允许用户创建新条目，需配合 filterable 使用	boolean	—	false
filter-method	自定义搜索方法	function	—	—
remote	是否为远程搜索	boolean	—	false
remote-method	远程搜索方法	function	—	—
loading	是否正在从远程获取数据	boolean	—	false
loading-text	远程加载时显示的文字	string	—	加载中
no-match-text	搜索条件无匹配时显示的文字	string	—	无匹配数据
no-data-text	选项为空时显示的文字	string	—	无数据
popper-class	Select 下拉框的类名	string	—	—
reserve-keyword	多选且可搜索时，是否在选中一个选项后保留当前的搜索关键词	boolean	—	false
default-first-option	在输入框按下回车，选择第一个匹配项。需配合 filterable 或 remote 使用	boolean	-	false

Select Events

事件名称	说明	回调参数
change	选中值发生变化时触发	目前的选中值
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false
remove-tag	多选模式下移除tag时触发	移除的tag值
clear	可清空的单选模式下用户点击清空按钮时触发	—
blur	当 input 失去焦点时触发	(event: Event)
focus	当 input 获得焦点时触发	(event: Event)

Option Group Attributes

参数	说明	类型	可选值	默认值
label	分组的组名	string	—	—
disabled	是否将该分组下所有选项置为禁用	boolean	—	false

Option Attributes

参数	说明	类型	可选值	默认值
value	选项的值	string/number/object	—	—
label	选项的标签，若不设置则默认与 value 相同	string/number	—	—
disabled	是否禁用该选项	boolean	—	false

Methods

方法名	说明	参数
focus	使 input 获取焦点	-

Cascader

Attributes

参数	说明	类型	可选值	默认值
options	可选项数据源，键名可通过 props 属性配置	array	—	—
props	配置选项，具体见下表	object	—	—
value	选中项绑定值	array	—	—
separator	选项分隔符	string	—	斜杠’/’
popper-class	自定义浮层类名	string	—	—
placeholder	输入框占位文本	string	—	请选择
disabled	是否禁用	boolean	—	false
clearable	是否支持清空选项	boolean	—	false
expand-trigger	次级菜单的展开方式	string	click / hover	click
show-all-levels	输入框中是否显示选中值的完整路径	boolean	—	true
filterable	是否可搜索选项	boolean	—	—
debounce	搜索关键词输入的去抖延迟，毫秒	number	—	300
change-on-select	是否允许选择任意一级的选项	boolean	—	false
size	尺寸	string	medium / small / mini	—
before-filter	筛选之前的钩子，参数为输入的值，若返回 false 或者返回 Promise 且被 reject，则停止筛选	function(value)	—	—

props

参数	说明	类型	可选值	默认值
value	指定选项的值为选项对象的某个属性值	string	—	—
label	指定选项标签为选项对象的某个属性值	string	—	—
children	指定选项的子选项为选项对象的某个属性值	string	—	—
disabled \指定选项的禁用为选项对象的某个属性值	string	—	—

Events

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	当前值
active-item-change	当父级选项变化时触发的事件，仅在 change-on-select 为 false 时可用	各父级选项组成的数组

Switch

Attributes

参数	说明	类型	可选值	默认值
disabled	是否禁用	boolean	—	false
width	switch 的宽度（像素）	number	—	40
active-icon-class	switch 打开时所显示图标的类名，设置此项会忽略 active-text	string	—	—
inactive-icon-class	switch 关闭时所显示图标的类名，设置此项会忽略 inactive-text	string	—	—
active-text	switch 打开时的文字描述	string	—	—
inactive-text	switch 关闭时的文字描述	string	—	—
active-value	switch 打开时的值	boolean / string / number	—	true
inactive-value	switch 关闭时的值	boolean / string / number	—	false
active-color	switch 打开时的背景色	string	—	#409EFF
inactive-color	switch 关闭时的背景色	string	—	#C0CCDA
name	switch 对应的 name 属性	string	—	—

Events

事件名称	说明	回调参数
change	switch 状态发生变化时的回调函数	新状态的值

Methods

方法名	说明	参数
focus	使 Switch 获取焦点	-

Slider

Attributes

参数	说明	类型	可选值	默认值
min	最小值	number	—	0
max	最大值	number	—	100
disabled	是否禁用	boolean	—	false
step	步长	number	—	1
show-input	是否显示输入框，仅在非范围选择时有效	boolean	—	false
show-input-controls	在显示输入框的情况下，是否显示输入框的控制按钮	boolean	—	true
show-stops	是否显示间断点	boolean	—	false
show-tooltip	是否显示 tooltip	boolean	—	true
format-tooltip	格式化 tooltip message	function(value)	—	—
range	是否为范围选择	boolean	—	false
vertical	是否竖向模式	boolean	—	false
height	Slider 高度，竖向模式时必填	string	—	—
label	屏幕阅读器标签	string	—	—
debounce	输入时的去抖延迟，毫秒，仅在show-input等于true时有效	number	—	300

Events

事件名称	说明	回调参数
change	值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）	改变后的值

TimePicker

Attributes

参数	说明	类型	可选值	默认值
readonly	完全只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
size	输入框尺寸	string	medium / small / mini	—
placeholder	非范围选择时的占位内容	string	—	—
start-placeholder	范围选择时开始日期的占位内容	string	—	—
end-placeholder	范围选择时开始日期的占位内容	string	—	—
is-range	是否为时间范围选择，仅对有效	boolean	—	false
arrow-control	是否使用箭头进行时间选择，仅对有效 boolean	—	false
value	绑定值	date(TimePicker) / string(TimeSelect)	—	—
align	对齐方式	string	left / center / right	left
popper-class	TimePicker	下拉框的类名	string	—
picker-options	当前时间日期选择器特有的选项参考下表	object	—	{}
range-separator	选择范围时的分隔符	string	-	‘-’
value-format	可选，仅TimePicker时可用，绑定值的格式，同DatePicker	string	小时 HH，分 mm，秒 ss，AM/PM A	—
default-value	可选，选择器打开时默认显示的时间	Date(TimePicker) / string(TimeSelect)	可被new Date()解析(TimePicker) / 可选值(TimeSelect)	—
name	原生属性	string	—	—

Time Select Options

参数	说明	类型	可选值	默认值
start	开始时间	string	—	09:00
end	结束时间	string	—	18:00
step	间隔时间	string	—	00:30
minTime	最小时间，小于该时间的时间段将被禁用	string	—	00:00
maxTime	最大时间，大于该时间的时间段将被禁用	string	—

Time Picker Options

参数	说明	类型	可选值	默认值
selectableRange	可选时间段，例如’18:30:00 - 20:30:00’或者传入数组[‘09:30:00 - 12:00:00’, ‘14:30:00 - 18:30:00’]	string / array	—	—
format	时间格式化(TimePicker)	string	小时：HH，分：mm，秒：ss，AM/PM A	‘HH:mm:ss’

Events

事件名	说明	参数
change	用户确认选定的值时触发	组件绑定值
blur	当 input 失去焦点时触发	组件实例
focus	当 input 获得焦点时触发	组件实例

Methods

方法名	说明	参数
focus	使 input 获取焦点	-

DatePicker

Attributes

参数	说明	类型	可选值	默认值
readonly	完全只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
size	输入框尺寸	string	large, small, mini	—
placeholder	非范围选择时的占位内容	string	—	—
start-placeholder	范围选择时开始日期的占位内容	string	—	—
end-placeholder	范围选择时结束日期的占位内容	string	—	—
type	显示类型	string	year/month/date/week/ datetime/datetimerange/daterange	date
format	显示在输入框中的格式	string	年 yyyy，月 MM，日 dd，小时 HH，分 mm，秒 ss，AM/PM A	yyyy-MM-dd
align	对齐方式	string	left, center, right	left
popper-class	DatePicker 下拉框的类名	string	—	—
picker-options	当前时间日期选择器特有的选项参考下表	object	—	{}
range-separator	选择范围时的分隔符	string	—	‘-’
default-value	可选，选择器打开时默认显示的时间	Date	可被new Date()解析	—
value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象	string	年 yyyy，月 MM，日 dd，小时 HH，分 mm，秒 ss，AM/PM A	—
name	原生属性	string	—	—
unlink-panels	在范围选择器里取消两个日期面板之间的联动	boolean	—	false

Picker Options

参数	说明	类型	可选值	默认值
shortcuts	设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表	Object[]	—	—
disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean	Function	—	—
firstDayOfWeek	周起始日	Number	1 到 7	7
onPick	选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效	Function({ maxDate, minDate })	—	—

Shortcuts

参数	说明	类型	可选值	默认值
text	标题文本	string	—	—
onClick	选中后的回调函数，参数是 vm，可通过触发 ‘pick’ 事件设置选择器的值。例如 vm.$emit(‘pick’, new Date())	function	—	—

Events

事件名称	说明	回调参数
change	用户确认选定的值时触发组件绑定值。格式与绑定值一致，可受 value-format 控制
blur	当 input 失去焦点时触发	组件实例
focus	当 input 获得焦点时触发	组件实例

Methods

方法名	说明	参数
focus	使 input 获取焦点	—

DateTimePicker

Attributes

参数	说明	类型	可选值	默认值
readonly	完全只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
size	输入框尺寸	string	large, small, mini	—
placeholder	非范围选择时的占位内容	string	—	—
start-placeholder	范围选择时开始日期的占位内容	string	—	—
end-placeholder	范围选择时结束日期的占位内容	string	—	—
time-arrow-control	是否使用箭头进行时间选择	boolean	—	false
type	显示类型	string	year/month/date/week/ datetime/datetimerange/daterange	date
format	显示在输入框中的格式	string	年 yyyy，月 MM，日 dd，小时 HH，分 mm，秒 ss，AM/PM A	yyyy-MM-dd
align	对齐方式	string	left, center, right	left
popper-class	DateTimePicker 下拉框的类名	string	—	—
picker-options	当前时间日期选择器特有的选项参考下表	object	—	{}
range-separator	选择范围时的分隔符	string	-	‘-’
default-value	可选，选择器打开时默认显示的时间	Date	可被new Date()解析	—
value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象	string	年 yyyy，月 MM，日 dd，小时 HH，分 mm，秒 ss，AM/PM A	—
name	原生属性	string	—	—
unlink-panels	在范围选择器里取消两个日期面板之间的联动 boolean	—	false

Picker Options

参数	说明	类型	可选值	默认值
shortcuts	设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表	Object[]	—	—
disabledDate	设置禁用状态，参数为当前日期，要求返回 Boolean	Function	—	—
firstDayOfWeek	周起始日	Number	1 到 7	7

Shortcuts

参数	说明	类型	可选值	默认值
text	标题文本	string	—	—
onClick	选中后的回调函数，参数是 vm，可通过触发 ‘pick’ 事件设置选择器的值。例如 vm.$emit(‘pick’, new Date())	function	—	—

Events

Event Name	Description	Parameters
change	用户确认选定的值时触发 组件绑定值。	格式与绑定值一致，可受 value-format 控制
blur	当 input 失去焦点时触发	组件实例
focus	当 input 获得焦点时触发	组件实例

Methods

方法名	说明	参数
focus	使 input 获取焦点	—

Upload

Attribute

参数	说明	类型	可选值	默认值
action	必选参数，上传的地址	string	—	—
headers	设置上传的请求头部	object	—	—
multiple	是否支持多选文件	boolean	—	—
data	上传时附带的额外参数	object	—	—
name	上传的文件字段名	string	—	file
with-credentials	支持发送 cookie 凭证信息	boolean	—	false
show-file-list	是否显示已上传文件列表	boolean	—	true
drag	是否启用拖拽上传	boolean	—	false
accept	接受上传的文件类型（thumbnail-mode 模式下此参数无效）	string	—	—
on-preview	点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据	function(file)	—	—
on-remove	文件列表移除文件时的钩子	function(file, fileList)	—	—
on-success	文件上传成功时的钩子	function(response, file, fileList)	—	—
on-error	文件上传失败时的钩子	function(err, file, fileList)	—	—
on-progress	文件上传时的钩子	function(event, file, fileList)	—	—
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)	—	—
before-upload	上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。	function(file)	—	—
before-remove	删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止上传。	function(file, fileList)	—	—
list-type	文件列表的类型	string	text/picture/picture-card	text
auto-upload	是否在选取文件后立即进行上传	boolean	—	true
file-list	上传的文件列表, 例如: [{name: ‘food.jpg’, url: ‘https://xxx.cdn.com/xxx.jpg’}]	array	—	[]
http-request	覆盖默认的上传行为，可以自定义上传的实现	function	—	—
disabled	是否禁用	boolean	—	false
limit	最大允许上传个数	number	—	—
on-exceed	文件超出个数限制时的钩子	function(files, fileList)	—	-

Methods

方法名	说明	参数
clearFiles	清空已上传的文件列表（该方法不支持在 before-upload 中调用）	—
abort	取消上传请求	（ file: fileList 中的 file 对象 ）

Rate

Attributes

参数	说明	类型	可选值	默认值
max	最大分值	number	—	5
disabled	是否为只读	boolean	—	false
allow-half	是否允许半选	boolean	—	false
low-threshold	低分和中等分数的界限值，值本身被划分在低分中	number	—	2
high-threshold	高分和中等分数的界限值，值本身被划分在高分中	number	—	4
colors	icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色	array	—	[’#F7BA2A’, ‘#F7BA2A’, ‘#F7BA2A’]
void-color	未选中 icon 的颜色	string	—	#C6D1DE
disabled-void-color	只读时未选中 icon 的颜色	string	—	#EFF2F7
icon-classes	icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名	array	—	[‘el-icon-star-on’, ‘el-icon-star-on’,‘el-icon-star-on’]
void-icon-class	未选中 icon 的类名	string	—	el-icon-star-off
disabled-void-icon-class	只读时未选中 icon 的类名	string	—	el-icon-star-on
show-text	是否显示辅助文字，若为真，则会从 texts 数组中选取当前分数对应的文字内容	boolean	—	false
show-score	是否显示当前分数，show-score 和 show-text 不能同时为真	boolean	—	false
text-color	辅助文字的颜色	string	—	#1F2D3D
texts	辅助文字数组	array	—	[‘极差’, ‘失望’, ‘一般’, ‘满意’, ‘惊喜’]
score-template	分数显示模板	string	—	{value}

Events

事件名称	说明	回调参数
change	分值改变时触发	改变后的分值

ColorPicker

Attributes

参数	说明	类型	可选值	默认值
disabled	是否禁用	boolean	—	false
size	尺寸	string	—	medium / small / mini
show-alpha	是否支持透明度选择	boolean	—	false
color-format	写入 v-model 的颜色的格式	string	hsl / hsv / hex / rgb	hex（show-alpha 为 false）/ rgb（show-alpha 为 true）
popper-class	ColorPicker 下拉框的类名	string	—	—

Events

事件名称	说明	回调参数
change	当绑定值变化时触发	当前值
active-change	面板中当前显示的颜色发生改变时触发	当前显示的颜色值

Transfer

Attributes

参数	说明	类型	可选值	默认值
data	Transfer 的数据源	array[{ key, label, disabled }]	—	[ ]
filterable	是否可搜索	boolean	—	false
filter-placeholder	搜索框占位符	string	—	请输入搜索内容
filter-method	自定义搜索方法	function	—	—
titles	自定义列表标题	array	—	[‘列表 1’, ‘列表 2’]
button-texts	自定义按钮文案	array	—	[ ]
render-content	自定义数据项渲染函数	function(h, option)	—	—
format	列表顶部勾选状态文案	object{noChecked, hasChecked}	—	{ noChecked: ‘$checked/${total}’, hasChecked: ‘$checked/${total}’ }
props	数据源的字段别名	object{key, label, disabled}	—	—
left-default-checked	初始状态下左侧列表的已勾选项的 key 数组	array	—	[ ]
right-default-checked	初始状态下右侧列表的已勾选项的 key 数组	array	—	[ ]

Slot

name	说明
left-footer	左侧列表底部的内容
right-footer	右侧列表底部的内容

Events

事件名称	说明	回调参数
change	右侧列表元素变化时触发 当前值、数据移动的方向（‘left’ / ‘right’）、发生移动的数据 key	数组

From

Form Attributes

参数	说明	类型	可选值	默认值
model	表单数据对象	object	—	—
rules	表单验证规则	object	—	—
inline	行内表单模式	boolean	—	false
label-position	表单域标签的位置	string	right/left/top	right
label-width	表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值	string	—	—
label-suffix	表单域标签的后缀	string	—	—
show-message	是否显示校验错误信息	boolean	—	true
inline-message	是否以行内形式展示校验信息	boolean	—	false
status-icon	是否在输入框中显示校验结果反馈图标	boolean	—	false
size	用于控制该表单内组件的尺寸	string	medium / small / mini	-

Form Methods

方法名	说明	参数
validate	对整个表单进行校验的方法。若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean))
validateField	对部分表单字段进行校验的方法 Function(prop: string, callback:	Function(errorMessage: string))
resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果	-
clearValidate	移除整个表单的校验结果	-

Form-Item Attributes

参数	说明	类型	可选值	默认值
prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的	string	传入 Form 组件的 model 中的字段	—
label	标签文本	string	—	—
label-width	表单域标签的的宽度，例如 ‘50px’	string	—	—
required	是否必填，如不设置，则会根据校验规则自动生成	bolean	—	false
rules	表单验证规则	object	—	—
error	表单域验证错误信息, 设置该值会使表单验证状态变为error，并显示该错误信息	string	—	—
show-message	是否显示校验错误信息	boolean	—	true
inline-message	以行内形式展示校验信息	boolean	—	false
size	用于控制该表单域下组件的尺寸	string	medium / small / mini	-

Form-Item Slot

name	说明
—	Form Item 的内容
label	标签文本的内容

Form-Item Methods

方法名	说明	参数
resetField	对该表单项进行重置，将其值重置为初始值并移除校验结果	-