element ui如何实现同时动态校验三个form-item的字段?

Question

有三个form-item表单的字段,现在要求就是三个里面必须填写一个才能校验通过,现在实现的转态和理想的略有偏差:

当我将三个表单el-autocomplete框的字段依次清除的时候只有最后一个框显示 红色提醒

我想要的效果是三个都显示红色提醒

当在三框任意一个写入字符的时候 三个框下面的提醒同时消失

看看我写的代码:在data中定义校验规则

在form-item下面prop引入要校验的字段 动态绑定

目前我实现的是伪动态校验,表单提交的时候可以达到效果,但是触发change事件的时候体验就没那么好了 请求大佬指点下

---

本人在阿里还有点关系,言之成理者,我动用自己的关系,赠送一次去阿里.......工作...........当饿了么骑手的机会

Answer 1

给你一个思路吧：
前提：给form添加一个ref为form；在form-item添加prop

1、在data里面定一个form，然后吧表单字段都放在from里面，比如：

data() {
    return {
        form: {
            name: null,
            age: null,
            gender: null
        }
    }
}

2、监听form的变化,判断是否有值

watch: {
    form: {
        handler(val) {
            Object.keys(val).forEach(item => {
                if(!this.form[item]) {
                    this.$refs.form.validateField(item);
                }
            })
        },
        deep: true,
        immediate: true
    }
}