Table表格控件实现单选功能

Table表格控件实现单选功能

javascript 复制代码
	<el-table
		ref="tableRef"
		height="385"
		style="--el-table-border-color: none"
		row-key="contractId"
		highlight-current-row
		single-select
		@select="handleSelect"
		:data="contractInfo">
		<el-table-column type="selection" width="30" :selectable="isSelectable" />
		<el-table-column label="" prop="contractName" />
		<el-table-column label="" prop="contractProvider" width="120" />
		<el-table-column label="" prop="expirationTime" width="150" />
	</el-table>
javascript 复制代码
	/* 单选逻辑*/
	const handleSelect = (item: Array<SelectItem>) => {
		if (item.length > 1) {
			const del_row = item.shift()
			tableRef.value.toggleRowSelection(del_row, false) //设置单选逻辑
		}
	}

实现效果:

相关推荐
Liangwei Lin几秒前
LeetCode 155. 最小栈
java·javascript·算法
前端若水2 分钟前
实战:纯 CSS 实现“有图片的卡片不同样式”
前端·css
代码的小搬运工37 分钟前
UITableView
开发语言·ui·ios·objective-c
爱喝水的鱼丶1 小时前
SAP-ABAP:SAP 与 ABAP 关联逻辑与入门路径:业务×开发的协作指南
服务器·前端·数据库·学习·sap·abap
小陈的进阶之路1 小时前
Python系列课(2)——判断
java·前端·python
2301_815645381 小时前
html.
前端·html
qq_381338501 小时前
CSS @layer 级联层实战指南:从样式冲突到分层架构
前端·css
广州华水科技1 小时前
深度测评2026年好用的单北斗GNSS变形监测系统推荐,提升GNSS位移监测精度,引领智能监控新风尚
前端
花归去2 小时前
vue3中 function getText(){} 、 const getText=()=>{} ;区别在哪里,优缺点
javascript·vue.js·ecmascript