This installment recommends a form designer based on vue-ele-form called f-render.

“f-render is a secondary encapsulation based on element-ui form, which achieves form validation, form layout, responsive forms. It also includes more than 20 commonly used components such as radio buttons, checkboxes, and cascading selectors. Additionally, it comes with a rich collection of third-party components (various input boxes, date pickers, color pickers, cascading selectors), all of which can be implemented simply by dragging and dropping the components. This not only ensures quality but also accelerates development speed as if riding on a rocket.”

Install and use

• install

yarn add element-ui  # npm install element-ui -S
yarn add vue-ele-form # npm install vue-ele-form -S
yarn add f-render # npm install f-render -S

• login

// vue-ele-form Please refer to the registration：https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd
import EleForm from "vue-ele-form";
import FRender from "f-render";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);
Vue.use(EleForm);
Vue.component("f-render", FRender);

• use

<template>
  <f-render
    @save="handleSave"
    :loading="loading"
    height="calc(100vh - 60px)"
    :config="formConfig"
  />
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        formConfig: {}
      };
    },
    methods: {
      handleSave(res) {
        // Here is save to localStorage，You can save it to the server
        localStorage.setItem("form-config", res);
        this.$message.success("Saved successfully~");
      }
    },
    mounted() {
      // Simulated asynchronous loading
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.formConfig = localStorage.getItem("form-config") || "";
      }, 1000);
    }
  };
</script>

Form designer

• interface

• Drag control

• preview

• generating code

f-render way：

vue-ele-form way：

You can read more on your own.