About vue2.0 + ele form loop and verification of corresponding fields! ! ! ! !
html code
<el-form ref="ruleForm" :inline="true" :model="form" label-width="140px" :rules="rules" ="fullScreenLoading" element-loading-text="Loading desperately..."> <div v-for="(item, index) in " @click="handleindex(index)"> <el-form-item label="account" prop="tel"> <el-input v-model="" ></el-input> </el-form-item> <el-form-item label="Name" prop="nickname" v-show=""> <el-input v-model=""></el-input> </el-form-item> </div> <el-form-item label="age" prop="age"> <el-input v-model=""></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">submit</el-button> <el-button @click="onCancel">Cancel</el-button> </el-form-item> </el-form>
script code
//Introduce interfaceimport { fetchdata, } from 'src/api/login' export default { var checkTel = (rule, value, callback) => { //The key is to judge the loop. Only by doing this can you make a judgment on every item in the loop for (let i = 0; i < ; i++) { value = [i].tel; var vdt = (value, { //You need to add it in another file 'required': {msg: 'Please fill in the account'} }); if (!) { callback(new Error()); } else { callback(); } } }; var checkNickname = (rule, value, callback) => { for (let i = 0; i < ; i++) { //First determine whether there is a name. If nickname is false, then don't verify it if ([i].isNickname) { value = [i].nickname; var vdt = (value, { //You need to add it in another file 'required': {msg: 'Please fill in your name'} }); if (!) { callback(new Error()); } else { callback(); } } else { callback(); } } }; //Because this is not in the loop, the value corresponding to the value is only one, so you can use it directly var checkAge = (rule, value, callback) => { var vdt = (value, {'required': {msg: 'Please fill in the age'}}); if (!) { callback(new Error()); } else { callback(); } }; return { form: { xh:[{ tel, nickname, isnickname:false, //A initial value is attached, which will not be displayed by default. }], age:'', id:'1', }, rules: { tel: [{required: true, validator:checkTel,trigger: 'blur',}], nickname: [{required: true, validator:checkNickname,trigger: 'blur',}], age: [{required: true, validator:checkAge,trigger: 'blur',}], }, }, }, created() { (); }, methods: { getData() { = true; fetchdata().then(response => { //Request the corresponding interface here if( == true) { = false; = ; //Return data to form }else{ = false; return false; } } } }
This article is just the experience summarized by the author during development, and I hope it can be helpful.
The above vue2.0 + ele loop form and verification field method are all the content I share with you. I hope you can give you a reference and I hope you can support me more.