# dynamic-form
# 属性
参数 | 说明 | 类型 | 可选值 | 默认值 | 必传 |
---|---|---|---|---|---|
value | 表单数据对象 | object | 是 | ||
lang | 显示语言 | string | en_US,zh_CN | zh_CN | |
languages | 自定义语言包 | object | |||
descriptors | 表单数据对象的描述器,详见 descriptor | object | 是 | ||
size | 表单组件元素的大小 | string | medium,small,mini | small | |
disabled | 表单是否不可编辑 | boolean | false | ||
backgroundColor | 表单最外层背景 | string | 如:#FFFFFF | none | |
fontSize | 表单字体大小 | number | 14 | ||
bgColorOffset | 不同层级表单的背景色偏移量 | number | 8 | ||
showOuterError | 是否显示父组件的错误信息 | boolean | true |
languages
格式:
// <lang> 与 lang 属性对应
{
<lang>: {
addKeyPlaceholder: 'Input the key you want to add',
addKeyButtonText: 'Add Key',
addArrayItemButtonText: 'Add Item'
}
}
# 插槽
插槽名 | 说明 |
---|---|
operations | 表单操作区插槽,一般用于放置提交、重置按钮 |
# 方法
方法 | 说明 | 参数 |
---|---|---|
validate | 触发表单的校验函数,有一个可选的callback函数。当传入callback函数时,回调函数会在校验结束后被调用;若不传参,则返回一个Promise,结果为表示校验是否通过的布尔值 | Function(callback: (valid) => {}):void | Function():Promise(Boolean) |
resetFields | 重置表单,将所有字段重置为初始值并移除校验结果 | () => {} |
clearValidate | 移除校验结果 | () => {} |
# 示例
点击显示/隐藏示例
<template>
<dynamic-form
ref="dynamic-form"
v-model="data"
:lang="lang"
:descriptors="descriptors"
size="mini"
background-color="#FEFEFE"
:font-size="12"
:bg-color-offset="5">
<template slot="operations">
<el-button @click="clearValidate">clearValidate</el-button>
<el-button @click="resetFields">resetFields</el-button>
<el-button type="primary" @click="validate" plain>validate</el-button>
</template>
</dynamic-form>
</template>
<script>
export default {
props: ['lang'],
data () {
return {
descriptors: {
prop1: {
type: 'object',
required: true,
fields: {
prop1: { type: 'string', required: true }
}
},
prop2: {
type: 'object',
required: true,
defaultField: { type: 'string', required: true }
}
},
data: {}
}
},
methods: {
clearValidate () {
this.$refs['dynamic-form'].clearValidate()
},
resetFields () {
this.$refs['dynamic-form'].resetFields()
},
validate () {
this.$refs['dynamic-form'].validate()
}
}
}
</script>
← 多语言 descriptors →