element plus table表格复选框实现单选效果

SunnyRun！

已于 2024-11-24 15:17:33 修改

阅读量3.9k

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 elementui vue

于 2023-07-12 11:14:20 首次发布

本文链接：https://blog.csdn.net/weixin_43624724/article/details/131676701

本文介绍如何在Element Plus的Table组件中将默认的复选框多选功能改为单选模式。通过监听选择事件并限制只能选择一项的方式，实现了简洁的单选功能。

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

《前端开发面试题进阶秘籍》：前端登顶-前端知识点梳理

框架vue3 + vite4.4.2 + element plus；需求背景：数据列表展示内容-复选框支持单选；我们都知道element的table ui组件type = selection，是一个复选框多选的状态，要支持单选有多种方式选择，而我们的项目对列表组件进行了二次封装，不在是模版标签的书写；方案：1. 模版标签式的写法，添加Radio单选标签进行渲染单元格，通过数据层唯一字段控制；2. 控制原有的复选框让其变更成单选，不增加多余逻辑代码和循环。这里我们使用的是方案2，简单便捷

element plus table列表复选框支持单选操作视频

方案2实现过程：

// TableList是封装的组件-在trap-ui内，这块大家可以替换成element plus的table标签，实现逻辑js通用
<template>
	<TableList
      size="small"
      ref="multipleTableRefs"
      :is-footer-extend="false"
      :httpRequest="httpRequest"
      :columns="[]"
      @select="handleSelectClick"
      @selection-change="handleSelectionChange"
    />
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'

const multipleTableRefs = ref(null)

const selectionChecked = ref<string[]>([])

// 获取选中当前行数据
const handleSelectionChange = (checked) => {
  selectionChecked.value = checked
}

// 复选框点击触发动作，长度大于1，我们进行取前一个元素，并设置前一个元素的选中状态，那么当前的元素就是可选的一个状态了
const handleSelectClick = (selection) => {
  if (selection.length > 1) {
    const del_row = selection.shift()
    // toggleRowSelection属性的第二个元素接受的是一个选中状态的布尔值，false不选中，true选中；
   // 注意直接使用element的table没有.element；multipleTableRefs.value.toggleRowSelection(del_row, false)
    multipleTableRefs.value.element.toggleRowSelection(del_row, false)
  }
}
</script>

// 通过隐藏表头复选框，进行样式覆盖
<style lang="scss" scoped>
:deep(.el-table__header-wrapper .el-table__header .el-checkbox) {
  display: none;
}
</style>