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

最新推荐文章于 2025-07-04 20:26:00 发布

turbo夏日漱石

最新推荐文章于 2025-07-04 20:26:00 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端项目过程中的问题 vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_62799214/article/details/133521764

前端同时被 3 个专栏收录

47 篇文章

订阅专栏

项目过程中的问题

33 篇文章

订阅专栏

vue

33 篇文章

订阅专栏

文章介绍了在Vue项目中，如何实现点击表格复选框时只允许选择一行，并在全选时默认选中第一行的功能，包括模板代码、函数处理和详细解释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求背景：

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

具体实现：

模板代码：

        <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: string
  sum: 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.value
    dialogFormVisible1.value = false
  }
  else {
    ElMessage.warning('请选择试题！')
  }
}
</script>

代码讲解：

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