vue3+element-plus 项目中 el-switch 刷新后自动触发change

最新推荐文章于 2025-06-20 14:16:25 发布

长安143

最新推荐文章于 2025-06-20 14:16:25 发布

阅读量1.3k

点赞数 11

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端 elementui element-plus

Vue3 + Element Plus 的后台管理中使用 el-switch 控制状态，

<el-switch
  v-model="scope.row.status"
  active-value="0"
  inactive-value="1"
  @change="handleStatusChange(scope.row)"
></el-switch>

以为 @change 只会在手动切换时触发，但是页面一刷新就执行 handleStatusChange ，使接口被请求。

‌初始值与组件配置值不匹配‌
若组件的 active-value/inactive-value 与传入的 v-model 初始值不一致，组件初始化时会因状态变更自动触发 @change 事件。
‌Element Plus 官方设计机制‌
官方将 el-switch 的首次状态渲染视为一次“有效变更”，导致页面加载或刷新时自动触发 @change 事件。

检查 v-model 绑定的初始值是否严格等于 active-value 或 inactive-value。

<el-switch
  v-model="scope.row.status"
  :active-value="0"
  :inactive-value="1"
  @change="handleStatusChange(scope.row)"
></el-switch>

加上：绑定，使 active-value 和 inactive-value 变成真正的数字类型，问题就解决了。

// 初始化时确保 status 值为 0 或 1
const status = ref(0);  // 或 1

若数据源来自接口，需在赋值前进行类型和值校验。

在数据完成初始化后渲染组件，避免初始值不匹配：

<el-switch 
  v-if="isDataReady"
  v-model="scope.row.status"
  :active-value="0"
  :inactive-value="1"
  @change="handleStatusChange(scope.row)"
/>

const isDataReady = ref(false);
onMounted(async () => {
  await fetchData();  // 获取数据
  isDataReady.value = true;
});

此方法可规避初始化时的意外触发。

通过标志变量过滤首次触发事件：

let isFirstTrigger = true;
const handleStatusChange = () => {
  if (isFirstTrigger) {
    isFirstTrigger = false;
    return;
  }
  // 正常业务逻辑
};

此逻辑需结合 @change 事件绑定使用。

通过上述方案，可针对性解决 el-switch 自动触发事件的问题，同时保持代码简洁性和可维护性。