vue 两个必填的el-select联动,第一个更改,第二个清空,第二个重新验证不通过--已解决

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", []);
  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可能是由于第二个el-select的选项数据没有同步更新导致的。你需要在第一个el-select的选项发生变化时,动态更新第二个el-select的选项数据。 例如,假设第一个el-select的选项数据为`options1`,第二个el-select的选项数据为`options2`,则可以在第一个el-select的`change`事件中动态更新`options2`,例如: ```javascript <template> <div> <el-select v-model="selectedOption1" @change="onChangeOption1"> <el-option v-for="option in options1" :key="option.value" :label="option.label" :value="option.value" /> </el-select> <el-select v-model="selectedOption2"> <el-option v-for="option in options2" :key="option.value" :label="option.label" :value="option.value" /> </el-select> </div> </template> <script> export default { data() { return { selectedOption1: '', selectedOption2: '', options1: [ { value: 'option1', label: 'Option 1' }, { value: 'option2', label: 'Option 2' } ], options2: [] }; }, methods: { onChangeOption1() { // 根据选中的第一个选项动态更新第二个选项数据 if (this.selectedOption1 === 'option1') { this.options2 = [ { value: 'option1-1', label: 'Option 1-1' }, { value: 'option1-2', label: 'Option 1-2' } ]; } else if (this.selectedOption1 === 'option2') { this.options2 = [ { value: 'option2-1', label: 'Option 2-1' }, { value: 'option2-2', label: 'Option 2-2' } ]; } // 将第二个选项重置为空 this.selectedOption2 = ''; } } }; </script> ``` 在`onChangeOption1`方法中,根据选中的第一个选项动态更新第二个选项数据,并将第二个选项重置为空。这样,在第一个el-select选中之后,第二个el-select的选项数据就会动态更新,并且选中的值也会正确显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值