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

实现效果:

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