点击switch开关后，出现弹窗确认后，显示loading效果

1. 实现表格中使用el-switch，改变el-switch状态前，需要出现一个弹窗进行确认。

一开始的写法出现了些问题，点击el-switch，出现弹窗的同时，开关的状态就已经改变了。

所以在网上搜了多方法，感觉都有些奇怪。
有些是建议不用v-model，使用value去绑定值（v-model双向绑定数据，数据发生变化时页面也会更新）。这种方法行的通，但是vue3+element plus中使用时，控制台会显示警告。如果用的版本比较低应该是没有问题的。

还用一种方法是先将el-swicth上添加disabled属性，防止在点击时状态发生变化，再出现弹窗。但是鼠标悬浮在el-switch上会出现禁止的符号，实际却能点击出现弹窗，感觉很奇怪。

经过一次次尝试，最后终于找到一个解决的方法！！

1. HTML 关键代码

    <template #default="scope">
            <span v-if="col.key === 'enable'">
            //使用作用域插槽，这边使用Y和N控制，默认时true/false
              <el-switch
                v-model="scope.row.enable"
                active-value="Y"
                inactive-value="N"
                @change="handleChange(scope.row)" />
            </span>
     </template>

2. JS 关键代码

// 点击el-switch后
async function handleChange(row) {
  try {
    const flag = row.enable; // 点击之后的值
    row.enable = row.enable === 'Y' ? 'N' : 'Y'; // switch点击前的状态
    const confirmTips = flag === 'Y' ? '开启' : '关闭';
    //确认框
    const confirm = await ElMessageBox.confirm(`确认${confirmTips}当前配置？`, '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).catch(() => false);
    if (!confirm) return false;
    // 确认后，进行网络请求
    const data = {
      id: row.id,
      enable: flag,
    };
    const res = await api.changeAlertFilter(data);
    if (!res.result) throw new Error(res?.message);
    ElMessage.success(res.message || '操作成功');
    // 刷新表格数据
    getAlertFilterList();
  } catch (error) {
    ElMessage.error(error);
    console.log(`[log] - handleChange - err`, error);
  }
}

2. el-switch请求接口时单独设置loading

一开始是在el-switch上添加loading绑定了一个变量, 但这样打开一个开关时，所有的都会加上loading。
正确写法：
获取到表格数据后给每条数据添加单独的loading变量，单独控制状态。

1. HTML 关键代码

             <el-switch
                v-model="scope.row.enable"
                active-value="Y"
                inactive-value="N"
                @change="handleChange(scope.row)"
                :loading="scope.row.isSWitchLoading" />

2. JS 关键代码

//获取表格列表数据
async function getAlertFilterList() {
  try {
    state.isTableLoading = true;
    const res = await api.getAlertFilterList();
    if (!res.result) throw new Error(res?.message);
    state.tableData = res?.objectList || [];
    // 给每条数据添加单独的loading变量，单独控制状态
    state.tableData.forEach((item) => {
      item.isSWitchLoading = false;//默认设为false
    });
  } catch (error) {
    state.tableData = [];
    ElMessage.error(error?.message);
    console.log(`[log] - getAlertFilterList - err`, error);
  } finally {
    state.isTableLoading = false;
  }
}
// 点击el-switch后
async function handleChange(row) {
  try {
    const flag = row.enable; // 点击之后的值
    row.enable = row.enable === 'Y' ? 'N' : 'Y'; // switch点击前的状态
    const confirmTips = flag === 'Y' ? '开启' : '关闭';
    const confirm = await ElMessageBox.confirm(`确认${confirmTips}当前配置？`, '提示', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).catch(() => false);
    if (!confirm) return false;
   // 确认后，进行网络请求
    row.isSWitchLoading = true;//请求前开关显示loading效果
    const data = {
      id: row.id,
      enable: flag,
    };
    const res = await api.changeAlertFilter(data);
    if (!res.result) throw new Error(res?.message);
    ElMessage.success(res.message || '操作成功');
    getAlertFilterList();
  } catch (error) {
    ElMessage.error(error);
    console.log(`[log] - handleChange - err`, error);
  } finally {
    row.isSWitchLoading = false;//开关关闭loading效果
  }
}

点击switch开关后，出现弹窗确认后，显示loading效果