# 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 →