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) //设置单选逻辑
		}
	}

实现效果:

相关推荐
默默学前端19 分钟前
JavaScript 中 call、apply、bind 的区别
开发语言·前端·javascript
宁雨桥23 分钟前
前端设计模式面试题大全
前端·设计模式
Cg1362691597426 分钟前
JS函数表示
前端·html
℘团子এ26 分钟前
vue3中,el-table表格固定列后出现表格线段折断的问题
javascript·vue.js·elementui
在屏幕前出油31 分钟前
02. FastAPI——路由
服务器·前端·后端·python·pycharm·fastapi
勿芮介1 小时前
【大模型应用】在window/linux上卸载OpenClaw
java·服务器·前端
摸鱼仙人~1 小时前
前端面试手写核心 Cheat Sheet(终极精简版)
前端
馬致远1 小时前
Win7 配置 Vue脚手架
javascript·vue.js·ecmascript
Ashley_Amanda1 小时前
深入浅出Web Dynpro:SAP企业级Web应用开发全面解析
前端