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

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

news 来源：原创 2025/6/14 10:16:53

在上一篇文章中，通过校验规则写成内联循环去校验from表单项，在之前的代码基础上，进行校验规则的二次封装，使代码更加简洁，灵活高效、

参考上一篇：Vue el-from的el-form-item v-for循环表单如何校验rules（一）-CSDN博客

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`" 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 {rules: {},formData:{tableData: [],}};},created() {this.$set(this.formData, 'tableData', [{name: '', key: Date.now()}])this.addRules()}, methods: {add() {this.formData.tableData.push({name: '',key: Date.now()})this.addRules()},delete(index) {this.formData.tableData.splice(index, 1)},addRules() {let leng = this.formData.tableData.lengthfor(let i = 0; i < leng; i++) {this.rules[`tableData[${i}].name`] = [{ required: true, message: '请输入', trigger: 'blur'}]}},},
};
</script>

写在最后！！！

v-for循环对象的时候，是可以获得三个参数的，其中第一个参数是对象每一项的value值，第二个参数是每一项的key值，第三个参数是索引值，这里使用:prop="key+'.对应的key'"即可（不要漏了单引号里面的点）。循环对象的话是可以获得两个参数，其中第一个是数组的每一项，第二个参数是数组的下标，其实和对象是差不多的，v-for="(item,index) in array" , :prop="`array[${index}].name`"