el-table点击选中整行，限制一次只能选择一条

<template>
  <div class="related-events">
    <el-dialog
      title="选择关联赛事"
      lock-scroll="true"
      v-model="dialogVisible"
      width="1000px"
      custom-class="related-events-dialog"
    >
      <el-input
        v-model="param.keys"
        class="w-50 m-2"
        placeholder="活动ID、活动名称"
        style="width: 350px"
        :suffix-icon="Search"
        @input="onSearch"
      />
      <div class="table-cont dialog-table-scroll">
        <el-table
          ref="multipleTable"
          :data="state.matchList"
          tooltip-effect="dark"
          style="width: 100%"
          :row-key="rowKey"
          @row-click="rowClick"
          @selection-change="handleSelectionChange"
          highlight-current-row
        >
          <el-table-column type="selection" width="60" align="center">
          </el-table-column>

          <el-table-column prop="id" label="活动ID" width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            min-label="活动名称"
            width="140"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="type" label="活动类型" width="80">
          </el-table-column>
          <el-table-column
            prop="describe"
            min-label="活动描述"
            width="140"
            show-overflow-tooltip
          >
            <template v-slot="scope">{{ scope.row.describe || "-" }}</template>
          </el-table-column>
          <el-table-column prop="start_time" label="开始时间" width="160">
            <template v-slot="scope">{{
              scope.row.start_time || "-"
            }}</template>
          </el-table-column>
          <el-table-column prop="end_time" label="结束时间" width="160">
            <template v-slot="scope">{{ scope.row.end_time || "-" }}</template>
          </el-table-column>
          <el-table-column prop="create_time" label="创建时间" width="160">
          </el-table-column>
          <el-table-column label="banner图" width="100">
            <template v-slot="scope">
              <template v-if="scope.row.img_url">
                <el-image
                  class="small-picture-size36"
                  :src="scope.row.img_url"
                  fit="scale-down"
                  :preview-src-list="[scope.row.img_url]"
                  :preview-teleported="true"
                ></el-image>
              </template>
              <span v-else>-</span></template
            >
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination-box">
        <gf-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :pageIndex="param.page"
          :pageSize="param.size"
          :total="state.total"
        >
        </gf-pagination>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="onSave"> 保存 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { query_related_events_list } from "/@/api/officeWebsite";
import { HttpResponse } from "/@/api/httpResponse";
import GfPagination from "/@/components/gf-table/gf-pagination.vue";
import { Search } from "@element-plus/icons";
import { debounce } from "/@/utils/debounce";
import { ElMessage } from "element-plus";
const dialogVisible = ref(false);
const multipleTable = ref();
const state = reactive({
  loading: false,
  total: 0,
  /** 关联赛事列表 */
  matchList: [] as any,
  multipleSelection: [] as any
});
/**
 * 参数
 * @param keys	{string} 搜索框 （活动ID，活动名称）
 * @param page	{integer} 页码
 * @param size	{integer} 页数
 */
const param = ref({
  keys: "",
  page: 1,
  size: 10
});
const getCurentParam = () => {
  return {
    keys: param.value.keys || "",
    page: param.value.page,
    size: param.value.size
  };
};
const openRelate = () => {
  dialogVisible.value = true;
};
defineExpose({
  openRelate
});
// 赛事列表查询
const queryList = async (): Promise<any> => {
  state.loading = true;
  const { code, data, total } = (await query_related_events_list({
    ...getCurentParam()
  })) as HttpResponse;
  if (code == 200 && data) {
    let result = data || [];
    state.matchList = result;
    state.total = total;
  }
  state.loading = false;
};
/** 搜索 */
const onSearch = async () => {
  param.value.page = 1;
  debounce(await queryList(), 50);
};
// 分页相关
const handleSizeChange = (val: any) => {
  param.value.page = 1;
  param.value.size = val;
  queryList();
};

const handleCurrentChange = (val: any) => {
  param.value.page = val;
  queryList();
};
// 只选中一条数据
const handleSelectionChange = (list: any) => {
  state.multipleSelection = [];
  if (list.length > 1) {
    multipleTable.value.clearSelection();
    multipleTable.value.toggleRowSelection(list[list.length - 1]);
  }
  state.multipleSelection = [list[list.length - 1]];
};
// 点击整行选中数据
const rowKey = row => {
  return row.id;
};
const rowClick = row => {
  multipleTable.value.toggleRowSelection(row);
};
const emit = defineEmits(["childEvent"]);
const onSave = () => {
  if (state.multipleSelection.length > 0) {
    emit("childEvent", state.multipleSelection[0]);
    dialogVisible.value = false;
  } else {
    ElMessage({
      type: "warning",
      message: "请选择要关联的赛事"
    });
    return;
  }
};
queryList();
</script>
<style lang="scss">
// 可以写在公共样式里
.related-events {
  /**找到表头那一行，然后把里面的复选框隐藏掉**/
  .el-table__header-wrapper .el-checkbox {
    display: none;
  }
  /**
  *** 因为我们的需求是去掉复选框顶部的全选按钮后，需要填充别的文字，
  *** 所以才添加了下面的这个样式， 这个样式按需添加
  **/
  .el-table__header-wrapper
    .el-table-column--selection.el-table__cell
    .cell:before {
    content: "选择";
  }
  // 复选框变单选框
  .el-checkbox .el-checkbox__inner {
    border-radius: 50%;
  }
}
</style>
<style lang="scss" scoped>
.related-events {
  .table-cont {
    max-height: 400px;
    overflow-y: auto;
  }
  .gf-gagination {
    margin: 25px 0 0 0 !important;
  }
  .small-picture-size36 {
    width: 36px;
    height: 36px;
  }
  .small-picture-size36:not(:last-child) {
    margin-right: 8px;
  }
  .pagination-box {
    .gf-gagination {
      justify-content: center;
    }
  }
}
</style>