组件动态添加数据item 必填规则验证

最新推荐文章于 2025-04-14 13:48:04 发布

秃头男神

最新推荐文章于 2025-04-14 13:48:04 发布

阅读量367

点赞数 2

文章标签：动态生成必填验证 element elementui

本文链接：https://blog.youkuaiyun.com/weixin_45896126/article/details/144430287

版权

动态添加通过数据驱动就可以，难点在于动态绑定后的验证规则。不要在rules数组里添加动态生成太麻烦且容易出问题，直接在单项item里定义规则 ♥️ 重要的是props动态生成 programPictureSceneryList.${index}.picName
一般人不会想到这么写，基本会歪到programPictureSceneryList[index].picName oh shift 真坑
且注意 programPictureSceneryList.${index}.picName 在动态生成rules组里也没出发验证规则，踩坑属于。

  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item
          label="名称"
          :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
          prop="name"
        >
          <el-input v-model="form.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
          label="介绍"
          prop="introduce"
        >
          <el-input
            v-model="form.introduce"
            type="textarea"
            placeholder="请输入介绍"
          />
        </el-form-item>
        <el-upload
          ref="uploadRef"
          style="display: flex; justify-content: center"
          class="upload-demo"
          name="file"
          action="http://manage.sdlb.cc/ruoyi/common/uploadOneFileToQiniu"
          :on-success="handleSuccess1"
          :show-file-list="false"
          :limit="1"
        >
          <template #trigger>
            <el-button type="primary">上传图片</el-button>
          </template>
        </el-upload>
        <!-- 新增模板 -->
        <div
          class="temp"
          v-for="(item, index) in form.programPictureSceneryList"
          :key="index"
        >
          <img
            class="shut"
            src="http://img.sdlb.cc/web/%E5%88%A0%E9%99%A4.png"
            alt=""
            @click="delImg(item)"
          />

          <el-form-item
            :label="'标题 ' + (index + 1)"
            style="margin-top: 24px"
            :prop="`programPictureSceneryList.${index}.picName`"
            :rules="[
              { required: true, message: '请输入标题', trigger: 'blur' },
            ]"
          >
            <el-input v-model="item.picName" placeholder="请输入标题" />
          </el-form-item>
          <el-form-item
            :label="'星级 ' + (index + 1)"
            :prop="`programPictureSceneryList.${index}.starRating`"
            :rules="[
              { required: true, message: '请输入标题', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model.number="item.starRating"
              placeholder="请输入星级"
            />
          </el-form-item>
          <el-form-item :label="'图片地址 ' + (index + 1)">
            <el-input disabled v-model.number="item.picUrl" />
          </el-form-item>
        </div>
      </el-form>