vue3-mgt-template/src/views/demo/elementPlusSwitch.vue

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