README.zh-CN.md

element-form-builder

使用 JSON 配置构建 element-ui 动态表单。

🇨🇳 简体中文 | 🇺🇸 English

在线示例

⚡ 在线示例 | 📖 参考文档

快速开始

首先你需要有一个 element-ui 项目。如果没有，推荐使用下面的 preset 快速创建一个。

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

安装

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

注册组件

import FormBuilder from 'element-form-builder'

Vue.use(FormBuilder)

见证奇迹的时刻

Vue 模板:

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

Vue 组件:

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

      formConfig: {
        rules: {
          title: [{ required: true, message: '请输入标题' }]
        },
        elements: [
          {
            tag: 'el-input',
            item: {
              label: '标题'
            },
            detail: {
              name: 'title'
            }
          }
        ]
      }
    }
  }
}

核心功能

• 📷 支持任意组件
• 📺 表单校验
• ⌚ 表单数据模型
• 📻 自定义插槽

贡献

期待你的 pull requests。如果你觉得有帮助，还请多多反馈！

技术栈

• Vue.js
• ElementUI

许可

MIT

Copyright (c) 2018 - present, Felix Yang