iview select 使用了多选multiple @on-change 方法会自动触发

今天也是神奇 遇到一个打着灯笼也找不到的bug 因为我是添加编辑共用同一个弹出框 然后今天做编辑的时候 发现 明明region后端字段获取到了 但页面鬼斧神差的不显示 如下图 console.log都打印出来东西 就是不上页面 value的值也是对的

然后就很无奈 能怎么办 这时候就查找整个页面里 有存储区域的字段 发现有个地方我把他清空了 我把这句话屏蔽 居然又显示了

但 这是on-change方法啊 我都没change怎么会触发

然后各种百度 终于发现问题关键了 iview select 使用了多选multiple @on-change 方法会自动触发 瞬间明朗 居然是这鬼东西作祟 那问题找到了就很好解决了啊 去文档 找方法 看到了这个 那不正好解决我的问题

最终解决办法 加**@on-open-change=“allowedChange”**这个方法 下拉框展开时触发

 <!-- 账户 -->
 <FormItem label="账户" prop="account">
         <Select v-model="billingWarningForm.account" style="width:300px;" @on-change="changeAccount(billingWarningForm.account)"  @on-open-change="allowedChange" :transfer="true" multiple>
               <Option :value="item.id" v-for="item in accountList" :key="item.id">{{item.name}}</Option>
         </Select>
 </FormItem>

// 下拉框展开或收起时触发
 allowedChange(value){
         this.isUpdate = value;
  }

重点语句 this.isUpdate 判断 true是下拉框展开的意思

// 选择账户
 changeAccount: function(){
     if(this.isUpdate==true){
         if(this.billingWarningForm.account==""||this.billingWarningForm.account==null){
             return;
         }
         this.billingWarningForm.backupRegion='';
         tableBillingWarningVue.$api.account.queryAccountRegions("accountId",this.billingWarningForm.account[0])
         .then(res => {
             this.backupRegionList = res.data;
         })
     }
 }