el-form-builder

el-form-builder

This project focks from Vue Form Builder.Build element-ui forms with javascript objects.

English | 简体中文

Example

Live Preview | Docs

Quick Start

First you need to have an element-ui project. If not, it is recommended to create one quickly using the preset below.

vue create --preset codetrial/vue-cli-plugin-element your-project

Install

yarn add el-form-builder
# OR
npm i el-form-builder

Registry

import ElFormBuilder from 'el-form-builder'

Vue.use(FormBuilder)

Witness the miracle moment

Vue template:

<el-form-builder :config="formConfig" v-model="formValues" label-width="80px">
</el-form-builder>

Vue component:

export default {
  data() {
    return {
      formValues: {
        title: 'Some Awesome Title'
      },

      formConfig: {
        rules: {
          title: [{ required: true, message: 'Please enter the title' }]
        },
        elements: [
          {
            tag: 'el-input',
            item: {
              label: 'Title'
            },
            detail: {
              name: 'title'
            }
          }
        ]
      }
    }
  }
}

Core Features

• Any Component
• Form Validation
• Form Model
• Custom Slot

Contributing

Looking forward to your pull requests.

Built With

• Vue.js
• ElementUI

License

MIT

Copyright (c) 2018 - present, Felix Yang