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

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

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

<el-select v-model="searchForm.siteId" placeholder="请选择一条业务线"
                    ref="siteRef"
                    filterable
                    :disabled="isEdit"
                    :clearable="false"
                    @change="changeSiteEve"
                    style="width: 240px;">
                    <el-option
                            v-for="item in siteOption"
                            :key="item.siteId"
                            :label="item.siteName"
                            :value="item.siteId">
                    </el-option>
                </el-select>

使用 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 {
        // 一些处理
      }
    },