【Vue】获取el-select修改前后的数据

一、场景

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

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

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

复制代码

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

1.             handleChangeSourceType(newVal, oldVal) {
2.                 let _self = this;
3.                 _self.$confirm("修改XXX将会清空XXX，是否继续？", {
4.                     confirmButtonText: "继续",
5.                     cancelButtonText: "取消",
6.                     type: "warning",
7.                 }).then(() => {
8.                     _self.$set(_self.ruleForm, 'sourceId', '');
9.                     _self.$set(_self.ruleForm, 'sourceName', '');
10.                     _self.$set(_self.ruleForm, 'paymentTableData', []);
11.                 }).catch(() => {
12.                     _self.$set(_self.ruleForm, 'sourceType', oldVal);
13.                 });
14.             },

复制代码

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。