el-from 绑定rules,未遍历的 el-form-item 正常 的prop=“绑定的rules的名字”就可。若被v-for遍历的el-form-item需要 ———:prop=”‘被遍历的数组名.’ + index(遍历时定义的index)+ ‘.当前字段名’” 且需在标签上加上 rules….
代码示例:
<el-form label-position="right" label-width="100px" :model="firstMenu" size="large" :rules="rules" ref="ruleFormRef">
<div>
<el-tag class="com-mb-30" size="large">一级菜单</el-tag>
<!-- 表单验证 -->
<el-form-item label="菜单名" prop="label">
<el-input v-model="firstMenu.label" />
</el-form-item>
<!-- 表单验证 -->
<el-form-item label="别名" prop="value">
<el-input v-model="firstMenu.value" />
</el-form-item>
<el-form-item label="是否隐藏">
<el-switch v-model="firstMenu.isHide" />
</el-form-item>
<el-form-item label="图标">
<el-button @click="openCreate" :icon="firstMenu.icon">选择图标</el-button>
</el-form-item>
</div>
<!-- v-for 遍历写法 -->
<template v-for="(item, index) in firstMenu.children" :key="index">
<div>
<el-tag type="success">子级菜单-{{ index + 1 }}</el-tag>
<!-- 表单验证 -->
<el-form-item label="菜单名" :prop="'children.' + index + '.label'" :rules="rules.label">
<el-input v-model="item.label" />
</el-form-item>
<!-- 表单验证 -->
<el-form-item label="别名" :prop="'children.' + index + '.value'" :rules="rules.value">
<el-input v-model="item.value" />
</el-form-item>
<el-form-item label="是否隐藏">
<el-switch v-model="item.isHide" />
</el-form-item>
</div>
</template>
<el-form-item>
<el-button type="primary" @click="submitForm(ruleFormRef)" class="funBtn">提交</el-button>
<el-button type="success" @click="addChildren" class="funBtn">添加子目录</el-button>
<el-button type="danger" @click="deleteChildren" class="funBtn">删除子目录</el-button>
</el-form-item>
</el-form>