elementPlus表格组件el-table实现只能同时选择一行，全选按第一行处理

目录

需求背景：

具体实现：

模板代码：

函数处理代码：

代码讲解：

---

需求背景：

点击表格最左侧的复选框列，选中当前表格行，而且只允许选择一行，选中一行后，其他行自动禁用。若点击全选，则默认选择表格第一行。

具体实现：

模板代码：

        <el-table
          :data="allTest"
          style="width: 100%;"
          @selection-change="handleSelectionChange1"
        >
          <el-table-column type="selection" width="85" :selectable="handleSelectable" />
          <el-table-column property="topicName" label="测试试题" width="250" />
          <el-table-column property="sum" label="题目总数" width="250" />
        el-table>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取消el-button>
            <el-button type="primary" @click="SelectionTopic">
              确认
            el-button>
          span>
        template>

函数处理代码：

代码讲解：

• selectedRow 是一个用于记录选中的试题的引用。在 handleSelectionChange1 方法中，通过监听表格的选中事件，当选中的行发生变化时，将选中的第一行赋值给 selectedRow.value。
• handleSelectable 方法用于判断是否可以选中某一行。如果没有选中任何行，则所有行都可选，否则只有与当前选中行的 topicName 相同的行可选。（为了禁用其他行）
• SelectionTopic 方法是确认按钮的点击事件处理函数。在该方法中，首先判断 selectedRow.value 是否存在，即是否有选中的行。如果存在，则将选中的行数据赋值给 Selection1.value，并关闭对话框或表单（通过 dialogFormVisible1.value = false）。如果不存在选中的行，则弹出提示窗“请选择试题！”（通过使用 Element Plus 的 Message 组件）。