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

实现效果:

相关推荐
张可爱14 小时前
20251015-Vue3八股文整理
前端
ruanCat14 小时前
记一次因 vue-router 升级而导致的 uniapp 故障
前端·vue.js
Damon小智14 小时前
基于 Rokid JSAR 打造精致的 3D 白色飞机模型
前端·虚拟现实
Mintopia14 小时前
🌌 知识图谱与 AIGC 融合:
前端·javascript·aigc
三十_14 小时前
TypeORM 基础篇:项目初始化与增删改查全流程
前端·后端
秋子aria14 小时前
作用域详解 立即执行函数详解
javascript
小时前端14 小时前
事件委托性能真相:90%内存节省背后的数据实证
前端·dom
半木的不二家14 小时前
全栈框架Elpis实战项目-里程碑一
前端
fox_14 小时前
写多参数函数总重复传值?用柯里化3步搞定参数复用与延迟执行
javascript