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

实现效果:

相关推荐
遇见你...7 小时前
TypeScript
前端·javascript·typescript
Highcharts.js7 小时前
Highcharts Grid 中文站正式上线:表格数据处理的全新选择
前端·javascript·数据库·表格数据·highcharts·可视化图表·企业级图表
阿正的梦工坊10 小时前
JavaScript 微任务与宏任务完全指南
开发语言·javascript·ecmascript
懂懂tty10 小时前
CRA 迁移 Rspack(实战)
前端·架构
nashane11 小时前
HarmonyOS 6学习:解决异步场景下Toast提示框无法弹出的UI上下文丢失问题
学习·ui·harmonyos·harmony app
小码哥_常12 小时前
Kotlin 助力 Android 启动“大提速”
前端
GreenTea12 小时前
AI 时代,工程师的不可替代性在哪里
前端·人工智能·后端
Jagger_12 小时前
能不能别再弄低代码害人了
前端
朦胧之12 小时前
AI 编程开发思维
前端·后端·ai编程
踩着两条虫13 小时前
VTJ:快速开始
前端·低代码·架构