实现一个可单选的el-table

简化示例效果如下

核心操作

1. 多选时取消上一次的选中
2. 把全选的按钮隐藏

代码

<template>
  <div>
    <el-table
      :data="tableData"
      @selection-change="onDialogSelectionChange"
      ref="tableRef"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from "vue";
const tableRef = ref();
const tableData = ref([{ name: "张三" }, { name: "李四" }, { name: "王五" }]);
let selectedMember;
function onDialogSelectionChange(selection) {
    /// 若多选则把第一个选中的取消点击，会再次触发selection-change事件
  if (selection.length > 1) {
    let delRow = selection.shift();
    tableRef.value.toggleRowSelection(delRow, false);
  } else if (selection.length === 1) {
    /// 第二次触发把最新选中值赋给变量
    selectedMember = selection[0];
  }
}
</script>

<style lang="scss" scoped>
/* 隐藏全选按钮 */
:deep(.el-table) {
  width: 200px;
  .el-table__header-wrapper {
    .el-table__header {
      th {
        background-color: pink;
      }
      .el-checkbox {
        display: none;
      }
    }
  }
}
</style>