# 表单属性/事件/方法

# 实例

<!-- 表单事件可以在元素中配置,也可以在schema中配置触发,接收的参数一样 -->
<es-form ref="form" 
    v-model="formValue"
    :schema="formSchema" 
    :global="global" 
    :hasConsole="hasConsole" 
    @inited="initedHandler" 
    @input="inputHandler" 
    @change="changeHandler" 
    @submit="submitHandler">
</es-form>

<script>
	export default {
		data() {
			return {
				formValue: {},
				formSchema: {
					ui: {},
					actions: {	// v1.6.0;表单事件在schema配置, 多个可写成数组
						trigger: "inited",
						handler: function(formValue) {}
					},
					properties: {
						name: "广告名称",
						author: "作者名称"
					}
				}
			};
		}
	};
</script>

# 表单属性

事件名称 类型 默认值 说明
value/v-model Object {} 绑定值(表单值)
schema Object {} 具体的表单配置
global Object {} 外部值;和rootData共同影响项隐藏等
hasConsole boolean -- 是否有调试控制台;当设置true或false时,优先级会高于全局的hasConsole,不设置则取全局的hasConsole

# 表单事件

事件名称 说明 回调参数 备注
inited 表单初始化完成时触发 (formValue) schema改变时(非深度监听),表单会重新初始化,inited会再次调用(inited未完成之前,用户行为事件(change、submit)暂不会触发,其它事件(input)不受影响)
input 表单的值有改变时触发 (formValue, keyPath) --
change 表单组件改变时触发 (formValue, keyPath, eventData) setValue不会触发
submit 提交表单 (formValue) form.submit(); 组件事件(@enterSubmit; @submit)会触发

注意

  1. 表单事件写法有两种,最好根据自已的应用场景,两者选其一:
    • 写法一:在元素中直接配置
    • 写法二:在schema的actions中配置1.6.0
  2. 若写法上两者都存在,两者都会触发:先触发actions中配置的事件,再触发元素中直接配置的事件;
  3. 两种写法的所返回的参数是一样(见上面),跟组件事件的参数不同,但写法跟组件事件的写法一样;
  4. actions函数的this指针是指向此表单。

# 表单方法

属性名 说明 参数 备注
getRef 取元素或组件 (name, hasEmpty, idxChain) 类似于ref;若项组件在表单数组中,则返回来的是一个数组见下面详解
注意:隐藏的项是不会取出的
hasEmpty1.8.0添加
checkAll 检查表单是否有错 返回true/false
submit 触发submit事件 --
isHidden 判断某项是否隐藏 (pathKey) --
getGlobal 取表单的全局数据 应用表单传入来的global
getRootData 取表单根值 实时取值,表单存在的值,包括隐藏的或临时的
getValue 取表单值 实时取值,表单存在的值;也是getRootData的别名
setValue 设置表单值 (pathKey, value) 当pathKey是Object时,值自动匹配设置;当pathKey为字符串时,则是设置某个值
getFormValue 取表单值 实时取值,用户提交所需要的值,不包括隐藏的或临时的;也就是v-model
getTabsIndex 取某一个tabs的索引 (pathKey) 返回当前tabs的索引,不是tabs返回false;(支持普通或数组tabs)
setTabsIndex 设某一个tabs的索引 (pathKey, index) 设置当前tabs的索引;(支持普通或数组tabs)
clearErrMsg1.6.2 清除错误信息 (pathKey, clearNext) 1. 当pathKey没有值时则清除所有,clearNext无效;
2. 当pathKey有值时,则是清除某一项,clearNext是对pathKey的补充,是否一起清除此项的后代
reset 重置表单值 (onlySchema) onlySchema1.7.5添加;默认为false
false:重置的值为schema配置formValue初始化时结合的值;
true:重置的值为仅为schema配置初始化时的值

# getRef

写法:form.getRef(name, hasEmpty, idxChain)
参数:

  • name 必填;在项组件中设置的ref名称
  • hasEmpty 选填;用于数组,默认为false1.8.0; 当返回值是数组时,数组中是否可返回空值
  • idxChain 选填;用于数组; 项组件所在的索引链; 具体作用是当取出是数组的时候,可以用idxChain指出来出是哪一个

注意

注意:隐藏的项(也就是属性hidden为true, 包括自身或父类隐藏)

  1. 返回值为非数组情况下:隐藏的项不会取出来;
  2. 返回值为数组情况下:当hasEmptyfalse时,则null隐藏的项)值不会返回;当hasEmptytrue,则null会返回;

项组件actions的具体写法