vue 两个必填的el-select联动,第一个更改,第二个清空。第二个el-select重新验证出现问题。

注意第二个select验证的写法,必须要写上type:'array’

<el-form-item
   label="firstSelect"
   :rules="[
     {
       required: true,
       message: 'firstSelect不能为空',
       trigger: ['blur', 'change'],
     },
   ]"
   prop="firstSelect"
 >
   <el-select
     v-model="form.firstSelect"
     @change="selectFirstSelect"
   >
     <el-option
       v-for="(item, index) in firstSelectDict"
       :key="index"
       :label="item.name"
       :value="item.id"
     ></el-option>
   </el-select>
 </el-form-item>
 <el-form-item
    label="secondSelect"
    :rules="[
       { 
         type:'array',
         required: true, 
         message: 'secondSelect不能为空', 
         trigger: ['blur','change'] },
     ]"
    prop="secondSelect"
  >
    <el-select
      v-model="form.secondSelect"
      @change="selectSecondSelect"
      multiple
    >
      <el-option
        v-for="(item, index) in secondSelectDict"
        :key="index"
        :label="item.name"
        :value="item.id"
      ></el-option>
    </el-select>
  </el-form-item>

methods里
清空的方法:先delete,再赋值一个空的

selectFirstSelect(val){
  ...
  //删除第二个select绑定的属性
  delete this.form.secondSelect;
  //重新添加第二个select绑定的空的属性
  this.$set(this.form, "secondSelect", []);
  //延迟验证,否则第一个刚改,第二个清空后直接进行验证提示
  this.$nextTick(()=>{
    this.$refs['form'].clearValidate('secondSelect'); 
  })
},
selectSecondSelect(val){
  //强制刷新
  this.$forceUpdate();
}

错误尝试:

  • 直接赋值为空数组
this.form.secondSelect=[];
  • 只用set进行清空
this.$set(this.form, "secondSelect", []);
Logo

前往低代码交流专区

更多推荐