表单设计器插件 element-easy-form

简介

vue3 + element-plus
使用必须满足上面的条件
element-easy-form 是一个系列产品还有打印设计器

效果图

安装

地址

npm i element-easy-form

使用案例

<template>
  <div class="p20 h100">

     <el-button @click="handlePost">提交</el-button>
    
    <dragForm @save="save" ></dragForm>

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import {SelectCustomer} from './SelectCustomer'
const customoComponents = ref([SelectCustomer])

const elementEasyFormRef = ref<any>();
const elementFormrenderRef = ref<any>();
const formType = ref<any>('');
const handlePost =async () =>{
  const data =await elementFormrenderRef.value.validate()
  console.log('data :>> ', data);
}
const handleCheck = (e:any)=>{
  console.log('handleCheck :>> ');
  console.log('e :>> ', e);
}
const save = (e:any)=>{
  console.log('e :>> ', e);
}
const dragFormJson = ref({
  "formJson": [
    {
      "label": "江芳",
      "type": "COMPONENT",
      "formItemAttrs": {},
      "attrs": {
   
        "text-color": "#BF4545",
        "fill": "#0915F8",
        "label": "江芳",
      },
      "rules": [],
         events:{
      change:handleCheck
    },
      "prop": "KennethJoseWhite",
      "componentName": "ElCheckboxGroup",
      "children": [
        {
          "componentName": "ElCheckbox",
          "label": "选项1",
        },
        {
          "componentName": "ElCheckbox",
          "label": "选项2",
        }
      ]
    }
  ],
  "model": {
  }
})
const formJson = ref<any>({
  "formJson": [
    {
      "attrs": {
        "gutter": 0,
        "justify": "start",
        "align": "middle"
      },
      "type": "LAYOUT",
      "componentName": "ElRow",
      "children": [
        {
          "componentName": "ElCol",
          "attrs": {
            "span": 12,
            "offset": 0,
            "push": 0,
            "pull": 0
          },
          "children": [
            {
              "label": "马娜",
              "type": "COMPONENT",
              "formItemAttrs": {},
              "attrs": {},
              "rules": [ {
          "required": true,
          "message": "数据",
          "trigger": "change"
        }],
              "prop": "MelissaAmyLewis",
              "componentName": "ElCheckboxGroup",
              "children": [
                {
                  "componentName": "ElCheckbox",
                  "label": "选项1"
                }
              ]
            }
          ]
        },
        {
          "componentName": "ElCol",
          "attrs": {
            "span": 12,
            "offset": 0,
            "push": 0,
            "pull": 0
          },
          "children": [
            {
              "label": "雷超",
              "type": "COMPONENT",
              "formItemAttrs": {},
              "attrs": {},
              "rules": [],
              "prop": "KarenJessicaRodriguez",
              "componentName": "ElCheckboxGroup",
              "children": [
                {
                  "componentName": "ElCheckbox",
                  "label": "选项1"
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  "model": {},
  "formAttrs": {
    "hide-required-asterisk": false,
    "inline-message": false,
    "status-icon": false,
    "scroll-to-error": false
  }
});
const count = ref(0);
const state: any = reactive({
  activeDate: "",
});
const handleScopeOf = (e: any) => {
  console.log("ehandleScopeOf :>> ", e.next());
};

// const dynamicFunc = new Function('config','data',`
//  return data.name+config.name
// `);
// console.log(dynamicFunc.toString());
</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>