明月袭行 2023-06-25 17:30 采纳率: 0%
浏览 10

vue2 + element-ui 表单校验

          <el-form-item
            v-if="editForm.data.category.properties"
            :key="item.id"
            :label="item.property_name"
            :rules="item.required ?
              [{ required: true, message: '必填', trigger: ['blur','change'] }] : []
            "
            label-width="180px"
          >
            <template v-if="item.type == 'select' ">
              <el-row>
                <el-col :span="12">
                  <el-select
                    v-model="item.value"
                    filterable
                    remote
                    clearable
                  >
                    <el-option
                      v-for="subitem in item.options"
                      :key="subitem.id"
                      :label="subitem.name"
                      :value="subitem.value"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </template>
            <template v-if="item.type == 'multi_select' ">
              <el-col :span="11">
                <el-select
                  v-model="item.value"
                  filterable
                  multiple
                  remote
                  reserve-keyword
                  clearable
                >
                  <el-option
                    v-for="subitem in item.options"
                    :key="subitem.id"
                    :label="subitem.name"
                    :value="subitem.value"
                  />
                </el-select>
              </el-col>
            </template>
            <template v-if="item.type == 'text' ">
              <el-col :span="11">
                <el-input v-model="item.value" />
              </el-col>
            </template>
          </el-form-item>
        </el-row>


请问一下各位同志请问像这种情况要怎么进行表单校验,需要根据后台获取到的接口数据进行特定字段的表单校验,不同的数据校验的内容不同,我现在遇到的问题是我试过这样写

       <el-form-item
            v-if="editForm.data.category.properties"
            :key="item.id"
           :prop="`properties.` + index + `.value` "
            :label="item.property_name"
            :rules="item.required ?
              [{ required: true, message: '必填', trigger: ['blur','change'] }] : []
            "
            label-width="180px"
         / >

但是没有用,还是无法校验字段,比如说根据我的校验规则,按理来说应该是失去焦点或改变值就会触发校验的,但是校验并没有触发,感谢

  • 写回答

2条回答 默认 最新

  • 发狂精灵 2023-06-25 17:36
    关注

    要是数组对象这种就给按照这种去对应

    <el-col :span="12" v-for="(item,index) in form.productParameters">
                                        <el-form :model="item" ref="formList" label-width="180px">
                                            <el-form-item :label="item.name" prop="paramValue"
                                                :rules="item.isKey=='true' ? [ { required: true, message: item.name+'不能为空', trigger: ['blur','change'] }] :[]">
                                                <el-input v-model="item.paramValue" style="width:100%">
                                                </el-input>
                                            
                                            </el-form-item>
                                        </el-form>
                                    </el-col>
    
    

    ```

    评论

报告相同问题?

问题事件

  • 创建了问题 6月25日