vue element 动态增加表单并进行表单验证
作者:互联网
表单验证:
需要注意的一点是:
普通表单验证单项依靠的是prop…而动态生成的表单要用:prop
书写的语法是:prop="‘moreNotifyObject.’ + index +’.notifyobject’",moreNotifyObject是v-for绑定的数组,index是索引,notifyobject是表单绑定的v-model的名称,然后用.把他们链接起来。
所以总结起来的语法就是:prop="‘v-for绑定的数组.’ + index + ‘.v-model绑定的变量’"
还有一个需要注意就是v-for的写法,要将表单的model名写进去
<div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key">
<template> <div> <el-form ref="form" :model="addForm" label-width="80px"> <div class="moreRules"> <div class="moreRulesIn" v-for="(item, index) in addForm.moreNotifyObject" :key="item.key" > <el-row> <el-col :span="6"> <el-form-item label="field" :prop="'moreNotifyObject.' + index + '.field'" :rules="[{ required: true, message: '请完善信息' }]" > <el-input v-model="item.field" placeholder="请输入field" class="el-select_box" ></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="name" :prop="'moreNotifyObject.' + index + '.name'" :rules="[{ required: true, message: '请完善信息' }]" > <el-input v-model="item.name" placeholder="请输入name" class="el-select_box" ></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="max" :prop="'moreNotifyObject.' + index + '.max'" :rules="[{ required: true, message: '请完善信息' }]" > <el-input v-model="item.max" placeholder="请输入max" class="el-select_box" ></el-input> </el-form-item> </el-col> <el-col :span="6" align="center"> <el-button @click="deleteRules(item, index)">删除</el-button> </el-col> </el-row> </div> <el-button @click="addUser">增加</el-button> <el-button @click="initData">清空</el-button> </div> </el-form> </div> </template> <script> export default { data() { return { addForm: { name: "", content: "", moreNotifyObject: [ { field: "", name: "", max: "", }, { field: "", name: "", max: "", }, ], }, }; }, methods: { initData() { this.addForm.moreNotifyObject = []; }, addUser() { this.addForm.moreNotifyObject.push({ field: "", name: "", max: "", }); }, deleteRules(item, index) { this.index = this.addForm.moreNotifyObject.indexOf(item); if (index !== -1) { this.addForm.moreNotifyObject.splice(index, 1); } }, }, }; </script> <style lang="scss" scoped> </style>
标签:index,vue,name,addForm,element,moreNotifyObject,表单,prop 来源: https://www.cnblogs.com/yelanggu/p/16186765.html