Element UI 表格组件复选框实现单选效果

需求:el-table表格复选框限制只能选中一条。
具体代码实现如下:
javascript 复制代码
<template>
    <el-table ref="tableRef" :data="tableData" border @selection-change="handleSelectionChange" header-cell-class-name="headerCellClass">
        <el-table-column  type="selection" width="55"></el-table-column>
        <el-table-column prop="date" label="Date" width="180" />
    	<el-table-column prop="name" label="Name" width="180" />
    </el-table>
</template>

<script setup>
let selectData = ref([]);
const tableRef = ref({});
const handleSelectionChange = (select) => {
	if(select.length > 1) {
	    // 清除所有勾选框
		tableRef.value.clearSelection();
		selectData.value = select.pop();
		// 勾选当前选中的数据
		tableRef.value.toggleRowSelection(selectData.value, true)
	}
}
</script>
去掉表头全选勾选框

给el-table绑定类名:header-cell-class-name="headerCellClass"

javascript 复制代码
:deep(.headerCellClass){
	.el-checkbox{
		display: none;
	}
}
相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理6 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing6 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止6 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall7 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴7 小时前
简单入门Python装饰器
前端·python