# Form 自定义表单

自定义表单组件

  • 新增 inner 参数 2021/3/16
  • 新增 hook 处理 2021/3/10

基本使用

通过 group 参数,分组展示

通过 label 参数扩展标签

不使用弹窗

# 参数

参数 说明 类型 可选值 默认值
v-model / value 绑定值 object
inner 是否只显示表单 boolean

# 方法

方法名 说明 参数
create 创建表单,inner 下使用 { title, width, props, on, op, dialog, items }
open 打开表单 { title, width, props, on, op, dialog, items }
close 关闭表单
done 关闭 saving 状态
clear 清空表单值
showLoading 显示加载框
hiddenLoading 隐藏加载框
setData 根据对象层级设置参数 path, value
setOptions 设置下拉列表 prop, value
getForm 获取表单值 prop?
setForm 设置表单值 prop, value
toggleItem 切换 hidden 值 prop, flag?
hiddenItem 隐藏 props
showItem 显示 props
resetFields 对整个表单进行重置
clearValidate 移除表单项的校验结果 props: array / string
validateField 对部分表单字段进行校验的方法 props: array / string, callback
validate 对整个表单进行校验的方法 callback

# Inject 注入

参数 说明
form 表单值,可用于在子组件直接给表单赋值

示例

# open 有效值

其他方式查阅 component 渲染传送门

# props 表单参数

参数 说明 类型 可选值 默认值
inline 行内表单模式 boolean false
label-width 表单域标签的宽度 string 120px
label-position 表单域标签的位置 string left / top / right right
label-suffix 表单域标签的后缀 string
hide-required-asterisk 是否显示必填字段的标签旁边的红色星号 boolean false
show-message 是否显示校验错误信息 boolean true
inline-message 是否以行内形式展示校验信息 boolean false
status-icon 是否在输入框中显示校验结果反馈图标 boolean false
validate-on-rule-change 是否在 rules 属性改变后立即触发一次验证 boolean true
size 用于控制该表单内组件的尺寸 string medium / small / mini small
disabled 是否禁用该表单内的所有组件 boolean false

提示

propsel-form 的 Attributes 一致,传送门 (opens new window)

this.$refs["form"].open({
	props: {
		"label-width ": "120px"
	}
});

# on 表单事件

参数 说明 类型 可选值 默认值
load 窗口加载时触发 function(data, { close, done, submit })
close 关闭窗口时触发 function(done)
submit 表单提交 function(data, { close, done, $refs })
this.$refs["form"].open({
	items: [],
	on: {
		submit(data, { close, done }) {
			this.$service.system.user
				.add(data)
				.then(() => {
					this.$message.success("添加成功");
					close();
				})
				.catch(err => {
					this.$message.error(err);
					done();
				});
		}
	}
});

# op 操作栏配置

参数 说明 类型 可选值 默认值
hidden 是否显示操作按钮 boolean false
saveButtonText 保存按钮文本内容 string 保存
closeButtonText 关闭按钮文本内容 string 取消
buttons 按钮列表 array ['close', 'save']
this.$refs["form"].open({
	op: {
		saveButtonText: "确定",
		buttons: ["save"]
	}
});

支持自定义按钮:

this.$refs["form"].open({
	op: {
		buttons: ["save", <el-button size="small">检测</el-button>]
	}
});

# dialog 对话框配置

cl-dialog 参数一致,传送门

# items 表单项

参数 说明 类型 可选值 默认值
prop 字段 string
value 默认值,对应组件 componentv-model any
props 对应 component 组件的 prop 参数 any
label 标签文本 string, object
label.text 标签文本 string
label.icon 文本后的图标,如:el-icon-question string
label.tip el-tooltip 提示内容 string
component 组件,传送门 object
prepend 添加到 component 组件前,参数同 component 一致 object
append 添加到 component 组件后,参数同 component 一致 object
collapse 是否折叠 boolean
rules 验证规则 array, object
hidden 是否隐藏 boolean, string, function false
span 栅格占据的列数 number 24
flex 是否横向拉升元素 boolean true
group 分组显示 string
hook 钩子模式 array / string / object / function
hook.bind 表单值绑定时触发数据更新 array / string / object / function
hook.submit 表单提交时触发数据更新 array / string / object / function

# hook 用法 new

该参数设计于为了更方便的接收、提交参数。

当有这么一个场景,后端返回给你的 idList 是用 , 拼接的,如:

{
	idList: "1,2,3";
}

前端是需要你用 el-select 的组件展示,且需要多选模式 multiple。那一般的操作都是获取数据后对数据 split 分割,再绑定于 value 上。

这时候就可以用到 hook 参数,它可以在绑定 value 的时候预先处理数据:

{
	label: '角色列表',
	prop: 'ids',
	hook: {
		bind: ['split', 'number'], // 通道流程,分割 -> 转成number -> 绑定值
	},
	component: {
		name: 'el-select',
		props: {
			multiple: true
		},
		options: [
			{
				label: "李逍遥",
				value: 1
			},
			{
				label: "景天",
				value: 2
			},
			{
				label: "宇文拓",
				value: 3
			}
		]
	}
}

// 绑定的数据:
{
	ids: [1, 2, 3]
}

当然有些 讨厌 的后端又想让你以 1,2,3 逗号拼接的方式提交。那你也可以用 hook 参数处理,用 join 的方式拼接:

{
	label: '角色列表',
	prop: 'ids',
	hook: {
		bind: ['split', 'number'],  // 绑定通道流程,分割 -> 转成number -> 绑定值
		submit: ['join'],	// 提交通道流程,逗号拼接 -> 提交
	},
	component: {
		name: 'el-select',
		props: {
			multiple: true
		},
		options: [
			{
				label: "李逍遥",
				value: 1
			},
			{
				label: "景天",
				value: 2
			},
			{
				label: "宇文拓",
				value: 3
			}
		]
	}
}

// 提交的数据:
{
	ids: '1,2,3'
}

hook 已有的方法

名称 说明
number 转成 number, 如果值是数组,那每一项都会被操作到
string 转成 string, 如果值是数组,那每一项都会被操作到
split 字符串以 , 分割为数组
join 数组以 , 拼接为字符串
boolean 转成 boolean
booleanNumber 接收一个 boolean 值,返回 1 或 0

当然你也可以用自定义:

// 例如 value 为:"1,2,3"
{
	hook: {
		bind: (value, form) => {
			// value 是与 prop 绑定的值
			// form 是表单值

			return value.split(",").map(Number).filter(Boolean); // 结果为:[1, 2, 3]
		},
		submit: (value, form) => {
			return value.join(","); // 结果为:"1,2,3"
		}
	}
}

也可以多个处理:

hook: {
	bind: [
		'split', // 1 分割
		() => {
			// 2 自定义
		},
		'number', // 3 转成 number
	],
	submit: [
		'join', // 1 拼接
		() => {
			// 2 自定义
		}
	]
}

# hidden 用法

// 默认填入 boolean
{
	label: "姓名",
	prop: "name",
	hidden: false
}

// scope 为表单数据,自定义返回值
{
	label: "姓名",
	prop: "name",
	hidden: ({ scope }) => {
		return !scope.showName
	}
}

// 与指定 prop 绑定,hidden随着绑定值的变化而改变。用 @ 标识
{
	label: "姓名",
	prop: "name",
	hidden: "@showName",
}

// cl-upsert 下,根据新增或者编辑来隐藏显示。用 : 标识
{
	label: "姓名",
	prop: "name",
	hidden: ':isAdd',
	// hidden: ':isEdit',
}