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

实现效果:

相关推荐
阿懂在掘金1 分钟前
早点下班(Vue2.7版):旧项目也能少写 40%+ 异步代码
前端·vue.js·开源
Mintopia2 分钟前
Web性能测试流程全解析:从概念到落地的完整指南
前端·性能优化·测试
用户57573033462419 分钟前
JavaScript 原型继承全解析:从 call/apply 到寄生组合式继承
javascript
Qinana24 分钟前
第一次用向量数据库!手搓《天龙八部》RAG助手,让AI真正“懂”你
前端·数据库·后端
忆江南24 分钟前
# Flutter Engine、Dart VM、Runner、iOS 进程与线程 —— 深度解析
前端
龙国浪子29 分钟前
从「选中一段」到「整章润色」:编辑器里的 AI 润色是怎么做出来的
前端·人工智能
一只叁木Meow33 分钟前
Skills:让通用 AI 秒变"领域专家"
vue.js·人工智能
小码哥_常36 分钟前
Android 开发秘籍:用Tint为Icon动态变色
前端
小码哥_常36 分钟前
从0到1手把手封装Android基类Activity/Fragment,告别重复代码,开发效率直接拉满!
前端
ChoriaKiinweill36 分钟前
不会有人现在还不了解BOM的知识吧? 关于它的一切都在这里!!!
前端