el-select 改变弹出提示框,点击取消值变为原值

el-select @change 事件点击切换选项后,v-model 的值其实已经改变了,change事件取到的值也是新的选项的值。el-select 所支持的方法中都无法取到旧值。

那么监听change事件弹出提示,点击取消要改为旧值应该怎么实现呢?

el-select 改变弹出提示框,点击取消值变为原值_第1张图片


                    
                    
                

使用 watch 进行监听,每次 siteId 改变都将旧值先存起来。

watch: {
        "searchForm.siteId": {
            handle(val, oldVal) {
                this.prepareSiteVal = oldVal
            }
        }
} 

change 事件处理

changeSiteEve() {
      if (this.$refs.xGrid.getTableData().visibleData.length > 0) {
        this.$confirm('切换业务线将清空当前页面商品列表区数据,是否继续切换?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 一些“确定”的处理逻辑
          // 需要调用一个失焦的方法,否则下拉选项会一直展开
          this.$refs.siteRef.blur();
        }).catch(() => {
          this.searchForm.siteId = this.prepareSiteVal;
           // 需要调用一个失焦的方法 
          this.$refs.siteRef.blur();
        });
      } else {
        // 一些处理
      }
    },

你可能感兴趣的:(工作,javascript,elementui,vue.js,javascript)