el-form-renderer

Introduction

WHAT

el-form-renderer is based on element-ui, but not limited element-ui components. On the basis of completely inheriting the form attribute of element-ui, extension is made. Some non-form components or custom components, such as picture uploading and rich text editor, can also be integrated, thus, users can render a complete form by using a piece of json.

WHY

In our daily development, there are lots page with form, and usually the form structure is similar, the logic is repeated. el-form-renderer does not have complicated logic. It only convert JSON to render form item, save time and energy to write business logic, and reduce duplicate code.

Features

Render form with json
Support integrate with custom components
Support batch update form data with updateForm method
Support setOptions method, dynamically change select options
Content support inputFormat , outputFormat , trim to process component's input and output values
Support v-model

⬆Back to Top

Links

Docs
Guide to developing custom component
Setting validation rules in custom component
fem-vscode-helper

⬆Back to Top

Quick Start

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>