自己封装的组件,el-form-item 校验问题

92 阅读1分钟

工作中总会遇见一些需求场景,是在官方文档中常规的form表单满足不了的。这时候就不得不自己手动封装一些组件。

比如下图中,点击右侧的搜索框后,打开一个table查询列表的弹窗。用户在table查询列表选中自己想要的数据后,回显到图中的界面上。

image.png

封装不难,整体交互都能达到自己想要的效果。

可是这个时候,出现了一个问题——————————el-form-item上prop指定的值已经变化后,不会触发重新校验,导致选中之后,错误信息不消失。

这个问题可大可小,不影响流程,对于有点洁癖的人来说,又有点别扭。网上找了很多方法,发现了一个很有效的解决方案。如下:

在vue的监听模块,对prop进行监听

watch: {
    'form.selectedList': {
        handler() {
            this.$refs.form.validateField('selectedList');
        },
        deep: true,
        immediate: true
    }
},