npm i element-plus-form-designer

import { reactive } from "vue";
import { FormDesigner } from "element-plus-form-designer";
import "element-plus-form-designer/dist/style.css";
let data = reactive({});
//上传配置
let uploadOptions = {
  action: 'http://localhost/UploadFile',
  getHeaders: function () {
    return { 'token': '123456' };
  },
  getFileHook: (res) => {
    if (res.success) {
      return {
        name: res.url.substr(res.url.lastIndexOf('/') + 1),
        url: res.url
      };
    } else {
      return res.msg;
    }
  }
}
// 默认控件配置
let controlGroups = [
  {
    name: '基础组件',
    controls: ['input', 'textarea', 'inputnumber', 'select', 'radio', 'checkbox',
      'rate', 'color', 'date', 'time', 'switch', 'slider', 'text', 'html', 'link', 'divider']
  },
  {
    name: '高级组件',
    controls: ['upload', 'uploadImage', 'region', 'cascader', 'editor','table']
  },
];

<div class="h-full w-full">
    <FormDesigner :controlGroups="controlGroups" :uploadOptions="uploadOptions" :formData="data"></FormDesigner>
</div>

{
  "controls": [],
  "props": {
    "labelPosition": "right",
    "labelWidth": 100,
    "size": "default",
    "customClass": "",
    "cols": 12
  }
}

{
      "type": "select",
      "name": "下拉选择",
      "key": "qFahSi153",
      "id": "select_qFahSi153",
      "lock": false,
      "dataType": "string",
      "props": {
        "width": 12,
        "showLabel": true,
        "labelWidth": null,
        "label": "下拉选择",
        "defaultValue": "",
        "placeholder": "请选择",
        "required": false,
        "requiredMessage": "必填字段",
        "disabled": false,
        "clearable": true,
        "filterable": true,
        "customClass": "",
        "showOptionLabel": false,
        "options": [
          {
            "value": "值1",
            "label": "选项1"
          },
          {
            "value": "值2",
            "label": "选项2"
          }
        ]
      },
      "rules": [
        {
          "message": "必填字段",
          "required": false
        }
      ]
    }

import { reactive ,ref } from 'vue';
import { FormRenderer } from 'element-plus-form-designer';
import "element-plus-form-designer/dist/style.css";

let data = reactive({
    formData: {},
    formModel: {}
})
let formRenderer=ref(null);
//formData 来自 FormDesigner 组件，意义相同，用于构建表单结构
//formModel 为表单数据，应该来自后台数据，大概是这样：
/*
{
  "select_qFahSi153": "值1",
  "input_t6ciGfNlv": "12",
  "checkbox_la0CN3uuA": [
    "值1","值2"
  ]
}
*/

<FormRenderer
        ref="formRenderer"
        :formData="data.formData"
        :formModel="data.formModel"
    />