介绍

DragForm (拖拽表单)

开发初心就是为了减少工作量 提供高扩展性的表单组件 免费版本也支持扩展组件

安装

npm i element-easy-form element-plus  --save

安装异常更换npm镜像仓库

推荐 tencent

  npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

import { createApp } from 'vue'

//表单设计器
import elementEasyForm from 'element-easy-form'
import 'element-easy-form/dist/style.css'
//element ui
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//vue3.0 
import App from './App.vue'
const app = createApp(App);
app.use(elementEasyForm)
app.use(ElementPlus)
app.mount('#app')

DragForm 参数

属性名	说明	数据类型	默认值
customoComponents	自定义组件	DragFormType[]	null
modelValue	原始数据	DragFormType[]	[]

DragForm 事件

事件名	说明	参数
save	保存原始数据	原始数据

DragForm Exposes

事件名	说明	参数
getData	回调函数返回 原始数据	回调函数返回 原始数据

ElementFormRender 参数

属性名	说明	数据类型	默认值
formJson	表单json数据	DragFormType[]	参考下面案例
model	提交表单数据	object	参考下面案例
formAttrs	form表单属性 同element-plus	object	参考下面案例

ElementFormRender Exposes

事件名	说明	参数
validate	触发表单校验	参考下面案例

扩展自定义组件

DragFormType 接口

属性名	说明	数据类型	默认值
label	与 el-form-item label	String	""
prop	与 el-form-item prop	String	""
formType	生成数据类型 DragForm或者ElementEasyForm	String	JSONType
type	数据类型	String	AttrType
title	组件名字	String	参考下面案例
formItemAttrs	el-form-item 属性	Object	参考下面案例
attrs	组件属性	Object	参考下面案例
componentName	组件名字	String	参考下面案例
attrsJson	组件属性选项	DragFormType[] 数据类型	参考下面案例
rules	与 el-form-item rules	Object[] 数据类型	[]
hidden	是否展示隐藏	布尔值	BooleanDragFormData接口
children	子组件	DragFormType[]	参考下面案例

BooleanDragFormData接口

名字	数据类型	说明
matchPattern	string	匹配模式
type	string	如下SelectFuntion
value	布尔值	false 显示 true 隐藏
dataSelect	数组	选择器返回数据 一般不用
dataJs	函数	参数 (config:FormItemJSON,data:any) 、返回值 布尔值 config当前组件数据 data表单数据对象

SelectFuntion枚举

名字	数据类型	说明
SELECT	string	页面配置适用
FUNCTION	string	手写js函数

JSONType枚举

组件数据需要

名字	数据类型	说明
DRAGFORM	string	适用drag-form组件
ELEMENTEASYFORM	string	适用element-easy-form组件
ALL	string	以上都适用

AttrType枚举

名字	数据类型	说明
FORMITEM	string	只有el-form-item 属性需要 自定义组件一般不需要
COMPONENT	string	当前数据是组件类型
LAYOUT	string	当前数据是布局容器类型

接口、枚举

函数名字	说明	默认值
ComponentType	枚举 组件名字 内置的 element-plus组件名字	参考下面案例
DragFormType	接口	参考下面案例

自定义组件演示案例

案例源代码open in new window

配置文件 custom.js

import {
    elFormItem,
    elFormplaceholder,
    AttrType,
    ComponentType,
    JSONType,
    compontent,
  } from "element-easy-form";
  
  const attrsJson = [
    {
      label: "类型",
      prop: "type",
      type: AttrType.COMPONENT,
      defaultValue: "text",
  
      componentName: ComponentType.ElSelect,
      attrs: {
        placeholder: "请选择类型",
        clearable: true,
      },
  
      rules: [{ required: true, message: "类型不能为空", trigger: "change" }],
      children: [
        {
          componentName: ComponentType.ElOption,
          value: "text",
          label: "文本框",
        },
        {
          componentName: ComponentType.ElOption,
          label: "密码框",
          value: "password",
        },
        {
          componentName: ComponentType.ElOption,
          label: "文本域",
          value: "textarea",
        },
        {
          componentName: ComponentType.ElOption,
          label: "数字",
          value: "number",
        },
      ],
    },
    ...elFormItem({
      label: "客户",
      prop: "customer",
    }),
    {
      type: AttrType.COMPONENT,
      label: "默认值",
      prop: "defaultValue",
  
      defaultValue: "",
      componentName: ComponentType.ElInput,
      attrs: {
        placeholder: "请输入",
      },
      rules: [{ required: false, message: "", trigger: "change" }],
    },
    elFormplaceholder("请输入"),
    {
      type: AttrType.COMPONENT,
      label: "最大输入长度",
      prop: "maxlength",
  
      defaultValue: "",
      componentName: ComponentType.ElInput,
      attrs: {
        placeholder: "请输入",
      },
      rules: [{ required: false, message: "名字不能为空", trigger: "change" }],
    },
    {
      type: AttrType.COMPONENT,
      label: "最小输入长度",
      prop: "minlength",
  
      componentName: ComponentType.ElInput,
      defaultValue: "",
      attrs: {
        placeholder: "请输入",
      },
      rules: [{ required: false, message: "名字不能为空", trigger: "change" }],
    },
  ];
  
  export const custom = [
    compontent,
    {
      title: "主表字段",
      attrs: {},
      prop: "container",
      type: AttrType.LAYOUT,
      children: [
        {
          label: "选择客户",
          formType: JSONType.ALL,
          type: AttrType.COMPONENT,
          title: "选择客户",
          formItemAttrs: {},
          attrs: {
            placeholder: "请输入",
          },
          rules: [],
          prop: "",
          attrsJson: attrsJson,
          componentName: ComponentType.ElInput, // 组件名称，用于生成代码
        },
      ],
    },
  ];

设计表单demo

<template>
    <dragForm :customoComponents="customoComponents"></dragForm>
</template>

<script>
import {custom} from './custom'
import {componentList} from "element-easy-form";
export default {
  name: 'App',
  components: {
  },
  data(){
    return {
      customoComponents:[
  componentList[0],
  ...custom
]
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

渲染表单demo

<template>
  <div class="p20 h100">
   <ElementFormRender
    ref="elementFormrenderRef"
    :formJson="dragFormJson.formJson"
     :formAttrs="dragFormJson.formAttrs"
    :model="dragFormJson.model"
    ></ElementFormRender>

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

  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
const elementEasyFormRef = ref<any>();
const elementFormrenderRef = ref<any>();
const handlePost =async () =>{
  const data =await elementFormrenderRef.value.validate()
  console.log('data :>> ', data);
}
const dragFormJson = ref({
  "formJson": [
    {
      "attrs": {
        "gutter": 0,
        "justify": "start",
        "align": "middle"
      },
      "type": "LAYOUT",
      "formType": "all",
      "componentName": "ElRow",
      "children": [
        {
          "type": "LAYOUT",
          "componentName": "ElCol",
          "attrs": {
            "span": 12,
            "offset": 0,
            "push": 0,
            "pull": 0
          },
          "children": [
            {
              "label": "阎娜",
              "type": "COMPONENT",
              "formItemAttrs": {},
              "formType": "all",
              "attrs": {
                "placeholder": "请输入",
                "type": "text"
              },
              "rules": [],
              "prop": "JessicaRobertHarris",
              "componentName": "ElInput",
              "hidden": {
                "matchPattern": "&&",
                "type": "select",
                "dataSelect": [],
                "value": false,
                "dataJs": "function hidden(config,data){\n      return false;\n    }"
              }
            }
          ]
        },
        {
          "type": "LAYOUT",
          "componentName": "ElCol",
          "attrs": {
            "span": 12,
            "offset": 0,
            "push": 0,
            "pull": 0
          },
          "children": [
            {
              "label": "史秀英",
              "type": "COMPONENT",
              "formItemAttrs": {},
              "formType": "all",
              "attrs": {
                "placeholder": "请输入",
                "type": "text"
              },
              "rules": [],
              "prop": "NancyDonnaTaylor",
              "componentName": "ElInput",
              "hidden": {
                "matchPattern": "&&",
                "type": "select",
                "dataSelect": [],
                "value": false,
                "dataJs": "function hidden(config,data){\n      return false;\n    }"
              }
            }
          ]
        }
      ],
      "hidden": {
        "matchPattern": "&&",
        "type": "select",
        "dataSelect": [],
        "value": false,
        "dataJs": "function hidden(config,data){\n      return false;\n    }"
      }
    }
  ],
  "model": {
    "JessicaRobertHarris": "",
    "NancyDonnaTaylor": ""
  },
  "formAttrs": {
    "hide-required-asterisk": false,
    "inline-message": false,
    "status-icon": false,
    "label-width": "150px",
    "scroll-to-error": false
  }
});
const count = ref(0);
const state: any = reactive({
  activeDate: "",
});
const handleScopeOf = (e: any) => {
  console.log("ehandleScopeOf :>> ", e.next());
};


</script>

<style scoped lang="scss">


</style>

ElementEasyForm (二开表单)

demo

<template>
<div class="p20">
   <ElementEasyForm ref="elementEasyFormRef" :formJson="formJson"></ElementEasyForm>
</div>
  
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue';
import {useRouter,useRoute} from 'vue-router'
import {ElementEasyForm} from 'element-easy-form';
const elementEasyFormRef = ref<any>();  

const formJson = ref<any>({
  "rowAttrs": {
    "gutter": 0,
    "justify": "start",
    "align": "middle"
  },
  "schema": [
    {
      "label": "蒋伟",
      "type": "COMPONENT",
      "formType": "all",
      "formItemAttrs": {},
      "attrs": {
        "defaultValue": []
      },
      "rules": [],
      "prop": "MaryEricGarcia",
      "componentName": "ElCheckboxGroup",
      "children": [
        {
          "componentName": "ElCheckbox",
          "label": "选项1"
        }
      ],
      "hidden": {
        "matchPattern": "&&",
        "type": "select",
        "dataSelect": [],
        "value": false,
        "dataJs": "function hidden(config,data){\n      return false;\n    }"
      },
      "colAttrs": {
        "span": 12,
        "offset": 0,
        "push": 0,
        "pull": 0
      }
    },
    {
      "prop": "BrendaKarenClark",
      "label": "孔刚",
      "formType": "all",
      "type": "COMPONENT",
      "attrs": {
        "placeholder": "请选择",
        "multiple": false,
        "disabled": false,
        "clearable": false,
        "collapse-tags": false,
        "multiple-limit": 0
      },
      "formItemAttrs": {},
      "rules": [],
      "componentName": "ElSelect",
      "children": [
        {
          "componentName": "ElOption",
          "value": "1",
          "label": "选项1"
        }
      ],
      "hidden": {
        "matchPattern": "&&",
        "type": "select",
        "dataSelect": [],
        "value": false,
        "dataJs": "function hidden(config,data){\n      return false;\n    }"
      },
      "colAttrs": {
        "span": 12,
        "offset": 0,
        "push": 0,
        "pull": 0
      }
    }
  ],
  "model": {
    "MaryEricGarcia": [],
    "BrendaKarenClark": ""
  },
  "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());
  
}


</script>

<style  scoped lang="scss" >

</style>

ElementEasyForm formJson 属性

属性名	数据类型	说明
schema	Array	定义表单的schema，格式如下：schema
model	Object	表单数据 于element-ui的model一致
formAttrs	Object	表单组件el-form attrs 一样
rowAttrs	Object	表单组件el-row attrs 一样

schema 属性

属性名	数据类型	说明
label	string	标签文本
prop	string	model 的键名。 它可以是一个属性的值(如 a.b.0 或 [a', 'b', '0'])。 在使用了 validate、resetFields 的方法时，该属性是必填的。
componentName	string	element-ui组件名字，如 el-input el-select el-date-picker
attrs	Object	表单组件 属性，如 el-input el-select el-date-picker
colAttrs	Object	el-col 属性
formItemAttrs	Object	formItem 属性
rules	表单校验规则
render	tsx	tsx数据渲染函数
renderLabel	tsx	tsx数据渲染函数
events	Function	表单组件 事件
children	子集	比如选择器组件

ElementEasyForm Solts

方法名	说明
up	动态表单顶部 el-form子标签
under	动态表单底部 el-form子标签

ElementEasyFormItem Solts

方法名	说明
prop+'Label'	自定义组件
prop	自定义组件

ElementEasyForm Exposes

方法名	数据类型	说明
validate	Function	验证表单数据

需要源码 联系方式

QQ

微信