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

目录

需求背景：

具体实现：

模板代码：

函数处理代码：

代码讲解：

---

需求背景：

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

具体实现：

模板代码：

函数处理代码：

代码讲解：

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