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;
	}
}
相关推荐
LuckyLay17 分钟前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust
pobu16836 分钟前
aksk前端签名实现
java·前端·javascript
烛阴42 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw01 小时前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦1 小时前
VUE实现数字翻牌效果
前端·javascript·vue.js
南岸月明1 小时前
我与技术无缘,只想副业搞钱
前端
gzzeason2 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky2 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web
huihuihuanhuan.xin2 小时前
前端八股-promise
前端·javascript
星语卿2 小时前
浏览器重绘与重排
前端·浏览器