elememt form表单二次封装，elform封装，很全很详细

更新于：2021-07-29 15:30

功能：input，select，搜索select，textarea，各种年月日，时分秒，switch，单选，多选，文件上传，按钮，text查看只读，富文本编辑器，百度地图（可选）

详解：element的form表单二次封装也很简单，写一个form表单你会发现不一样的地方只是form-item里面的组件类型而已。所以把form-item里面的内容可变化就行了。父级也只需通过一个数组（form-item里面组件类型数组），一个对象（form表单数据对象）控制就行了！为什么要多一个对象，是为了方便数据提交，以及数据验证。这次封装多加了el-col，也没有直接放进弹出框，是为了更加灵活可变！

1、form表单子组件代码（富文本编辑器，可根据项目需求，不引入也行）引入了自己单独二次封装一下

<template> <el-form :model="formData" class="demo-ruleForm" ref="ruleForm" label-position="left" label-width="120px"> <el-col v-for=" (formobj,index) in formObj" v-show="!formobj.notShow" :key="index" :span="formobj.width ? formobj.width : 24"> <el-form-item :label="formobj.label" :prop="formobj.prop" :rules="formobj.rules"> <!-- inupt输入框 --> <el-input v-if="formobj.input" v-model="formData[formobj.prop]" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" @input="inputINPUT($event,index,formobj.prop)" @change="inputChange($event,index,formobj.prop)" /> <!-- textarea输入框 --> <el-input v-if="formobj.textarea" v-model="formData[formobj.prop]" size="small" type="textarea" :rows="formObj.rows" :disabled="formobj.disabled" :placeholder="formobj.placeholder" /> <!-- select选择器 --> <el-select v-if="formobj.select" v-model="formData[formobj.prop]" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" @change="selectChange($event,index,formobj.prop)"> <el-option v-for="(options, sIndex) in formobj.options" :key="sIndex" :label="options.label" :value="options.value" /> </el-select> <!-- select搜索框 --> <el-select v-if="formobj.searchSelect" v-model="formData[formobj.prop]" size="small" :disabled="formobj.disabled" filterable remote reserve-keyword :placeholder="formobj.placeholder" :remote-method="(query)=>remoteMethod(query,index,formobj.prop)" :loading="searchSelectLoading" @change="selectChange($event,index,formobj.prop)"> <el-option v-for="(item,ssIndex) in formobj.options" :key="ssIndex" :label="item.label" :value="item.value" /> </el-select> <!-- 年月日时分秒选择器 --> <el-date-picker v-if="formobj.dateTime" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" /> <!-- 年月日时分秒，开始和结束时间 --> <el-date-picker v-if="formobj.dateTimeRange" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" size="small" type="datetimerange" :disabled="formobj.disabled" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /> <!-- 时分秒选择器 --> <el-time-picker v-if="formobj.timePicker" v-model="formData[formobj.prop]" value-format="HH:mm:ss" format="HH:mm:ss" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" :picker-options="formobj.options" /> <!-- 时分秒选择器，开始和结束时间 --> <el-time-picker v-if="formobj.timePickerIsRange" v-model="formData[formobj.prop]" value-format="HH:mm:ss" format="HH:mm:ss" is-range size="small" :disabled="formobj.disabled" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" placeholder="选择时间范围" /> <!-- 年月日选择器 --> <el-date-picker v-if="formobj.datePicker" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" /> <!-- 年月日选择器，开始和介绍年月日 --> <el-date-picker v-if="formobj.datePickerIsRange" v-model="formData[formobj.prop]" value-format="yyyy-MM-dd" type="daterange" size="small" :disabled="formobj.disabled" :placeholder="formobj.placeholder" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" /> <!-- switch开关 --> <el-switch v-if="formobj.switch" v-model="formData[formobj.prop]" size="small" :disabled="formobj.disabled" @change="formSwitchChange($event,index,formobj.prop)" /> <!-- radio单选框 --> <el-radio-group v-if="formobj.radio" v-model="formData[formobj.prop]" :disabled="formobj.disabled"> <el-radio v-for="(options, rIndex) in formobj.options" :key="rIndex" :label="options.label" :value="options.value" /> </el-radio-group> <!-- checkbox复选框 --> <el-checkbox-group v-if="formobj.checkbox" v-model="formData[formobj.prop]" :disabled="formobj.disabled"> <el-checkbox v-for="options in formobj.options" :key="options.value" :label="options.label" /> </el-checkbox-group> <!-- 文件上传 --> <!-- 如果对象有值就回显，没有值就为空 --> <el-upload v-if="formobj.upload" :ref="formobj.prop" :accept="formobj.accept ? formobj.accept : 'PNG,JPEG'" :file-list=" formData[formobj.prop] ? formData[formobj.prop] : []" :action="`${uploadUrl}${formobj.uploadObj.fileType ? formobj.uploadObj.fileType : '' }`" :limit="formobj.uploadObj.limit" :class="{'hide':formobj.uploadObj.hideUpload || formData[formobj.prop].length==formobj.uploadObj.limit}" :on-preview="handlePictureCardPreview" :on-remove="(file,fileList)=>handleRemove(file,fileList,formobj.uploadObj.limit,formobj.prop,index)" :on-success="(response,file,fileList)=>uploadSuccess(response,file,fileList,formobj.uploadObj.limit,formobj.prop,index)" list-type="picture-card" :auto-upload="true"> <i slot="default" class="el-icon-plus" /> </el-upload> <el-dialog v-if="formobj.upload" :visible.sync="dialogVisible" :append-to-body="true" width="40%"> <img width="100%" :src="dialogImageUrl" alt=""> </el-dialog> <!-- 按钮 --> <el-button v-if="formobj.button" size="small" :disabled="formobj.disabled" :loading="formobj.loading" :type="formobj.buttonType || 'primary'" @click="buttonClick(formobj.prop,index)"> {{ formobj.placeholder }} </el-button> <!-- text展示 --> <span v-if="formobj.text" v-text="formData[formobj.prop]" /> <!-- 计量单位 --> <span v-if="formobj.unit" class="left10">{{ formobj.unit }}</span> <!-- 高德地图 --> <!-- <div class="amap_div" v-if="formobj.aMap"> <el-input size="small" v-model="formData[formobj.prop]" @input="aMapInput($event,formobj.prop)"></el-input> <ul v-show="searchShow==formobj.prop" class="sreach_ul"> <li @click="selectVal(sval,formobj.prop,index)" v-for=" (sval, index) in setSearchVal" :key="index">{{sval.name}} <span style="color:#8591A6 ;font-size: 12px;">{{sval.district}}</span> </li> </ul> <aMap :ref="'aMap'+formobj.prop" :aMapId="'aMapId'+formobj.prop" :location="formData[formobj.prop+'location']" @cbSearch="cbSearch($event,formobj.prop)"></aMap> </div> --> <quillEditor v-if="formobj.quillEditor" :quill="formData[formobj.prop]"></quillEditor> </el-form-item> </el-col> </el-form> </template> <!-- zoutiancong封装,date:20210429,详细使用见根目录@/views/home/testForm/testForm.vue,———————————————————————————————————————————————————————————————————————————————— --> <script> // import aMap from '../../map/aMap.vue' import quillEditor from '@/components/quillEditor/quillEditor.vue' export default { components:{ quillEditor }, props: { formObj: { type: Array, required: true }, formData: { type: Object, required: true }, searchSelectOptionsCb:{ type:Array, } }, data() { let uploadFileUrl = this.$store.state.user.uploadFileUrl; return { uploadUrl:uploadFileUrl, dialogImageUrl: '', searchSelectLoading:false, dialogVisible: false, disabled: false, searchShow: '', //高德地图input收索联想 setSearchVal: [], //高德地图赋值搜索内容 }; }, created() { }, watch:{ }, methods: { //select变化调用 selectChange(value, index, prop) { this.$emit('selectChange', value, index, prop); }, // input的input事件 inputINPUT(value, index, prop){ this.$emit('inputINPUT', value, index, prop); }, // input的change事件 inputChange(value, index,prop){ this.$emit('inputChange', value,index, prop); }, // 搜索类型select搜索 remoteMethod(query,index,prop) { if (query) { this.searchSelectLoading = true; this.$emit('querySelectValue',query,index,prop); setTimeout(() => { this.formObj[index].options = this.searchSelectOptionsCb; this.searchSelectLoading = false; }, 500) } else { this.searchSelectOptios = []; } }, //switch变化 formSwitchChange(val,index,prop){ this.$emit("formSwitchChange",val,index,prop); }, //按钮点击事件 buttonClick(prop,index){ this.$emit("buttonClick",prop,index); }, //文件上传成功回调 uploadSuccess(response,file,fileList,limit,prop,index) { this.formObj[index].uploadObj.hideUpload=fileList.length==limit;//文件列表变化后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮 this.pushUpload(file,fileList,limit,prop); }, //文件删除 handleRemove(file,fileList,limit,prop,index) { this.formObj[index].uploadObj.hideUpload=fileList.length==limit;//文件删除后判断当前文件列表长度是否等于限制长度。目的，当长度相等时隐藏文件上传按钮 this.pushUpload(file,fileList,limit,prop); }, // 文件预览 handlePictureCardPreview(file) { this.dialogImageUrl = file.url; this.dialogVisible = true; }, //提交时验证表单，直接在父级调用 submitForm() { let formValidate=Boolean; this.$refs.ruleForm.validate((valid) => { if (valid) { formValidate=true; } else { this.$message.warning("请把信息填写完整！"); formValidate = false; } }); return formValidate; }, /* 清空表单 逻辑： 1 、如果要清空文件上传列表，要传入要清空的upload的字段名，假如多个upload用for循环，调用清空方法！ 2、清空upload之后，还要把upload上传框展示出来，通过字段名比对，获取到在formObj中的下标，通过下标操作对象属性，进行展示 */ resetForm(uploadArr) { this.$refs.ruleForm.resetFields(); if(uploadArr){ for(let i=0;i<uploadArr.length;i++){ this.$refs[uploadArr[i]][0].clearFiles(); let index=this.formObj.findIndex(item=>item.prop==uploadArr[i]); this.formObj[index].uploadObj.hideUpload=false; } } }, // 单个字段验证 validateFieldProp(prop){ let formValidate=Boolean; this.$refs.ruleForm.validateField(prop,valid => { if (!valid) { formValidate=true; } else { formValidate = false; } }); return formValidate; }, // 对文件上传，删除进行赋值，调用form验证 pushUpload(file, fileList,limit,prop){ if(fileList.length>0){ this.formData[prop]=fileList; }else{ // 表示没有数据,把字段置空 this.formData[prop]=""; } this.$refs.ruleForm.validateField(prop);//调用验证form表单的文件上传 }, //地图input的input事件 aMapInput(value, prop) { this.$refs[`aMap${prop}`][0].getSearch(value); }, //子组件返回地图搜索值 cbSearch(val,prop) { this.setSearchVal = val.tips; //子组件 this.searchShow = prop; //显示input输入联想 }, //选中地图值 selectVal(val,prop,index) { // 赋值的时候，拿到键，及formobj的下标，进行赋值 this.formData[prop] = val.name; //input输入框赋值 this.formData.district = val.district; //传入省市区 let lngLat = { lng: val.location.lng, lat: val.location.lat }; this.formData[`${prop}location`] = lngLat; this.searchShow = ''; //隐藏input输入联想 }, } } </script> <style lang="less" scoped> @width: 220px; form { overflow: hidden; } /deep/.el-input { width: @width; } /deep/.el-select { width: @width; } /deep/.el-date-editor.el-input { width: @width; } /deep/.el-date-editor .el-range-separator{ width: 20px !important; } /deep/.el-range-editor--small.el-input__inner{ width: 400px; } .el-textarea { width: 400px; } .hide { /deep/ .el-upload--picture-card { display: none; } } .amap_div { overflow: hidden; height: 400px; width: 600px; position: relative; .sreach_ul { position: absolute; top: 1; background-color: white; z-index: 9; min-width: 210px; float: auto; height: 200px; overflow: auto; padding: 0 20px; line-height: 24px; } } </style> 

2、父组件调用

<template> <div> <el-button type="primary" @click="dialog = true" size="mini">点击打开 Dialog</el-button> <el-dialog title="提示" :visible.sync="dialog" width="1200px" :modal-append-to-body="false"> <publicForm ref="publicForm" :formObj="formObj" :formData="formData" :searchSelectOptionsCb="searchSelectOptionsCb" @selectChange="selectChange" @inputINPUT="inputINPUT" @inputChange="inputChange" @querySelectValue="querySelectValue" @formSwitchChange="formSwitchChange" @buttonClick="buttonClick"> </publicForm> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogOK">确认</el-button> <el-button @click="dialog=false">取 消</el-button> </span> </el-dialog> </div> </template> <script> import formJs from './js/testForm.js' export default { components: {}, data() { return { dialog: false, //弹出框 formObj: formJs.formObj, formData: formJs.formData, searchSelectOptionsCb: [], //form表单搜索select返回值 }; }, watch: { dialog(newVal, oldVal) { if (!newVal) { this.$refs.publicForm.resetForm(); //窗口关闭清空表单 } }, }, methods: { // select选择框变化 selectChange(value, index, prop) { console.log(value, index, prop) }, // inpuit变化 inputINPUT(value, index, prop) { console.log(value, index, prop) }, // inpuit Change inputChange(value, index, prop) { console.log(value, index, prop) }, // select 搜索值 querySelectValue(value, index, prop) { console.log(value, index, prop) let arr = [{ label: '搜索返回1号', value: 1 }, { label: '搜索返回2号', value: 2 }]; this.searchSelectOptionsCb = arr; }, // form表单switch变化 formSwitchChange(val, index, prop) { console.log(val, index, prop) }, // 按钮点击 buttonClick(index, prop) { console.log(index, prop) }, dialogOK() { //判断表单验证是否通过 if (this.$refs.publicForm.submitForm()) { console.log("success"); console.log(this.formData) } else { console.log("error") } }, } } </script> <style lang="less" scoped> </style> 

3、父组件js（正则表达式js可以不用，或者自己封装）

import regex from '../../../../utils/regex.js' // 正则表达式 export default { formObj: [{ input: true, //是input label: "input+正则", //字段 prop: "input", //字段名 placeholder: "请填写手机号", //提示内容 width: 12, //参考el-col disabled: false, //是否禁用 unit:'单位', rules: [{ required: true, message: '联系方式' }, { //可以自己写utils，封装正则验证 validator: (rule, value, callback) => { if (!value || !regex.isPhone(value)) { callback(new Error()); } else { callback(); } }, message: "联系方式不对", }] //验证 }, { textarea: true, //是input label: "输入框", //字段 prop: "textearea", //字段名 placeholder: "请填写输入框", //提示内容 width: 12, //参考el-col disabled: false, //是否禁用 rules: [{ required: true, message: '输入框' }, ] //验证 }, { select: true, label: "选择框", prop: "select", placeholder: "请选择", width: 12, //参考el-col disabled: false, options: [{ label: "options1", value: "1" }, { label: "options2", value: "2" }, ], rules: [{ required: true, message: '选择框不能为空！' }] }, { searchSelect: true, label: "select搜索框", prop: "searchSelect", placeholder: "请选择", width: 12, //参考el-col disabled: false, options: [], rules: [{ required: true, message: 'select搜索框！' }] }, { dateTimeRange: true, label: "年月日时分秒开", prop: "dateTimeRange", width: 12, //参考el-col disabled: false, options: { selectableRange: '18:30:00 - 20:30:00' }, rules: [{ required: true, message: '年月日时分秒开' }, ] }, { timePicker: true, label: "时分秒选择器", prop: "timePicker", placeholder: "请选择", width: 12, //参考el-col disabled: false, options: "", rules: [{ required: true, message: '时分秒选择器' }, ] }, { timePickerIsRange: true, label: "时分秒开始结束", prop: "timePickerIsRange", placeholder: "请选择", width: 12, //参考el-col disabled: false, options: "", rules: [{ required: true, message: '时分秒开始结束' }, ] }, { datePicker: true, label: "年月日选择器", prop: "datePicker", placeholder: "请选择", width: 12, //参考el-col disabled: false, options: "", rules: [{ required: true, message: '年月日选择器' }, ] }, { datePickerIsRange: true, label: "年月日开始结束", prop: "datePickerIsRange", placeholder: "请选择", width: 12, //参考el-col disabled: false, options: "", rules: [{ required: true, message: '年月日开始结束' }, ] }, { dateTime: true, label: " 年月日时分秒", prop: "dateTime", placeholder: "请选择", width: 12, //参考el-col disabled: false, options: "", rules: [{ required: true, message: ' 年月日时分秒' }, ] }, { switch: true, label: "switch", prop: "switch", placeholder: "请选择", width: 12, //参考el-col disabled: false, rules: [{ required: true, message: 'switch' }, ] }, { radio: true, label: "单选框", prop: "radio", placeholder: "请选择", width: 12, //参考el-col disabled: false, options: [{ label: "单选框1", value: "1" }, { label: "单选框2", value: "2" }, ], rules: [{ required: true, message: '单选框不能为空' }, ] }, { checkbox: true, label: "复选框", prop: "checkbox", disabled: false, width: 12, //参考el-col options: [{ label: "复选框1", value: "1" }, { label: "复选框2", value: "2" }, { label: "复选框3", value: "3" }, ], rules: [{ required: true, message: '复选框不能为空' }, ] }, { upload: true, label: "文件上传", prop: "upload", disabled: false, uploadObj: { fileType: "2001", limit: 1, //上传长度限制 hideUpload: false, //是否隐藏上传框 }, rules: [{ required: true, message: '文件上传' }, ] }, { button: true, label: "按钮", prop: "buttona", placeholder:"发送验证码", width: 12, //参考el-col disabled: false, }, { text: true, label: "文本", prop: "text", width: 12, //参考el-col disabled: false, }, { quillEditor: true, label: "富文本", prop: "quill", disabled: false, }, ], formData: { input: "", textearea: "", select: "", searchSelect: "", dateTimeRange: [], timePicker: "", timePickerIsRange: [], datePicker: "", datePickerIsRange: [], dateTime: "", date1: "", switch: false, radio: "", checkbox: [], upload: [], text:"这是一段文本，用于预览", quill:{ content:"" } }, } 

4、效果图预览