Skip to content
📝 A JSON configuration Render form Component for Vue.js and Element-UI
Vue JavaScript CSS HTML Shell
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
docs
example
lib
public
.codacy.yml
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.huskyrc
.prettierrc
CHANGELOG.md
LICENSE
README.md
babel.config.js
commitlint.config.js
package.json
vue.config.js

README.md

vue-fa-form

Codacy Badge npm npm NPM

一个基于 Vue.js 与 Element-UI 的表单构建组件

特点:

  • 支持大量表单项,内置数据验证
  • 通过 JSON 形式构建,支持复杂对象

安装

使用 npm 或者 yarn 进行安装

$ npm install vue-fa-form
$ yarn add vue-fa-form

如何使用

import VueFaForm from 'vue-fa-form'
<template>
  <vue-fa-form
    :form-item="formItems"
    :get-form-data="getFormData"
    @submit="submit"
  />
</template>
import VueFaForm from './vue-fa-form'
export default {
  components: {
    VueFaForm
  },
  data: () => ({
    formItems: [
      {
        label: '文本框',
        key: 'text',
        type: 'text',
        rules: [
          {
            required: true,
            trigger: 'blur',
            message: '文本框必填'
          }
        ]
      }
      // ...
    ],
    getFormData: () => ({
      text: ''
      // ...
    })
  }),
  methods: {
    submit(data) {
      console.log(data)
    }
  }
}

文档

Document link

Author

Blog · GitHub @gd4Ark

License

MIT

Conclusion

If you think my project is good👏 . Give a Star⭐ encouragement.

You can’t perform that action at this time.