使用:required="true"时，el-form 表单验证出现xxx is required

原来的代码：

<el-row>
          <el-col :span=24>
            <el-form-item :required="true" label="产品图片：" prop="productPicList" ref="upload-element">
              <file-upload ref="productPic" :keyId="productForm.id" :businessObject.sync="productForm.productPicList"
                           :fileList="productForm.productPicList" tableName="t_applet_product" fieldName="productPic" name="查看"
                           :editable="!disabled" fileType="jpg,png,jpeg,pdf" />
            </el-form-item>
          </el-col>
        </el-row>

报错如下：

解决办法：required属性不要用在form-item里，在rules中添加规则

修改如下：

<el-row>
          <el-col :span=24>
            <el-form-item label="产品图片：" prop="productPicList" ref="upload-element">
              <file-upload ref="productPic" :keyId="productForm.id" :businessObject.sync="productForm.productPicList"
                           :fileList="productForm.productPicList" tableName="t_applet_product" fieldName="productPic" name="查看"
                           :editable="!disabled" fileType="jpg,png,jpeg,pdf" />
            </el-form-item>
          </el-col>
        </el-row>

在rules中添加规则

rules: {
          productPicList: [
            { required: true, message: '至少要有一张图片', trigger: 'blur' },
          ],
        }

 

---

感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮。本文欢迎各位转载，但是转载文章之后必须在文章页面中给出作者和原文连接。