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;
	}
}
相关推荐
马尔代夫哈哈哈22 分钟前
SpringBoot 统一功能处理
java·前端·spring boot
慧一居士41 分钟前
tsconfig.json完整使用配置介绍和示例
前端·vue.js
哆啦A梦15881 小时前
Vue3魔法手册 作者 张天禹 07_标签
前端·vue.js·typescript
似水流年QC1 小时前
前端性能优化实战:用 IntersectionObserver 实现图片懒加载
前端·性能优化
q1cheng1 小时前
基于Spring Boot + Vue项目online_learn的权限控制机制分析
前端
扶苏10021 小时前
深入理解 Vue 3 的 watch
前端·javascript·vue.js
前端 贾公子1 小时前
组件 v-model 的封装实现原理及 Input 组件的核心实现(上)
服务器·前端·javascript
老骥伏枥~1 小时前
基于Spring Boot + Vue.js的图书管理系统
vue.js·spring boot·后端
weixin199701080161 小时前
亚马逊商品详情页前端性能优化实战
前端·性能优化
全栈前端老曹1 小时前
【Redis】 监控与慢查询日志 —— slowlog、INFO 命令、RedisInsight 可视化监控
前端·数据库·redis·缓存·全栈·数据库监控·slowlog