当前位置：首页 > news >正文

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

news 2025/7/28 15:40:13

需求背景：

具体实现：

模板代码：

函数处理代码：

代码讲解：

需求背景：

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

具体实现：

模板代码：
        <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>
函数处理代码：
<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'interface Topic {topicName: stringsum: number
}const allTest: Topic[] = [{topicName: '抑郁程度测试A版',sum: 50,},{topicName: '抑郁程度测试B版',sum: 30,},{topicName: '抑郁程度测试C版',sum: 70,},{topicName: '心理健康测试A版',sum: 40,},{topicName: '心理健康测试B版',sum: 55,},
]// 记录选中的试题
const selectedRow = ref<Topic | null>(null)
// 最后确定的试题
const Selection1 = ref<Topic>()
// 监听表格变化
function handleSelectionChange1(val: Topic[]) {if (val.length > 0) {selectedRow.value = val[0]}else {selectedRow.value = null}
}
// 通过判断 selectedRow.value 是否为 null 或者与当前行的 topicName 相等来确定是否可以选中该行
function handleSelectable(row: Topic) {return selectedRow.value === null || selectedRow.value.topicName === row.topicName
}
function SelectionTopic() {// 判断 selectedRow.value 是否存在来确定是否有选中的行。如果存在我们将这个选中的行数据赋值给 Selection1.value，以便在其他地方可以使用该值if (selectedRow.value) {Selection1.value = selectedRow.valuedialogFormVisible1.value = false}else {ElMessage.warning('请选择试题！')}
}
</script>
代码讲解：

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