Prerequisite: Set an editable form in the table.
Notes:
1. Verification requires triggering the form, and the table requires array. Therefore, the form is bound to an object, and the table is bound to the array in the object.
Dynamic binding.
3. If necessary, you can add key. (:key='’)
<el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-table :data="" style="width: 100%">
<el-table-column prop="name" align="center">
<template slot-scope="scope">
<el-form-item label="Activity Name" :prop="'tableList.'+scope.$index+'.name'" :rules=''>
<el-input v-model=""></el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column align="center">
<template>
<el-button type="primary" @click="submitForm('ruleForm')">save</el-button>
<el-button @click="resetForm('ruleForm')">Reset</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
export default {
data() {
return {
ruleForm: {
tableList: [],
},
rules: {
name: [
{ required: true, message: 'Please enter the activity name', trigger: 'blur' },
{ min: 3, max: 5, message: 'Length between 3 and 5 characters', trigger: 'blur' }
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}This is the article about solving the problem of element editable form verification. For more relevant element editable form verification content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!