黑爪爪的博客

菜鸡练习生分享

vue element 表单验证 v-for写法

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>

黑爪爪

练习二年不到半的前端练习生,擅长雨露均沾,日常整理一些学习踩坑等笔记,巩固知识。