网络规划设计师通常几月考_广州番禺最新疫情_seo门户网价格是多少钱_公司网页设计模板

一、场景

        使用下拉组件(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来捕获取消事件，并重置为旧值