element ui中下拉框设置了多选multiple之后一进页面就触发表单校验

最新推荐文章于 2024-01-11 14:10:37 发布

阿wei程序媛

最新推荐文章于 2024-01-11 14:10:37 发布

阅读量1.6k

点赞数

分类专栏： Element UI 文章标签： ui javascript 开发语言

本文链接：https://blog.youkuaiyun.com/m0_58565372/article/details/130079886

版权

Element UI 专栏收录该内容

29 篇文章

订阅专栏

当使用el-select-multiple组件并设置非空校验时，页面加载会自动触发校验。解决方法包括在data中将初始值设为空数组，并在created钩子中重置providerList为空，以避免加载时的错误校验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景描述：

新增页面使用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对象

实现效果：