el-switch 动态限制表格按钮切换并提示

处理列表状态切换时，状态正常（开启）限制一定个数，例如3个，超出则提示信息。

需求考虑：

• 判断列表状态正常个数，超出限制点击（按钮禁用）
• 只限制开启，需要区分执行动作（开启、关闭）
• 到达上限时，添加提示内容

1、首次尝试： before-change

思路：通过 switch 状态改变前的钩子，判断当前操作及列表状态，如需限制则返回 false 阻止开关切换并提示。

<el-table-column prop="status" label="状态">
    <template #default="{ row, $index }">
        <el-switch
            v-model="row.status"
            style="--el-switch-on-color: #13ce66"
            :before-change="beforeChange($index)"
            @change="changeStatus(row, $event)"
        />
    </template>
</el-table-column>

function beforeChange(index) {
    const number = tableData.value.filter((item) => item.status).length;
    const currentVal = tableData.value[index].status;
    // 判断操作类型
    const isTurningOn = !currentVal;

  return new Promise((resolve) => {
    setTimeout(() => {
      // 判断 执行打开操作 且列表中开关正常的个数已到达限制
      if (isTurningOn && number >= 3) {
        ElMessage.warning('当前开启数已超限制，不可再开启');
        return false; // 阻止切换
      } else {
        resolve(true); // 允许切换
      }
    }, 1000);
  });
}

问题：before-change属性不能接收参数，如果传参会直接触发该事件，导致首次进入页面时便会弹出提示

2. disabled 动态禁用

（1）错误示范：直接根据当前列表状态个数禁用，会导致符合条件时所有按钮都被禁用，无法执行关闭操作

<el-switch
    v-model="row.status"
    :disabled="tableData.filter((item) => item.status).length >= 3"
/>

（2）优化后：添加单个按钮状态判断

<template #default="{ row, $index }">
    <el-tooltip
        effect="dark"
        :disabled="!toCheckSwitch(row)"
        content="当前开启数已超限制，不可再开启"
        placement="top"
    >
        <el-switch
            v-model="row.status"
            :disabled="toCheckSwitch(row)"
            @change="changeStatus(row, $event)"
        />
    </el-tooltip>
</template>

function toCheckSwitch(row, limit = 3) {
    // 当前列表中已存在开启状态的条目数
    const isSwitchPass = tableData.value.filter((item) => item.status).length < limit;
    // 超出限制 只允许关闭
    if (!isSwitchPass) return !row.status;
    return !isSwitchPass;
}