新干县城乡建设局网站,北京网站定制制作,建设一个网站要学什么,东莞手机网站设计公司elementUI中的表单相关问题一、用法1、动态表单调用接口返回表单#xff0c;后端的接口返回值如下#xff1a;这些是渲染后的效果页面使用#xff08;父组件#xff09;el-button sizesmall classCancelbtn clicksub(true)发起…elementUI中的表单相关问题一、用法1、动态表单调用接口返回表单后端的接口返回值如下这些是渲染后的效果页面使用父组件 el-button sizesmall classCancelbtn clicksub(true)发起新的/el-button!-- 弹窗-新的 --el-dialogstylemargin-top: -10vhclassnewdialogVisible:visible.syncdialogVisiblewidth90%div classdialog-header{{ BpmName.appname }}/divdiv classcenterFromHead refFromHead :ListList/FromHead/divdiv classdialog-footer aligncenterdivstyledisplay: inline; margin: 0 5pxv-for(obj, j) in List.button:keyjel-buttonv-ifobj.type 0sizesmallclassCancelbtnclicksub(true){{ obj.name }}/el-buttonel-buttonv-ifobj.type 1sizesmallclassaddbtnclicksub(false){{ obj.name }}/el-button/div/div/el-dialogscript
import { mapGetters } from vuex;
import {GetHomeData,BpmGetList,GetFrom,GetFromData,AddFromData,
} from /api/Bpm;
import FromHead from /components/FromHead/index.vue;export default {name: Process,computed: {...mapGetters([userid, name]),},components: { FromHead },data() {return {dialogVisible:false,BpmName: {}, //从常用中携带的项目信息List: {}, //新的获取动态表单以及相关信息newform: {fromid: 1, //表单编号node_uuid: , //当前节点 保存数据时提交使用jsondata: , //动态表单searchListsqr_id: 1, //申请人编号sqr: , //申请人姓名draft: false, //是否是草稿}, //表单提交table: [], //表单中的表头table1: [], //表单中的表格vDisable: false,}},created() {const a JSON.parse(localStorage.getItem(Goprocess));this.BpmName a;this.form.appid this.BpmName.id;},methods: {add() {GetFrom({ appid: this.userid }).then((res) {res.data.dom.forEach((i) {//处理表格if (i.type 7) {// 表头i.table i.attr.map((i, j) {return {label: i,prop: a [j],};});if (i.default_val.length 0) {i.table1 i.default_val.filter(function (item, index, arr) {return index ! 0;});} else {i.table1 [];}}});const a JSON.stringify(res.data);this.List JSON.parse(a);// //这是为了表格中表单的验证如果不需要则删除这两行并把table和table1传递给组件EditFrom// this.List.table this.table; //EditFrom v-else stylewidth: 69vw :ListeditForm :tabletable :table1table1/EditFrom// this.List.table1 this.table1; //把组件中表格的验证给去除掉console.log(this.List, 新建表单);localStorage.setItem(formList, JSON.stringify(this.List)); //为了离开弹窗时检查是否有所改变this.dialogVisible true;});},}
}
/script封装动态表单子组件我没有把按钮封装在这里面因为按钮是需要在父组件中的templatediv idSearchHeadel-form:inlinetruestylewidth: 100%; height: 100%refFromHead:modelListlabel-width200pxlabel-positiontopel-row :gutter12 stylewidth: 100%; display: flex; flex-wrap: wrapel-col :span12 v-for(item, index) in List.dom :keyindexel-form-itemv-ifitem.type 0:labelitem.name:propdom. index .default_val:rulesitem.required ? item.required : { required: false }el-inputv-modelitem.default_valplaceholder请输入/el-input/el-form-itemel-form-itemv-ifitem.type 1:labelitem.name:propdom. index .default_val:rulesitem.required ? item.required : { required: false }el-input-numberv-modelitem.default_valplaceholder请输入/el-input-number/el-form-itemel-form-itemv-ifitem.type 2:labelitem.name:propdom. index .default_val:rulesitem.required ? item.required : { required: false }el-select v-modelitem.default_val placeholder请选择el-optionv-for(i, ind) in item.attr:keyind:labeli:valuei/el-option/el-select/el-form-itemel-form-itemv-ifitem.type 3:labelitem.name:propdom. index .default_val:rulesitem.required ? item.required : { required: item.required }el-date-pickerv-modelitem.default_valtypedateplaceholder选择日期formatyyyy-MM-dd/el-date-picker/el-form-itemel-form-itemv-ifitem.type 4:labelitem.name:propdom. index .default_val:rulesitem.required ? item.required : { required: false }el-date-pickerv-modelitem.default_valtypedatetimeplaceholder选择日期时间/el-date-picker/el-form-itemel-form-itemv-ifitem.type 5:labelitem.name:propdom. index .default_val:rulesitem.required ? item.required : { required: false }el-radio-group v-modelitem.default_valel-radio :labelii v-forii in item.attr :keyii{{ii}}/el-radio/el-radio-group/el-form-itemel-form-itemv-ifitem.type 6:labelitem.name:propdom. index .default_val:rulesitem.required? {required: item.required.required,message: item.required.message,trigger: blur,}: { required: false }el-checkbox-group v-modelitem.default_valel-checkbox:labeljjv-forjj in item.attr:keyjj/el-checkbox/el-checkbox-group/el-form-itemel-form-itemv-ifitem.type 8:labelitem.name:propdom. index .default_val:rules[item.required? {required: item.required.required,message: item.required.message,trigger: change,}: { required: false },]el-uploadclassupload-demoaction#refuploadmultiple:file-listitem.attr:on-change(file, fileList) {change(file, fileList, index);}:auto-uploadfalse:http-requesthttprequest:on-removeremoveaccept.xlsx,.xls,.jpg,.jpeg,.gif,.png,.pdf,.doc,.docxel-buttonslottriggericonel-icon-upload2stylewidth: 100%; text-align: leftsizesmallclassdashedbtn上传文件/el-button/el-upload/el-form-item/el-col/el-rowel-row :gutter24 stylewidth: 100%; display: flex; flex-wrap: wrapel-col :span24 v-for(item, index) in List.dom :keyindexel-form-item v-ifitem.type 7 :labelitem.nameel-buttonv-ifitem.type 7sizesmallclickaddtable(item)classaddbtn添加行/el-buttonel-buttonv-ifitem.type 7sizesmallclickdeletetable(item)classCancelbtn删除/el-buttonel-tablev-ifitem.type 7reftable:dataitem.table1borderstylewidth: 100%; margin-top: 1%:header-cell-style{padding: 0,}selection-changehandleSelectionChangeel-table-column typeselection width45 aligncenter/el-table-columnel-table-columnv-for(i, index) in item.table:keyi.label:propi.propaligncenter:labeli.labeltemplate slot-scopescopeel-inputsizesmallv-modelscope.row[index]placeholder请输入//template/el-table-column/el-table/el-form-item/el-col/el-row/el-form/div
/templatescript
import { UploadData } from /api/Equipment;export default {name: SearchHead,props: {List: [Object, Array],},data() {return {multipleSelection: [], //多选tableFormrules: [],tableForm: {},ta: [],fileList: [], //文件列表formData: new FormData(),up: [],};},methods: {// // 一种方法// sub(callback) {// this.$refs[FromHead].validate(async (valid) {// if (valid) {// // const res await AddFromData({ ...this.newform });// // console.log(res);// // if (res.code 200) {// // if (this.newform.draft) {// // this.$notify({// // type: success,// // position: bottom-left,// // message: 添加成功,// // duration: 2000,// // offset: 100,// // });// // } else {// // this.$notify({// // type: success,// // position: bottom-left,// // message: 暂存成功,// // duration: 2000,// // offset: 100,// // });// // }// // }// } else {// this.$message.error(请将必填项填写完整);// return false;// }// });// },// 验证表单 两种方法validate(callback) {this.$refs[FromHead].validate((valid) {callback(valid);});},resetFields() {this.$refs[FromHead].resetFields();},validateField(props, index) {},// 上传文件验证upload(rule, value, callback, i) {// console.log(value);if (i.default_val ! || i.default_val ! []) {callback();} else {callback(new Error(请先上传相关文件));}},// 表格添加行addtable(item) {const lis Array(item.table.length).fill();// lis[,,,,,]var ar false;// if (item.table1) {item.table1.push(lis);// } else {// item.table1 [];// item.table1.push(lis);// }// 为了表格表单校验// const aaa lis.map((ele, ind) {// return a [ind];// });// let obj {}; //初始化js对象// for (let i 0; i aaa.length; i) {// this.$set(obj, aaa[i], );// }// this.List.table1.push(obj);// this.List.table1.push(lis);// // 判断表格最后一行是否都填完整// if (this.table1.length 0) {// this.table1[this.table1.length - 1].forEach((item) {// if (item ) {// ar true;// } else {// ar false;// }// });// if (ar) {// this.$message.error(请将表格填写完整);// } else {// this.table1.push(lis);// }// } else {// this.table1.push(lis);// }},// 表格删除deletetable(item) {var da [];da item.table1.filter((itemA) {return this.multipleSelection.every((itemB) {return itemB ! itemA;});});this.table1 da;},toggleSelection(rows) {if (rows) {rows.forEach((row) {this.$refs.table.toggleRowSelection(row);});} else {this.$refs.table.clearSelection();}},handleSelectionChange(val) {this.multipleSelection val;console.log(this.multipleSelection);},// 导入remove(file, fileList) {this.fileList fileList;this.List.dom.forEach((i, j) {if (i.type 8) {i.default_val this.fileList.map((item, index) {return item.FileUrl;});}});},change(file, fileList, index) {this.fileList []; // 清空图片已经上传的图片列表绑定在上传组件的file-listlet a 0;fileList.forEach((item, idx) {/*在此处对比文件名将文件名相同的对比次数累加相同的文件名累加值为 2 时说明文件名已经重复直接删掉。*/if (file.name item.name) {a;// console.log(a, file, fileList);if (a 2) {this.$mess.info(不能重复上传已把重复文件删除);fileList.splice(idx, 1);}}});this.fileList fileList;if (a ! 2) {this.httprequest(file, index);}},async httprequest(file, index) {// 一个一个上传var formData new FormData();formData.append(files, file.raw);const res await UploadData(formData);// console.log(res, 123);if (res.code 200) {const a [];a.push(res.data[0].FileUrl);this.List.dom.forEach((i, j) {if (i.type 8 j index) {i.default_val a;}});this.$mess.success(上传成功); //这个是封装的无论调用多少次都只显示一次}},},
};
/scriptstyle langscss
#SearchHead {width: 100%;.el-form-item {width: 100%;}.el-form-item__content {width: 100%;}.el-select {width: 100%;}.el-textarea__inner {border: 1px solid #dcdfe6 !important;}.el-date-editor.el-input {width: 100%;}.el-upload {width: 100%;}
}
/style2、多个表单共用一个对象但要同时验证templatediv idDetail classDetail!-- 收样信息 --div classtopdivstyledisplay: flex;justify-content: space-between;border-bottom: 1px solid #e4e7ed;margin-bottom: 20px;div classtitleBoximg src/assets/wd.png stylewidth: 20px; height: 20px /div收样信息 Receiver Information/div/div/divdiv classformboxel-form:inlinefalserefformA:modeleditformReceiver:ruleseditformReceiverRulesel-form-item labelName收样名称 propreceivernameel-input v-modeleditformReceiver.receivername/el-input/el-form-itemel-form-item labelAddress收样地址 propreceiveraddressel-inputv-modeleditformReceiver.receiveraddresstypetextarea/el-input/el-form-itemel-form-itemlabelContact person联系人propreceivercontactpersonel-inputv-modeleditformReceiver.receivercontactperson/el-input/el-form-itemel-form-item labelE-mail邮箱 propreceiveremailel-input v-modeleditformReceiver.receiveremail/el-input/el-form-itemel-form-item labelPhone电话 propreceiverphoneel-input v-modeleditformReceiver.receiverphone/el-input/el-form-item/el-form/div/div!-- 送样信息 --div classtopdivstyledisplay: flex;justify-content: space-between;border-bottom: 1px solid #e4e7ed;margin-bottom: 20px;div classtitleBoximg src/assets/wd.png stylewidth: 20px; height: 20px /div送样信息 Sender Information/div/div/divdiv classformboxel-form:inlinefalserefformB:modeleditformReceiver:ruleseditformReceiverRulesel-form-item labelName客户名称 propsendernameel-input v-modeleditformReceiver.sendername/el-input/el-form-itemel-form-item labelAddress客户地址 propsenderaddressel-inputv-modeleditformReceiver.senderaddresstypetextarea/el-input/el-form-itemel-form-itemlabelContact person联系人propsendercontactpersonel-input v-modeleditformReceiver.sendercontactperson/el-input/el-form-itemel-form-item labelE-mail邮箱 propsenderemailel-input v-modeleditformReceiver.senderemail/el-input/el-form-itemel-form-item labelPhone电话 propsenderphoneel-input v-modeleditformReceiver.senderphone/el-input/el-form-itemel-form-item labelWay of Delivery(送样方式)br /el-radio-groupv-modeleditformReceiver.sendsampletypechangechangeRadioel-radio :label0自送/el-radioel-radio :label1赴厂/el-radioel-radio :label2快递/el-radio/el-radio-groupbr //el-form-itemel-form-itemlabel快递单号v-ifeditformReceiver.sendsampletype 2el-input v-modeleditformReceiver.couriernumber/el-input/el-form-item/el-form/div/div/div
/templatescript
export default {methods: {// 提交addsub() {let formArr [formA, formB, formC]; //三个form表单的refvar resultArr []; //用来接受返回结果的数组var _self this;function checkForm(formName) {//封装验证表单的函数var result new Promise(function (resolve, reject) {_self.$refs[formName].validate((valid) {if (valid) {resolve();} else {reject();}});});resultArr.push(result); //push 得到promise的结果}formArr.forEach((item) {//根据表单的ref校验checkForm(item);});Promise.all(resultArr).then(async (values) {//提交表单的相关操作//_self.$refs.editformReceiver.resetFields();if (res.code 200) {_self.$message.success(提交成功);_self.cancel();} else {_self.$message.error(提交失败);}}).catch((_) {// _self.$message.error(请将必填项填写完整);});},}
}3、表单中的上传图片不显示使用上传el-upload若ruleForm没有原始数据上传图片后图片无法显示。只要把el-form-item的绑定属性和el-upload内部img的属性设置为不同变量上传完成后设置img的src即可。4、输入框使用正则表达式进行实时校验正则如正整数、负整数、整数、非负整数、浮点数等input事件每输入一个字符都会触发该事件可用于实时查询。el-inputv-modeldayplaceholder请输入延期天数inputinput
/ 使用方法methods: {input(e) {const num /^[1-9]\d*$/if (num.test(e)) {this.day e} else {// this.day e.replace(/[^\d.]/g, )this.day e.replace(e, )this.$message.error(延期天数只能输入正整数)}},
}还有一些其他常用正则/^([1-9]|10)$/ //匹配1-10整数
^[1-9]\d*$ //匹配正整数^-[1-9]\d*$ //匹配负整数^-?[1-9]\d*$ //匹配整数^[1-9]\d*|0$ //匹配非负整数正整数 0^-[1-9]\d*|0$ //匹配非正整数负整数 0^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ //匹配正浮点数^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ //匹配负浮点数^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0|0)$ //匹配浮点数^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0|0$ //匹配非负浮点数正浮点数 0^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0|0$ //匹配非正浮点数负浮点数 0二、样式1、输入框自动填充的背景色修改 进入登录页账号和密码会自动填入时会出现填充背景色这个背景色和我们的页面样式不符合需要改写成自己所需颜色。//vue2:-webkit-autofill {transition: background-color 5000s ease-in-out 0s;background-color: transparent !important;// box-shadow: 000px1000px $bg inset !important;-webkit-text-fill-color: $cursor !important; //字体颜色}//vue3input:-internal-autofill-selected {transition: background-color 5000s ease-in-out 0s;background-color: transparent !important;}2、日期图标显示在右侧.el-input__inner {border: 1px solid #496ef9;width: 100%;height: 30px;line-height: 30px;}.el-date-editor.el-input {width: 100%;}.el-input--small .el-input__inner {width: 100%;}.el-input--small,.el-input--suffix {width: 100%;}// 日期图标.el-input__prefix {left: auto;}.el-icon-date:after {content: \e78e;position: absolute;right: 50px;color: #496ef9;}.el-icon-date:before {content: ;}// 日期清除键.el-input__suffix {display: none;}
或者是.el-date-editor.el-input {width: 44%;}.el-input__prefix {position: absolute;top: 0;right: 5px;display: block;width: 100%;}.el-icon-date:after {content: \e78e;position: absolute;top: 1px;right: 30px;color: #496ef9;}.el-icon-date:before {content: ;}.el-input__icon {width: 100%;}
3、输入框提示文字的样式.el-input__inner {::placeholder {text-align: center;}}这篇文章看完如果您觉得有所收获认为还行的话就点个赞收藏一下呗
