el-select 拦截切换选项，弹窗判断是否更改值

最近遇到一个需要在切换选项框前校验是否可以切换的需求，el-select组件本身不支持拦截操作，所以只能用其它方法了，我使用的Proxy的拦截器，代码如下

<template>
  <div>
    <el-select v-model="form.value">
      <el-option label="a" :value="1" />
      <el-option label="b" :value="2" />
    el-select>
  div>
template>

<script>
export default {
  data () {
    return {
      form: {}
    }
  },
  methods: {
    // 模拟请求
    getData() {
      return new Promise((resolve) => {
        let res = confirm("按下按钮")
        resolve(res)
      })
    }
  },
  mounted() {
    this.form = new Proxy({ value: 1 }, {
      set: (obj, prop, value) => {
        // 只拦截key为value
        if (prop === 'value') {
          this.getData()
          .then(res => {
            res && (obj[prop] = value)
          })
        } else {
          obj[prop] = value
        }
        return true
      }
    })
  }
}
script>

逻辑很简单，通过proxy拦截属性值切换，上面的代码在切换选项会有弹窗，只有选择确认值才会切换，proxy的相关用法可以参考：MDN Proxy用法