Vue3 el-switch @change事件在初始化时会自动调用问题处理的多种方法

<el-switch
  v-model="item.status"
  :active-value="'1'"
  :inactive-value="'0'"
  :before-change="() => handleBeforeChange(item)"
/>

const handleBeforeChange = async (row: any) => {
  const text = row.status === "0" ? "启用" : "停用";
  try {
    await proxy.$modal.confirm(`确定要${text}“${row.userName}”用户吗？`);
    await changeUserStatus(row.userId, row.status);
    proxy.$modal.msgSuccess(`${text}成功`);
    return true;
  } catch (err) {
    return false; // 阻止切换
  }
};

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

let isInit = true;
const handleStatusChange = (row: any) => {
  if (isInit) {
    isInit = false;
    return;
  }
  const text = row.status === "0" ? "启用" : "停用";
  proxy.$modal.confirm(`确定要${text}“${row.userName}”用户吗？`)
    .then(() => {
      return changeUserStatus(row.userId, row.status);
    })
    .then(() => {
      proxy.$modal.msgSuccess(`${text}成功`);
    })
    .catch(() => {
      // 用户取消后回滚状态
      row.status = row.status === "0" ? "1" : "0";
    });
};

export const confirmSwitch = async (row, title, doChange: () => Promise<any>) => {
  try {
    await proxy.$modal.confirm(title);
    await doChange();
    proxy.$modal.msgSuccess("操作成功");
    return true;
  } catch (e) {
    return false;
  }
};