一、场景

        使用下拉组件(el-select)开发时，遇到一种场景，修改下拉选项时需要弹窗让用户二次确认，确定后才能更新新值，取消页面则需要回复原数据。

二、解决方案

1. el-select 增加 ref属性，并修改@change方法

<el-select v-model="ruleForm.sourceType"
  ref="ruleFormSourceType"
  @change="(currentValue) => handleChangeSourceType(currentValue, $refs['ruleFormSourceType'].value)"
  placeholder="转出对象类型">
  <el-option v-for="(item, index) of dictInfo.list['AAAAAA']"
     :key="index"
     v-if="item.dataCode != 20"
     :label="item.dataName"
     :value="item.dataCode"></el-option>
</el-select>

2. 增加对应的方法实现 handleChangeSourceType

            handleChangeSourceType(newVal, oldVal) {
                let _self = this;
                _self.$confirm("修改XXX将会清空XXX，是否继续？", {
                    confirmButtonText: "继续",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    _self.$set(_self.ruleForm, 'sourceId', '');
                    _self.$set(_self.ruleForm, 'sourceName', '');
                    _self.$set(_self.ruleForm, 'paymentTableData', []);
                }).catch(() => {
                    _self.$set(_self.ruleForm, 'sourceType', oldVal);
                });
            },

其中 newVal为修改后的新值，oldVal为原有旧值，使用 comfirm中的catch来捕获取消事件，并重置为旧值