[原]02-iview踩坑-动态表单验证

iview版本: 3.1.3

动态表单指的是表单的项是不固定的,由后台请求返回的,那么表单的验证规则也是不固定的了

<FormItem :label="sc.memory_name" prop="memory" v-show="sc.memory_need?true:false">
    <Row class="row-stype2">
        <Select v-model="sForm.memory" placeholder="请选择" clearable filterable 
        :multiple="sc.memory_muti?true:false">
            <Option v-for="item in sc.memory_info" :value="item.id" :key="item.id" >
                {{ item.name }}
            </Option>
        </Select>
    </Row>
</FormItem>

axios.get(`${curl}/getInfo?type_id=${this.param}`)
.then(res => {
    this.sc = res.data
    this.$refs.sForm.resetFields()
    this.ruleValidSc = res.ruleValidSc
})
.catch(error => {
    this.$Notice.error({
       title: '警告',
       desc: error
    })
});

表单的label, select是否多选,select选项都是动态生成的 每次动态请求时,需要先执行sForm.resetFields(),重置表单。否则表单的验证规则不会被重置。

空验证规则处理

if (this.ruleValidSc.__ob__.vmCount !== 0) {
    this.$refs['sForm'].validate(valid4 => {
        if (valid4) {
            checkSuccess = checkSuccess + 1
        } else {
            this.saveable = false
        }
    });
} else {
    checkSuccess = checkSuccess + 1
}

判断验证规则是否为空,为空的话,就不会执行validate方法。

分享 提问
comments powered by Disqus