feat: elementPlusSwitch 中before-change问题处理

src/views/demo/elementPlusSwitch.vue

@@ -0,0 +1,47 @@
+<template>
+    <el-switch
+        v-model="isEnabled"
+        :loading="loading"
+        active-text="启用"
+        inactive-text="禁用"
+        active-value="Y"
+        inactive-value="N"
+        :before-change="() => toggleSwitch('测试参数')"
+    />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+/**
+ * :before-change="toggleSwitch"                    如果不带参数，可以使用这种写法，不会导致getInitData设置数据之后触发
+ * :before-change="toggleSwitch(isEnabled)"         如果带参数，使用这种写法会导致getInitData设置数据之后触发
+ * :before-change="() => toggleSwitch(isEnabled)"   无聊是否带参数都可以使用该写法，都不会导致getInitData设置数据之后触发
+ *
+ * 原因是因为el-switch希望得到的默认值我们自定义为Y或者N，但是我们初始化的时候又设置值为空，从空切换到Y或者N，会触发before-change事件
+ */
+
+const isEnabled = ref('');
+const loading = ref(false);
+const toggleSwitch = (params) => {
+    console.log('执行一次', params);
+    loading.value = true;
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            isEnabled.value = isEnabled.value === 'Y' ? 'N' : 'Y';
+            loading.value = false;
+            resolve();
+        }, 3000);
+    });
+};
+
+const getInitData = () => {
+    setTimeout(() => {
+        isEnabled.value = 'Y';
+    }, 500);
+};
+
+onMounted(() => {
+    getInitData();
+});
+</script>