Vue 使用 Element 组件时 v-for 循环里的表单项验证方法
对 Vue 使用 Element 组件时 v-for 循环里的表单项验证方法进行详细介绍。主要讲解了如何在使用 Element 组件时处理 v-for 循环里的表单项验证问题。
Element 组件提供了一套完善的表单验证方法，官方文档中也详细介绍了相关 API。正常情况下，我们可以按照官方文档添加规则，需要验证的表单项设置 prop，然后提交表单时通过 form 的 validate 方法验证表单项。
但是，如果表单项里有通过 v-for 动态生成的表单项，如何设置验证规则就变得复杂了。官方文档并没有明确的说法，我们需要通过查找解决方案和实际验证，总结出来解决方法。
解决方法是，我们需要在 v-for 循环中为每个表单项添加唯一的 key，然后在 rules 中使用这个 key 来指定验证规则。例如：
```html
<template>
<div class="content-body">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row :gutter="10">
<el-col :span="12" :offset="0">
<el-form-item label="套餐名称：" prop="activityName" id="activityName">
<el-input v-model="form.activityName"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-form-item label="状态：">
<el-radio v-model="form.status" label="1">上线</el-radio>
<el-radio v-model="form.status" label="0">下线</el-radio>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="2" style="width:120px;">
<div class="sub-title">梯度设置：</div>
</el-col>
<el-col :span="20">
<el-row :gutter="10" v-for="(item,index) in form.productGroup" :key="index">
<el-col :span="6">
<el-form-item :label="'商品数量:' + index" :prop="'productGroup.' + index + '.num'">
<el-input v-model="item.num" type="number" size="small" style="width:80px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item :label="'优惠价格:'" :prop="'productGroup.' + index + '.price'">
<el-input v-model="item.price" type="number" size="small" style="width:80px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="4">
<i class="el-icon-remove-outline" @click="deleteLadder(index)"></i>
<i class="el-icon-circle-plus-outline" @click="addLadder" v-if="index==0"></i>
</el-col>
</el-row>
</el-col>
</el-row>
<el-form-item size="medium" class="div-submit">
<el-button @click="resetForm('form')">取消</el-button>
<el-button type="primary" @click="submitForm('form')">提交</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
return {
form: {
activityName: '',
status: '',
productGroup: [
{
num: '',
price: ''
}
]
},
rules: {
activityName: [
{ required: true, message: '请输入套餐名称', trigger: 'blur' }
],
status: [
{ required: true, message: '请选择状态', trigger: 'change' }
],
productGroup: {
num: [
{ required: true, message: '请输入商品数量', trigger: 'blur' }
],
price: [
{ required: true, message: '请输入优惠价格', trigger: 'blur' }
]
}
}
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 提交表单
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
deleteLadder(index) {
this.form.productGroup.splice(index, 1);
},
addLadder() {
this.form.productGroup.push({
num: '',
price: ''
});
}
}
}
</script>
在上面的代码中，我们使用了 v-for 循环来生成多个表单项，并且在每个表单项中添加了唯一的 key。然后，在 rules 中，我们使用这个 key 来指定验证规则。
通过这种方式，我们可以轻松地处理 v-for 循环里的表单项验证问题。
- 1
- 2
前往页