Vue 表单优化：下拉框值改变前的确认提示与还原逻辑实现

在开发表单类功能时，我们经常需要对用户的重要操作进行确认提示，以避免误操作导致的数据丢失或错误。本文将通过一个实际案例，介绍如何在 Vue 中实现下拉框值改变前的确认提示，并在用户取消操作时还原原始值。

场景描述

在项目中，我们有一个表单，其中包含一个下拉框（el-select），用户可以选择不同的类型。由于切换类型是一个重要的操作，可能会导致页面上其他数据的清空或改变，因此我们需要在用户切换类型时弹出确认提示框。如果用户确认切换，则提交新值并清空相关数据；如果用户取消切换，则保留原始值，下拉框显示不变。

实现思路

为了实现这一功能，我们需要解决以下两个关键问题：

1. 获取下拉框改变前的值：在 el-select 的 change 事件中，我们可以通过 this.$refs 获取到改变前的值。

2. 根据用户的选择决定是否更新值：通过 this.$confirm 提示用户，根据用户的确认或取消操作，决定是否更新下拉框的值。

代码实现

以下是完整的代码实现，包括 HTML 结构和 JavaScript 逻辑。

HTML 部分

<template><el-row type="flex" justify="space-between"><el-col :span="11"><el-form-item label="名称" prop="name"><el-inputmaxlength="50"show-word-limitv-model="dialogForm.name"clearable:disabled="isViewDialog"></el-input></el-form-item></el-col><el-col :span="11"><el-form-item label="类型" prop="type"><el-selectstyle="width: 100%"ref="typeRef"@change="changeType"v-model="dialogForm.type"size="small"><el-optionv-for="item in typelist":key="item.value":label="item.label":value="item.value"></el-option></el-select></el-form-item></el-col></el-row><el-row type="flex" justify="space-between"><el-col :span="11"><el-form-item label="添加方式" prop="way"><el-input v-model="dialogForm.way" clearable></el-input></el-form-item></el-col><el-col :span="11"><el-form-item label="添加时间" prop="time"><el-date-pickerstyle="width: 100%"v-model="dialogForm.time"type="datetime"placeholder="选择日期时间"></el-date-picker></el-form-item></el-col></el-row>
</template>

JavaScript 部分

export default {data() {return {dialogForm: {name: "",type: null,way: "",time: null,},typelist: [{ value: 1, label: "类型一" },{ value: 2, label: "类型二" },{ value: 3, label: "类型三" },{ value: 4, label: "类型四" },],isViewDialog: false,};},methods: {changeType(newVal) {const preValue = this.$refs.typeRef.value; // 获取改变前的值console.log(newVal, preValue, "类型改变");this.$confirm("切换类型将清空当前页面添加方式和添加时间数据，是否继续切换？","提示",{confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {// 用户确认切换this.$refs.typeRef.blur(); // 失焦，关闭下拉框this.dialogForm.way = ""; // 清空添加方式this.dialogForm.time = null; // 清空添加时间}).catch(() => {// 用户取消切换this.dialogForm.type = preValue; // 还原原始值this.$refs.typeRef.blur(); // 失焦，关闭下拉框});},},
};

关键点解析

1. 获取原始值：

   • 在 changeType 方法中，通过 this.$refs.typeRef.value 获取到下拉框改变前的值。这是因为 el-select 的 change 事件触发时，v-model 绑定的值已经更新为新值，而 this.$refs.typeRef.value 仍然保留了原始值。

2. 确认提示：

   • 使用 this.$confirm 弹出确认框，根据用户的操作决定是否更新下拉框的值。如果用户点击“确定”，则清空相关数据并保留新值；如果用户点击“取消”，则将下拉框的值还原为原始值。

3. 失焦处理：

   • 在确认或取消操作后，调用 this.$refs.typeRef.blur() 关闭下拉框，避免下拉框一直展开影响用户体验。

总结

通过上述实现，我们成功地在 Vue 中实现了下拉框值改变前的确认提示功能，并在用户取消操作时还原了原始值。这种实现方式不仅提升了用户体验，还避免了因误操作导致的数据丢失。希望本文的介绍能对你在开发中遇到类似问题提供帮助。