element-plus多选表格每次限制只能选一个

需求：多选表格前面选择项，只能选择一个，但是第二次还能选择，不是禁用状态
思路：
1.隐藏全选checkbox
2.每次超过第二个选择checkbox的时候，把之前记录清除，再选择本次选择的id

<template>
  <el-dialog v-model="dialogFormVisible" title="修改业绩归属人" width="1010px" :before-close="handleBeforeClose">
    <el-form ref="formRef" :model="formData" inline label-width="0px" size="default" class="course-add">
      <div class="course-add-l">
        <el-form-item prop="depType">
          <el-select v-model="formData.depType" :disabled="formData.recommendationId == '2'" clearable placeholder="部门" @change="getPeopleList">
            <el-option v-for="item in depOptions" :key="item.regionId" :label="item.regionName" :value="item.regionId"></el-option>
          </el-select>
        </el-form-item>
      </div>

      <div class="course-add-r">
        <el-form-item prop="searchName">
          <el-input v-model="formData.searchName" placeholder="请输入姓名/手机号/学校名称" style="width: 180px; margin-right: 10px" class="search-input" @change="getPeopleList">
            <template #suffix>
              <el-icon @click="getPeopleList">
                <search />
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-button type="default" @click="getPeopleList" style="margin-top: 0px">查询</el-button>
        <el-button type="default" @click="getPeopleList" style="margin-top: 0px">重置</el-button>
      </div>
    </el-form>
    <el-table :data="tableData" stripe max-height="540px" style="width: 100%" :disabled="selectList.length == 1" @selection-change="handleSelectionChange" @select="selectClick" :header-cell-class-name="cellClass" ref="tableDataRefs" :row-key="getRowKeys">
      <el-table-column align="center" type="selection" width="50" />
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column prop="areaName" label="区域" width="120" />
      <el-table-column prop="depName" label="部门" width="180" />
      <el-table-column prop="TTC" label="TTC" width="120" />
      <el-table-column prop="saleName" label="销售姓名" width="120" />
      <el-table-column prop="phone" label="手机号" width="180" />
      <el-table-column prop="email" label="邮箱" width="180" />
      <!-- <el-table-column label="开营时间" min-width="200">
        <template #default="scope">{{ scope.row.campStartTime }}至{{ scope.row.campEndTime }}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态" min-width="100">
        <template #default="scope">
          {{ formatestatus(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column prop="progress" label="进度" min-width="100">
        <template #default="scope">
          {{ scope.row.progress }}
        </template>
      </el-table-column> -->
    </el-table>

    <el-pagination class="rowCC" v-model:currentPage="paginationData.pageNo" v-model:page-size="paginationData.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="paginationData.total" @size-change="getPeopleList()" @current-change="getPeopleList()" />
    <template #footer>
      <span class="dialog-footer rowCC">
        <el-button type="primary" @click="handleBeforeSumbit">确定</el-button>
        <el-button type="default" @click="handleBeforeClose" style="margin-top: 0px">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getAllSaleRegion } from '@/api/departmentalOfficerManage.js';

import { getUnAddRecommendCourseList } from '@/api/courseRecommend.js';
import { onMounted, onBeforeUnmount, toRefs } from 'vue';
import { useUserStore } from 'dirStore/user';
const dialogFormVisible = ref(false);
const formData = reactive({
  depType: '', // 部门类型
  searchName: '' //搜索输入
});
const tableData = ref([
  {
    id: '1',
    areaName: '本部',
    depName: '教研中心',
    TTC: '沈阳',
    saleName: '五竹',
    phone: '13812345678',
    email: '[email protected]'
  },
  {
    id: '2',
    areaName: '东北',
    depName: '市场销售部',
    TTC: '大连',
    saleName: '范思辙',
    phone: '13812345678',
    email: '[email protected]'
  }
]);
const paginationData = reactive({
  pageNo: 1,
  pageSize: 10,
  total: 0
});
const depOptions = ref([]);
const selectList = ref([]); //左侧选择
const tableDataRefs = ref('');
const openDialog = () => {
  dialogFormVisible.value = true;
};
onMounted(() => {
  searchAlldepartment();
});
const handleSelectionChange = selection => {
  selectList.value = selection;
};
const cellClass = () => {
  return 'DisableSelection';
};
// 控制单选——table选择项发生变化时
const selectClick = (selection, row) => {
  if (selection.length > 1) {
    let del_row = selection.shift();
    tableDataRefs.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
  }
};
const getRowKeys = row => {
  return row.id;
};
defineExpose({ openDialog });
</script>

<style lang="scss" scoped>
// 隐藏全选
:deep(.el-table__header-wrapper .DisableSelection .cell .el-checkbox__inner) {
  display: none !important;
}
</style>

element-plus多选表格每次限制只能选一个