封装 element-ui 的 Form表单

# 新建 Form.vue

src/components/Form.vue

# 引入页面

src/views/home.vue

# 自定义图片上传

使用 template 包含自定义的内容，slot一定要是file

上传组件根据业务而定，我预留了一个slot插槽用来显示自定义的上传组件

# 参数说明

属性	描述	默认值	必需
form	form表单	{}	是
options	表单配置	[]	是
inline	是否开启行内表单	false	否
search	是否开启搜索	false	否
searchText	搜索按钮文字	查询	否
rules	表单验证规则	{}	否
labelWidth	表单表头宽度	80px	否
size	控件大小	medium	否

# options

属性	描述	必需
title	表单表头	是
key	表单对应的字段	是
type	控件类型	是
rules	是否开启验证	否

# type

属性	描述
input	输入框
text	文本输入框
switch	开关
time	时间
date	日期
datetime	日期时间
date-to-date	开始日期 — 结束日期
datetime-to-datetime	开始日期时间 — 结束日期时间
number	数字
select	选择框
radio	单选框
checkbox	多选框

checkbox绑定字段的值一定要是: []

例如：checkbox: []

# option

只有在type为[select, radio, checkbox]时才需要设置

属性	描述	必需
data	数据源	是
Key	指定key对应data的唯一字段	是
label	指定label对应data的显示标题字段	是
value	指定value对应data的值字段	是

# 方法

属性	描述	回调函数
@onSearch	搜索事件	form

# 效果图

# 更多表单

# 效果图