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-input
          maxlength="50"
          show-word-limit
          v-model="dialogForm.name"
          clearable
          :disabled="isViewDialog"
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="11">
      <el-form-item label="类型" prop="type">
        <el-select
          style="width: 100%"
          ref="typeRef"
          @change="changeType"
          v-model="dialogForm.type"
          size="small"
        >
          <el-option
            v-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-picker
          style="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 中实现了下拉框值改变前的确认提示功能，并在用户取消操作时还原了原始值。这种实现方式不仅提升了用户体验，还避免了因误操作导致的数据丢失。希望本文的介绍能对你在开发中遇到类似问题提供帮助。