更新记录

处理导出JSON 没有对应字段问题

安装

npm install element-easy-form --save

文档地址

引入

简易表单组件

主要是为了快速开发表单 以及便于维护json表单

import {ElementEasyForm} from 'element-easy-form'
import 'element-easy-form/dist/style.css'

拖拽表单组件

拖拽生成json表单

import {DragForm} from 'element-easy-form'
import 'element-easy-form/dist/style.css'

使用案例

<template>
  <div class="p20 h100">
    <!-- 拖拽表单组件 -->
    <DragForm></DragForm>
    <!-- 渲染表单组件 -->
    
      <element-form-render
    ref="elementFormrenderRef"
    :formJson="dragFormJson.formJson"
    :model="dragFormJson.model"
    ></element-form-render>
     <el-button @click="handlePost">提交</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";

import {DragForm，ElementFormRender} from 'element-easy-form'
import 'element-easy-form/dist/style.css'

const elementFormrenderRef = ref<any>();
const handlePost =async () =>{
  const data =await elementFormrenderRef.value.validate()
  console.log('data :>> ', data);
}
const dragFormJson = ref({
  "formJson": [
    {
      "attrs": {
        "gutter": 20,
        "justify": "start",
        "align": "middle"
      },
      "type": "LAYOUT",
      "componentName": "ElRow",
      "children": [
        {
          "componentName": "ElCol",
          "attrs": {
            "span": 5
          },
          "children": [
            {
              "label": "薛明",
              "type": "COMPONENT",
              "formItemAttrs": {},
              "attrs": {
                "placeholder": "请输入",
                "type": "text",
                "label": "薛明",
                "prop": "DeborahLauraWhite"
              },
              "rules": [],
              "prop": "DeborahLauraWhite",
              "componentName": "ElInput"
            }
          ]
        },
        {
          "componentName": "ElCol",
          "attrs": {
            "span": 5
          },
          "children": [
            {
              "label": "金娜",
              "type": "COMPONENT",
              "formItemAttrs": {},
              "attrs": {
                "placeholder": "请输入",
                "step": 1,
                "controls": true,
                "label": "金娜",
                "prop": "StevenElizabethGarcia"
              },
              "rules": [],
              "componentName": "ElInputNumber",
              "prop": "StevenElizabethGarcia"
            }
          ]
        }
      ]
    }
  ],
  "model": {
    "DeborahLauraWhite": "",
    "StevenElizabethGarcia": 0
  }
})


</script>

<style scoped lang="scss">

.el-row {
  margin-bottom: 20px;
  background-color: #eee;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: #c48;
}</style>

提示

如果无法安装请切换npm官方镜像 npm config set registry https://registry.npmjs.org/ 同步yarn 淘宝镜像需要时间 如果是历史版本就没问题

1. 提示esBuild.exe 建议重启项目就没问题了 或者删除原来的node_modules