hero

vue-dynamic-form-component

Vue动态嵌套表单组件,支持嵌套对象/Hashmap/数组, 可自定义表单组件

快速开始 →

使用descriptors生成表单或自定义组件

只需要提供目标数据的descriptor(基于async-validator扩展),就可以自动生成对应的表单元素(基于element-ui)

支持绝大部分数据类型及其校验

支持绝大部分数据类型、常见类型校验(如:email、url等)

支持多级数据对象

支持多级对象、数组,自动生成多级嵌套表单,子表单背景自定义加深

# 示例

点击显示/隐藏示例
<template>
  <dynamic-form
    ref="dynamic-form"
    v-model="data"
    :descriptors="descriptors"
    :showOuterError="false"
    :lang="lang">
    <template slot="operations">
      <el-button @click="reset">Reset</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: 'number', required: true },
        prop2: {
          type: 'object',
          label: 'object label',
          fields: {
            prop1: { type: 'email', required: true },
            prop2: { type: 'number', required: true },
            prop3: [
              { type: 'string', required: true, message: 'object label.prop3 is required' },
              { pattern: /test/, message: 'object label.prop3 should include test' }
            ],
            prop4: {
              type: 'enum',
              enum: [0, 1],
              options: [
                { label: 'option 1', value: 0, disabled: true },
                { label: 'option 2', value: 1 }
              ]
            },
            prop5: { type: 'boolean', required: true },
          }
        }
      },
      data: {}
    }
  },
  methods: {
    reset () {
      this.$refs['dynamic-form'].resetFields()
    },
    validate () {
      this.$refs['dynamic-form'].validate()
    }
  }
}
</script>