1xiyu / element-form-builder

Build element-ui forms with JSON schema.

element-form-builder

Build element-ui forms with JSON schema.

🇺🇸 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 element-form-builder
# OR
npm i element-form-builder

Registry

import FormBuilder from 'element-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