elementUI中的表單相關(guān)問題

一、用法

1、動態(tài)表單

調(diào)用接口返回表單，后端的接口返回值如下：

這些是渲染后的效果

頁面使用（父組件）

 <el-button size="small" class="Cancelbtn" @click="sub(true)">發(fā)起新的</el-button><!-- 彈窗-新的 --><el-dialogstyle="margin-top: -10vh"class="newdialogVisible":visible.sync="dialogVisible"width="90%"><div class="dialog-header">{{ BpmName.appname }}</div><div class="center"><FromHead ref="FromHead" :List="List"></FromHead></div><div class="dialog-footer" align="center"><divstyle="display: inline; margin: 0 5px"v-for="(obj, j) in List.button":key="j"><el-buttonv-if="obj.type === 0"size="small"class="Cancelbtn"@click="sub(true)">{{ obj.name }}</el-button><el-buttonv-if="obj.type === 1"size="small"class="addbtn"@click="sub(false)">{{ obj.name }}</el-button></div></div></el-dialog>

<script>
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: {}, //新的獲取動態(tài)表單，以及相關(guān)信息newform: {fromid: 1, //表單編號node_uuid: "", //當(dāng)前節(jié)點  保存數(shù)據(jù)時提交使用jsondata: "", //動態(tài)表單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 style="width: 69vw" :List="editForm" :table="table" :table1="table1"></EditFrom>// this.List.table1 = this.table1; //把組件中表格的驗證給去除掉console.log(this.List, "新建表單");localStorage.setItem("formList", JSON.stringify(this.List)); //為了離開彈窗時，檢查是否有所改變this.dialogVisible = true;});},} 
}
</script>

封裝動態(tài)表單（子組件）

我沒有把按鈕封裝在這里面，因為按鈕是需要在父組件中的

<template><div id="SearchHead"><el-form:inline="true"style="width: 100%; height: 100%"ref="FromHead":model="List"label-width="200px"label-position="top"><el-row :gutter="12" style="width: 100%; display: flex; flex-wrap: wrap"><el-col :span="12" v-for="(item, index) in List.dom" :key="index"><el-form-itemv-if="item.type === 0":label="item.name":prop="'dom.' + index + '.default_val'":rules="item.required ? item.required : { required: false }"><el-inputv-model="item.default_val"placeholder="請輸入"></el-input></el-form-item><el-form-itemv-if="item.type === 1":label="item.name":prop="'dom.' + index + '.default_val'":rules="item.required ? item.required : { required: false }"><el-input-numberv-model="item.default_val"placeholder="請輸入"></el-input-number></el-form-item><el-form-itemv-if="item.type === 2":label="item.name":prop="'dom.' + index + '.default_val'":rules="item.required ? item.required : { required: false }"><el-select v-model="item.default_val" placeholder="請選擇"><el-optionv-for="(i, ind) in item.attr":key="ind":label="i":value="i"></el-option></el-select></el-form-item><el-form-itemv-if="item.type === 3":label="item.name":prop="'dom.' + index + '.default_val'":rules="item.required ? item.required : { required: item.required }"><el-date-pickerv-model="item.default_val"type="date"placeholder="選擇日期"format="yyyy-MM-dd"></el-date-picker></el-form-item><el-form-itemv-if="item.type === 4":label="item.name":prop="'dom.' + index + '.default_val'":rules="item.required ? item.required : { required: false }"><el-date-pickerv-model="item.default_val"type="datetime"placeholder="選擇日期時間"></el-date-picker></el-form-item><el-form-itemv-if="item.type === 5":label="item.name":prop="'dom.' + index + '.default_val'":rules="item.required ? item.required : { required: false }"><el-radio-group v-model="item.default_val"><el-radio :label="ii" v-for="ii in item.attr" :key="ii">{{ii}}</el-radio></el-radio-group></el-form-item><el-form-itemv-if="item.type === 6":label="item.name":prop="'dom.' + index + '.default_val'":rules="item.required? {required: item.required.required,message: item.required.message,trigger: 'blur',}: { required: false }"><el-checkbox-group v-model="item.default_val"><el-checkbox:label="jj"v-for="jj in item.attr":key="jj"></el-checkbox></el-checkbox-group></el-form-item><el-form-itemv-if="item.type == 8":label="item.name":prop="'dom.' + index + '.default_val'":rules="[item.required? {required: item.required.required,message: item.required.message,trigger: 'change',}: { required: false },]"><el-uploadclass="upload-demo"action="#"ref="upload"multiple:file-list="item.attr":on-change="(file, fileList) => {change(file, fileList, index);}":auto-upload="false":http-request="httprequest":on-remove="remove"accept=".xlsx,.xls,.jpg,.jpeg,.gif,.png,.pdf,.doc,.docx"><el-buttonslot="trigger"icon="el-icon-upload2"style="width: 100%; text-align: left"size="small"class="dashedbtn">上傳文件</el-button></el-upload></el-form-item></el-col></el-row><el-row :gutter="24" style="width: 100%; display: flex; flex-wrap: wrap"><el-col :span="24" v-for="(item, index) in List.dom" :key="index"><el-form-item v-if="item.type == 7" :label="item.name"><el-buttonv-if="item.type == 7"size="small"@click="addtable(item)"class="addbtn">添加行</el-button><el-buttonv-if="item.type == 7"size="small"@click="deletetable(item)"class="Cancelbtn">刪除</el-button><el-tablev-if="item.type == 7"ref="table":data="item.table1"borderstyle="width: 100%; margin-top: 1%":header-cell-style="{padding: '0',}"@selection-change="handleSelectionChange"><el-table-column type="selection" width="45" align="center"></el-table-column><el-table-columnv-for="(i, index) in item.table":key="i.label":prop="i.prop"align="center":label="i.label"><template slot-scope="scope"><el-inputsize="small"v-model="scope.row[index]"placeholder="請輸入"/></template></el-table-column></el-table></el-form-item></el-col></el-row></el-form></div>
</template><script>
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("請先上傳相關(guān)文件"));}},// 表格添加行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);},// 導(dǎo)入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 = []; // 清空圖片已經(jīng)上傳的圖片列表（綁定在上傳組件的file-list）let a = 0;fileList.forEach((item, idx) => {/*在此處，對比文件名，將文件名相同的對比次數(shù)累加，相同的文件名累加值為 2 時，說明文件名已經(jīng)重復(fù)，直接刪掉。*/if (file.name === item.name) {a++;// console.log(a, file, fileList);if (a === 2) {this.$mess.info("不能重復(fù)上傳，已把重復(fù)文件刪除");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("上傳成功"); //這個是封裝的，無論調(diào)用多少次，都只顯示一次}},},
};
</script><style lang="scss">
#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%;}
}
</style>

2、多個表單共用一個對象，但要同時驗證

<template><div id="Detail" class="Detail"><!-- 收樣信息 --><div class="top"><divstyle="display: flex;justify-content: space-between;border-bottom: 1px solid #e4e7ed;margin-bottom: 20px;"><div class="titleBox"><img src="@/assets/wd.png" style="width: 20px; height: 20px" /><div>收樣信息 Receiver Information</div></div></div><div class="formbox"><el-form:inline="false"ref="formA":model="editformReceiver":rules="editformReceiverRules"><el-form-item label="Name（收樣名稱）" prop="receivername"><el-input v-model="editformReceiver.receivername"></el-input></el-form-item><el-form-item label="Address（收樣地址）" prop="receiveraddress"><el-inputv-model="editformReceiver.receiveraddress"type="textarea"></el-input></el-form-item><el-form-itemlabel="Contact person（聯(lián)系人）"prop="receivercontactperson"><el-inputv-model="editformReceiver.receivercontactperson"></el-input></el-form-item><el-form-item label="E-mail（郵箱）" prop="receiveremail"><el-input v-model="editformReceiver.receiveremail"></el-input></el-form-item><el-form-item label="Phone（電話）" prop="receiverphone"><el-input v-model="editformReceiver.receiverphone"></el-input></el-form-item></el-form></div></div><!-- 送樣信息  --><div class="top"><divstyle="display: flex;justify-content: space-between;border-bottom: 1px solid #e4e7ed;margin-bottom: 20px;"><div class="titleBox"><img src="@/assets/wd.png" style="width: 20px; height: 20px" /><div>送樣信息 Sender Information</div></div></div><div class="formbox"><el-form:inline="false"ref="formB":model="editformReceiver":rules="editformReceiverRules"><el-form-item label="Name（客戶名稱）" prop="sendername"><el-input v-model="editformReceiver.sendername"></el-input></el-form-item><el-form-item label="Address（客戶地址）" prop="senderaddress"><el-inputv-model="editformReceiver.senderaddress"type="textarea"></el-input></el-form-item><el-form-itemlabel="Contact person（聯(lián)系人）"prop="sendercontactperson"><el-input v-model="editformReceiver.sendercontactperson"></el-input></el-form-item><el-form-item label="E-mail（郵箱）" prop="senderemail"><el-input v-model="editformReceiver.senderemail"></el-input></el-form-item><el-form-item label="Phone（電話）" prop="senderphone"><el-input v-model="editformReceiver.senderphone"></el-input></el-form-item><el-form-item label="Way of Delivery(送樣方式)"><br /><el-radio-groupv-model="editformReceiver.sendsampletype"@change="changeRadio"><el-radio :label="0">自送</el-radio><el-radio :label="1">赴廠</el-radio><el-radio :label="2">快遞</el-radio></el-radio-group><br /></el-form-item><el-form-itemlabel="快遞單號"v-if="editformReceiver.sendsampletype === 2"><el-input v-model="editformReceiver.couriernumber"></el-input></el-form-item></el-form></div></div></div>
</template><script>
export default {methods: {// 提交addsub() {let formArr = ["formA", "formB", "formC"]; //三個form表單的refvar resultArr = []; //用來接受返回結(jié)果的數(shù)組var _self = this;function checkForm(formName) {//封裝驗證表單的函數(shù)var result = new Promise(function (resolve, reject) {_self.$refs[formName].validate((valid) => {if (valid) {resolve();} else {reject();}});});resultArr.push(result); //push 得到promise的結(jié)果}formArr.forEach((item) => {//根據(jù)表單的ref校驗checkForm(item);});Promise.all(resultArr).then(async (values) => {//提交表單的相關(guān)操作//_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沒有原始數(shù)據(jù)，上傳圖片后，圖片無法顯示。只要把<el-form-item的綁定屬性和<el-upload內(nèi)部<img的屬性設(shè)置為不同變量，上傳完成后設(shè)置img的src即可。

4、輸入框使用正則表達(dá)式進(jìn)行實時校驗，正則如正整數(shù)、負(fù)整數(shù)、整數(shù)、非負(fù)整數(shù)、浮點數(shù)等

@input事件

每輸入一個字符都會觸發(fā)該事件，可用于實時查詢。

<el-inputv-model="day"placeholder="請輸入延期天數(shù)"@input="input"
/>

使用方法：

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('延期天數(shù)只能輸入正整數(shù)')}},
}

還有一些其他常用正則：

/^([1-9]|10)$/   //匹配1-10整數(shù)
?
^[1-9]\d*$　 　  //匹配正整數(shù)^-[1-9]\d*$ 　   //匹配負(fù)整數(shù)^-?[1-9]\d*$　　 //匹配整數(shù)^[1-9]\d*|0$　   //匹配非負(fù)整數(shù)（正整數(shù) + 0）^-[1-9]\d*|0$　　 //匹配非正整數(shù)（負(fù)整數(shù) + 0）^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$　　 //匹配正浮點數(shù)^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$　 //匹配負(fù)浮點數(shù)^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$　 //匹配浮點數(shù)^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$　　 //匹配非負(fù)浮點數(shù)（正浮點數(shù) + 0）^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$　　//匹配非正浮點數(shù)（負(fù)浮點數(shù) + 0）?

二、樣式

1、輸入框自動填充的背景色修改

進(jìn)入登錄頁，賬號和密碼會自動填入時，會出現(xiàn)填充背景色，這個背景色和我們的頁面樣式不符合，需要改寫成自己所需顏色。

//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、日期圖標(biāo)顯示在右側(cè)

.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%;}// 日期圖標(biāo).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;}}

這篇文章看完如果您覺得有所收獲，認(rèn)為還行的話，就點個贊收藏一下唄