博客

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", []);