ElementUI-多层数据的表单验证

问题描述

表单绑定的数据结构为多层次数据时，实现各层数据的表单字段校验

结构示例

{
    "name":"名称",
    "honor_items": [
         {
            "picture":"图片1",
            "introduce":"介绍1"
        },
        {
            "picture":"图片2",
            "introduce":"介绍2"
        }
    ]
},

解决方法

• 表单需要绑定model值
• 在需要验证的表单项上直接应用对应的规则
• :prop=“honor_items[${index}].picture” :rules=‘rules.picture’

<template>
  <el-form label-position="left" label-width="95px" ref="editHonour" :model="operateHonourGroup">
    <el-form-item label="名称" prop="name">
      <el-input v-model="operateHonourGroup.name"/>
    </el-form-item>
    <div v-for="(item, index) in operateHonourGroup.honor_items" :key="index">
      <el-form-item label="图片" class="honour-img" :prop="`honor_items[${index}].picture`" :rules='rules.picture'>
        <el-upload
          v-if="!item.picture"
          action=""
          class="upload-btn"
          :on-success="(res) => handleSuccess(res, index)"
          :before-upload="handleImageVerify"
        >
          <i class="el-icon-plus icon"/>
        </el-upload>
        <div v-else>
          <div class="shadow-spec">
            <i class="el-icon-delete" @click.stop="handleRemoveImage(index)"/>
          </div>
          <img :src="item.picture" class="avatar"/>
        </div>
      </el-form-item>
      <el-form-item label="介绍">
        <el-input placeholder="请输入，限制200个字以内" v-model="item.introduce" type="textarea" maxlength="200" show-word-limit :rows="5"/>
      </el-form-item>
    </div>
  </el-form>
</template>

export default {
  data() {
    return {
      // 表单验证规则
      rules: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        picture: [{ required: true, message: '请上传图片', trigger: 'blur' }],
      }
    }
  }
}