Skip to content
可配置表单,动态表单,dynamic form
TypeScript Vue JavaScript CSS 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.
.github
build
docs
src
styleguide
types
.babelrc.js
.editorconfig
.gitignore
.grenrc.js
.prettierignore
.prettierrc
.stylelintrc
.travis.yml
CHANGELOG.md
LICENSE
README-en.md
README.md
build.sh
notify.sh
package.json
styleguide.config.js
tsconfig.json
yarn.lock

README.md

el-form-renderer

Build Status NPM Download NPM Version NPM License PRs Welcome Automated Release Notes by gren

English Documents

Table of Contents

Introduction

我们 github 有这些组件,它们并非孤立的,而是有关联的

我们开发的表单相关的组件都可以配合 @femessage/el-form-renderer(以下简称为 el-form-renderer)使用

可以说 el-form-renderer 是核心,扮演着枢纽的角色

拓展 form-item

el-data-table、el-data-tree 等组件内部集成该组件,用于更加灵活的配置内部表单渲染的场景。

以 el-data-table 为例,我们知道通过 el-data-table 可以快速生成一个列表的 CRUD 页面。而其中的搜索框,新增编辑的内容弹框,就是由 el-form-renderer 生成的。通过传入对应的配置项,就能生成相应的内容,不需要写 template。

拓展 slot

在一些表单项场景,el-form-renderer 可用于表单项进行扩展。

自定义组件按一定的格式实现 v-model,就能让 el-form-render 能渲染自定义组件

如下图所示,两个图片上传、一个富文本编辑器,都是借助 el-form-renderer 渲染的。

example.png

表单验证

vee-validate

验证器拓展

自动计算

远程选项

动态字段

Feature

module -> Widget 插拔模式

  • 跨平台(pc/mobile)
  • 脱离表现层(轻松结合其他 ui 框架)
  • 灵活的布局
  • 灵活的表单类型拓展
  • 灵活的错误消息提示
  • 支持灵活的字段注解
  • 集成 vee-validate 表单验证
  • 远程校验 --(https://baianat.github.io/vee-validate/guide/custom-rules.html#non-immediate-rules)
  • 自定义表单验证触发时机
  • 数据联动
  • 自动计算
  • 动态显示
  • 远程选项(如 select,radio,checkbox 等)
  • 表单值回填(编辑)
  • 集成设计器
  • 轻量化
  • 插拔化
  • i18n

⬆ Back to Top

Links

⬆ Back to Top

Quick Start

# Step1 确认你已经正确安装并使用了 element-ui
yarn add @femessage/el-form-renderer
<template>
  <el-form-renderer :content="content"></el-form-renderer>
</template>

<script>
  import ElFormRenderer from '@femessage/el-form-renderer'

  export default {
    components: {
      ElFormRenderer
    },
    data() {
      return {
        content: []
      }
    }
  }
</script>

⬆ Back to Top

Inspiration

thanks to element-patch

License

MIT

⬆ Back to Top

Contributors

Thanks goes to these wonderful people (emoji key):

Alvin
Alvin

💻 👀 🐛 📝 🤔
levy
levy

👀 🚇 🤔
EVILLT
EVILLT

💻 🐛 📝 🤔
Donald Shen
Donald Shen

📖 💡
ColMugX
ColMugX

💻 ⚠️ 📖
OuZuYu
OuZuYu

🐛

This project follows the all-contributors specification. Contributions of any kind welcome!

You can’t perform that action at this time.