dynamic-form

Props

prop description type option values default required
value form data object yes
lang language string en_US,zh_CN en_US
descriptors descriptors of form data, refer to descriptor object yes
size size of form component string medium,small,mini small
backgroundColor root form background color string Hex color or 'none' none
fontSize font size of form number 14
bgColorOffset form background color offset number 8

languages format:

// <lang> is the lang prop
{
  <lang>: {
    addKeyPlaceholder: 'Input the key you want to add',
    addKeyButtonText: 'Add Key',
    addArrayItemButtonText: 'Add Item'
  }
}

Slots

slot name description
operations operation slot for form, use to put submit/reset button generally

Methods

method description params
validate validate the form. Takes a optional callback function as a param. Callback function will be executed with one param(validate result) while having the callback param. Return a promise(resolve validate result) without callback param. Function(callback: (valid) => {}):void | Function():Promise(Boolean)
resetFields reset form and remove validation result () => {}
clearValidate clear validation message of form () => {}

Example

Click To Show/Hide Demo
<template>
  <dynamic-form
    ref="dynamic-form"
    v-model="data"
    lang="zh_CN"
    :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 {
  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>
Last Updated: 6/26/2019, 8:03:20 PM