当前位置：首页 > news >正文

Vue el-from的el-form-item v-for循环表单如何校验rules（一）

news 来源：原创 2025/4/29 23:41:21

实际业务需求场景：新增或编辑页面（基础信息表单，一个数据列表的表单），数据列表里面的表单数是动态添加的。数据可新增、可删除，在表单保存前，常常需要做表单必填项的校验，校验通过以后才去发请求保存表单数据。

1、效果图

2、完整代码实现


<template><ul class="violation-content"><li v-for="(item,index) in formData.tableData" :key="item.key"><div class="content-item"><el-form-item :prop="`tableData[${index}].name`"  :rules="{required: true, message: '请输入', trigger: 'blur'}" label-width="1" style="margin-bottom: 0;"><el-input type="text" clearable placeholder="请输入" v-model.trim="item.name"></el-input></el-form-item></div><div class="content-item"><span @click="delete(index)">删除</span><el-button type="primary" v-if="index === (formData.tableData.length-1)" @click="add">添加</el-button></div></li></ul>
</template>
export default {data() {return {formData:{tableData: [],}};},created() {this.$set(this.formData, 'tableData', [{name: '', key: Date.now()}])}, methods: {add() {this.formData.tableData.push({name: '',key: Date.now()})},delete(index) {this.formData.tableData.splice(index, 1)},},
};
</script>

注意：

重点！！！，因为是循环的，所以prop也要变成动态的了，要拼接上index，就变成根据索引去找对应的校验项了，即为：:prop="'tableData.' + index + '.name'" ，这样的话，就变成了：prop="tableData.0.name"、prop="tableData.1.name"、prop="tableData.2.name" ... 这样的话，就可以绑定到每一项中的每一个绑定的值了，校验就不会漏掉。

校验规则写成内联就可以触发校验函数this.$refs["formData"].validate((val) => {})了