<div style="padding: 30px; width: 300px"> <div v-for="(formData, formIndex) in formList" :key="'form' + formIndex"> <el-form ref="formRef" :model="formData" :rules="formRules" label-width="110px" size="mini" status-icon > <el-form-item :label="`表单 ${formIndex + 1}...
formInlineList.'+index+'.formInline就是数据结构与数据 每一个循环中的<el-form-item>都需要加:rules 去rules时要取吧rules加上取全 结构( 与平常一样该绑定绑定,改ref ref,就是for循环以后需要注意,还有数据结构的写法 ) <el-form :model="formInline":rules="rules"ref="ruleForm"label-width="100px...
item> </div> </el-form> </div> </template> <script> export default { data() { return { ruleForm: { // 动态循环项数组 formItemArr: [ { name: "", gender: "", }, ], }, }; }, methods: { // 添加一个表格 addForm() { let itemObj = { name: "", gender: "", }; ...
<el-form-item :label="'姓名' + index+1":prop="'persons.' + index + '.name'":rules="rules.name"> <el-input v-model="domain.name"></el-input> </el-form-item> </el-col> <el-col :span="8"> <el-form-item :label="'手机号码' + index+1":prop="'persons.' + index + ...
{ item.name }}</el-checkbox></el-col><el-colv-if="item.checked":span="12"><el-form-itemlabel="金额:"label-width="60px":prop="'reserveTypeList.'+ index +'.price'":rules="formRules.price"><el-inputv-model="item.price"size="mini":placeholder="`请输入${ item.name }金额`">...
循环的数组和其他表单项在同一个<el-form>表单中 prop改为:prop,形式为userList.${index}.name 每一个循环中的<el-form-item>都需要加:rules dom格式 data数据: editForm:{orgCode:'',// 服务机构groupType:'',// 诊室类型groupName:'',// 诊室名称groupDescription:'',// 诊室简介enableStatus:1,...
item> </div> </el-form> </div> </template> <script> export default { data() { return { ruleForm: { // 动态循环项数组 formItemArr: [ { name: "", gender: "", }, ], }, }; }, methods: { // 添加一个表格 addForm() { let itemObj = { name: "", gender: "", }; ...
1、在 el-form 上添加规则对象,名称可自定义 :rules=“skuRule” 2、给 el-form-item 添加属性 props=“名称”,需注意的是这个名称需要与规则对象skuRule中的属性名一致,不然验证不了 3、在 data 中定义 skuRule规则。 注意:v-for循环生成的表单项校验大体上与一般校验是一致的,其中最大的差异就在于prop值...
首先，表单主数据采用对象形式，循环展示。创建`model="ruleForm"`，并利用`v-for`动态生成表单项。点击“添加”按钮，通过`push`方法新增表单项。确保数据结构支持动态操作。核心在于动态`prop`属性。以`index`作为索引，拼接获取表单项属性名。如`:prop="'formItemArr.' + index + '.name'"`。
="mini"v-model="item.gender"placeholder="请选择"><el-optionlabel="男"value="男"></el-option><el-optionlabel="女"value="女"></el-option></el-select></el-form-item></div></el-form></div></template><script>exportdefault{data() {return{ruleForm: {// 动态循环项数组formItemArr:...