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

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

场景描述

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

实现思路

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

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

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

代码实现

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

HTML 部分

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 部分

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-selectchange 事件触发时,v-model 绑定的值已经更新为新值,而 this.$refs.typeRef.value 仍然保留了原始值。
  2. 确认提示

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

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

总结

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

相关推荐
uhakadotcom27 分钟前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom31 分钟前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom33 分钟前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom42 分钟前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom1 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI2 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua2 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI2 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室2 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
溪饱鱼2 小时前
Nuxt3能上生产吗?
前端