frame/components/form.md

组件说明文档

form.vue

props

参数	类型	默认值	是否必填	说明
fields	Array	-	是	字段相关都在这里,用来自动输出,详情见下面
submitText	String	保存	否	默认保存按钮的文字
rules	Object	-	否	校验规则,不会找el-form的例子,不过使用的async-validator这个依赖为基础,会写这个也可以(那就厉害了,反正我是不行)
isNew	Boolean	-	是	修改还是添加的提示
data	Object	-	否	修改传来的数据
needSave	Boolean	false	否	是否禁用保存按钮
useEnter	Boolean	true	否	使用回车提交
reset	Boolean	true	否	提交后是否重置表单

fields

Array类型 必填

参数	类型	默认值	是否必填	说明
label	String	-	是	显示的字段中文
type	String	input	否	这个字段要用什么类型来输出 input的基本类型可选值:date,datetime,radio,checkbox,select,text(只显示值),editor(富文本编辑器),password
required	Boolean	-	否	是否必须输入
model	String	-	是	字段名
placeholder	String	-	否	占位,正常用,只是个透传
options	object	-	否	标签的属性设置,例如:textarea 需要显示剩余字数,或者input限制长度,都往这里写,key-value形式(键值对,json的基本了解,不知道百度,具体属性看你具体用那个组件,那个组件有什么属性,瞎写不一定好使)
custom	Boolean	-	否	是否使用自定义插槽
tip	String	-	否	提示语,例如:请输入11位电话号码
labelWidth	String	120px	否	表单label宽度,element的,默认120px
format	Function	-	否	当type = text 时需要将该字段内容转换,可以使用format
filterReturn	Boolean	-	否	针对这个选项需要在选择后就做些逻辑处理时,改成true,然后再使用filterReturn方法处理,(例如二级联动的情况)

methods

方法名	参数	说明
filterReturn	{data,prop}	查询条件栏过滤条件中filterReturn字段为true的回调方法

slot

插槽名	说明
options	fields中type为select的,选项都写在这个插槽中,多个select则需要区分options所属问题
radios	fields中type为radio的,选项都写在这个插槽中,多个radio则需要区分radios所属问题
checkbox	fields中type为checkbox的,选项都写在这个插槽中,多个checkbox则需要区分checkboxs所属问题
custom	自定义插槽,完全自己去写
submit	提交按钮部分,当needSave为false时才可以使用

关于自定义的用法: 在fields中,custom:true的情况即需要自定义,写法如下

<template #custom="{ item, form, fieldChange }"> ... </template>

参数名	说明
item	fields循环出来的每一项
form	组件内部的表单
fieldChange	组件内部的修改方法,此方法不一定必须使用,看情况来;参数:{model:xxx,value:XXX}(model:字段名,value:值)

在使用时,此插槽内的v-model可以写成form[item.model],也可以写成form.字段名

例如<el-input v-model="form[item.model]">或者<el-input v-model="form.xxx">

如果有多处需要自定义,请区分开去写

---

upload

参数	类型	默认值	是否必填	说明
url	String	-	是	上传地址
limit	Number	-	是	限制上传数量
data	any	-	否	上传数据
type	String	-	否	上传返回的字段
isBtn	Boolean	false	否	是否只显示按钮
showList	Boolean	true	否	是否显示上传列表
accept	String	-	否	可以上传的文件类型,不写就没限制
tip	String	-	否	提示信息
listType	String	picture-card	否	上传文件列表显示类型

method

方法名	返回参数	说明
upload	{type,data}	上传成功返回