场景描述:

新增页面使用el-select multiple下拉多选控件,并设置了非空校验,打开页面时,下拉多选控件会自动触发表单非空校验,如图:

解决方法

1.页面初始化时,设置当前属性初始值为空数组

 data() {
    return {
      // 表单参数
      form: {
         providerList:[],
         },
      // 表单校验
      rules: {
        providerList: [
          { required: true, message: "请选择物流运营商", trigger: "change" }
        ],

      },
    };
  },

2.使用钩子函数,在创建页面时,重置对应属性的值

created() {
       let _self = this;
       _self.$nextTick(()=>{
        //_self.form为页面属性接收值   //providerList 为下拉框v-model对应的值
         _self.$set(_self.form, 'providerList', [])
            })
        },

注: _self.form对象为上述第一种方法中的form对象

实现效果:

 

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐