表单参数列表

参数	说明	类型	默认值	可选值
formAttrs	表单项属性（详情见表单项参数列表）	Arrary	[]	---
formInfo	编辑实体	Object	{}	---
title	表单标题	String	新增	String
isreadonly	是否禁用表单	Boolean	false	---
width	表单宽度	Number	780	---
labelWidth	表单项标题宽度	Number	120	---
itemWidth	表单项宽度	Number	320	---
fullscreen	全屏	Boolean	false	---
showFooter	是否显示底部操作按钮	Boolean	true	---
center	底部操作按钮是否居中	String	center	center,left,right
showCommitBtn	是否显示提交按钮	Boolean	true	---
showCancelBtn	是否显示取消按钮	Boolean	true	---
commitText	提交按钮文本	String	提交	---
cancelText	取消按钮文本	String	取消	---

表单项参数列表

参数	说明	类型	默认值
title	表单项标题	String	---
key	表单项绑定值 key	String	---
val	表单项的值	any	any
change	表单项值改变触发事件	Function(data)参数是表单数据	undefined
-------	表单项默认类型是 text 类型,input 输入框	-----	----
number	数字输入框	Boolean	undefined
password	文本输入框有效，设置后变成密码框	Boolean	undefined
prefix	文本输入框或数字输入框的前缀	String	undefined
suffix	文本输入框或数字输入框的后缀，如果设置为 true，显示默认的三个点	Boolean,String	undefined
click	suffix 单击后缀执行事件	Function(data)参数是表单数据	undefined
date	日期输入框	Boolean	undefined
time	时间输入框	Boolean	undefined
dicts	选择框初始值。格式[{label:title,value:val}]	Array	[]
query	选择框查询方法,执行 callBack 方法赋值给 dicts	Function(words,callBack)	undefined
area	多行方本框	Boolean	undefined
radio	单选框	Array	[]
checkbox	多选框	Array	[]
labels	单选框和多选框有效，显示单选框和多选框字段，和 values 数组长度等长	Array	[]
switch	开关	Boolean	undefined
trueColor	开关有效,选中时背景色	String	#13ce66
falseColor	开关有效,未选中时背景色	String	#ff4949`
switchWidth	开关有效,开关长度	number	---

表单 Events

事件名称	说明	回调参数
saveData	保存表单数据	form 对象数据
close	关闭表单窗体执行事件	---

---

validate

校验规则	说明	值
required	不能为空	true,false
email	邮箱格式	true,false
max	最大长度	number
validate	自定义验证	function(rule, value, callback)

表单自定义验证示例

formAttrs: [
  {
    key: "name",
    title: "姓名",
    val: "",
    required: true, //必填
    //自定义验证
    validate: (rule, value, callback) => {
      if (value === "fail") {
        callback(new Error("测试错误！"));
      } else {
        callback();
      }
    },
  },
  { key: "age", title: "年龄", val: "18", number: true }, //数字
  { key: "company", title: "公司", val: "", max: 10 }, //最大长度
  {
    key: "url",
    title: "日期",
    val: "",
    date: true, //日期
    width: 650,
  },
];

表单 slot 重写

表单项各项都可以用插槽重写，slot name=item.key

<g-add-form :formAttrs="currdata" height="calc(100vh - 100px)">
  <div slot="name">这里可以放任何HTML</div>
  <div slot="age">这里替换编辑控件</div>
</g-add-form>

name	说明
add-title	重写弹窗标题
add-footer	重写弹窗 footer

---