• select+option中，选择后只能在select标签上添加change事件，option上无法添加事件，但是，change事件一旦触发，select框中的值已经改变。那么要实现在select选择后弹框让用户确认一下是否要选择切换，如果点击了确定则改变，如果点击取消或者关闭那么则不改变select中的值。怎么办？
• 解决思路：监听select中的v-model绑定的值，watch可以监听到旧值和新值，判断旧值和新值是否相等，然后进行不同的数据处理。有所改变的时候再弹框，如果不改变则不弹框，但是这样处理，在确定改变的时候，如果点击了取消也会进行改变而且会一直弹框，因为点击了取消，此时select框中数值已经改变，如果要恢复，则需要改变v-model绑定的值，但如果是这样，类似于又再次触发了watch中的事件，而且旧值和新值不等，所以会一直弹框。
• 换个思路，在监听数据变换的生活，只保存数据；在change事件中弹框后在点击事件中如果点击了取消，则将select中的值变回到原先的值。但此时还会有上述问题，所以解决方式就是定义一个变量，整个的过程均由这个变量控制，某些条件下改变变量的值即可选择触发。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
      <div>
        <el-select v-model="value" placeholder="请选择" @change="selectCapa">
          <el-option v-for="item in myOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
  </div>
</template>
<script>
export default {
  created() {
    let result;
    let promise = new Promise ((resolve,reject)=>{
      sessionStorage.setItem("user", JSON.stringify([{
        value: "test1",
        label: 'A0100928',
      }, {
        value: "test2",
        label: 'AZ100928'
      }, {
        value: "test3",
        label: 'AF1003928'
      }]))
      result = JSON.parse(sessionStorage.getItem("user"))
      if(result) {
        resolve(result)
      }else {
        reject(result)
      }
    })
    promise.then((val)=>{
      this.myOptions = val
    },(val)=>{
      // console.log(1)
    })
    // console.log(JSON.parse(sessionStorage.getItem("user")))
  },
  data() {
    return {
      msg: 'yxm better',
      value:'',
      oldVal: '',
      returned: false,
      myOptions:''
    }
  },
  watch:{
    value:{
      handler(curVal,oldVal){
          this.oldVal = oldVal
          //this.$set(this.value,oldVal)
          // return false

          // return oldVal;
         
　　　},
    },
  },
  methods: {
    selectCapa(){
      //console.log(this.returned)
      if(! this.returned){
         this.returned = false
         this.$confirm('确定要切换身份, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '切换身份成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消切换身份'
          })
          this.returned = true
          //this.$set(this.value,oldVal)
          this.value = this.oldVal
          // return oldVal;

        })   
      }else{
        this.returned = false
      }

    },
   
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  /*display: inline-block;*/
  margin: 0 10px;
}

a {
  color: #42b983;
}

</style>