el-table中的el-switch切换状态前执行异步请求且独立控制loading效果

<template>
    <el-table :data="tableData">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="Status">
            <template #default="scope">
                <!-- 每行的 el-switch 控件  带参数的 before-change -->
                <el-switch v-model="scope.row.status" :loading="switchLoading === scope.row.id" :before-change="beforeChange.bind(this, scope.row)"> </el-switch>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { ref } from "vue";

// 表格数据
const tableData = ref([
    { id: 1, status: true },
    { id: 2, status: false },
    { id: 3, status: true },
]);

// 控制加载状态的变量
const switchLoading = ref("");

// 模拟 API 请求
const changeArticleStatus = async (id) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ code: 200 }); // 模拟成功响应
        }, 2000);
    });
};

// before-change 事件处理函数
const beforeChange = (row) => {
    return new Promise(async (resolve, reject) => {
        switchLoading.value = row.id; // 设置当前行的加载状态
        const result = await changeArticleStatus(row.id); // 执行异步请求
        switchLoading.value = ""; // 请求完成后清除加载状态

        // 根据请求结果决定是否切换开关
        if (result.code === 200) {
            resolve(true); // 请求成功，允许切换
        } else {
            reject(false); // 请求失败，阻止切换
        }
    });
};
</script>