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

实现效果:

相关推荐
飞天狗1114 分钟前
零基础JavaWeb入门——第4课:表单处理 —— 浏览器怎么把数据发给服务器
java·开发语言·前端·后端·servlet
Hooray23 分钟前
前端暗黑模式的适配艺术
前端·vue.js·视觉设计
恋猫de小郭23 分钟前
解析华为 DevEco Code 和小米 MiMo Code,都基于 OpenCode ,有什么区别?
android·前端·ios
IT_陈寒25 分钟前
Vue的响应式让我原地裂开,你们也有这情况吗
前端·人工智能·后端
想吃火锅100541 分钟前
【leetcode】20.有效的括号js
linux·javascript·leetcode
问心无愧051342 分钟前
ctfshow web入门114
android·前端·笔记
aaaa9547266542 分钟前
终端与IDE形态Vibe Coding实测:主流AI编程工具迁移与迭代对比
javascript·react.js·ecmascript
晓得迷路了1 小时前
栗子前端技术周刊第 133 期 - Angular v22、React 编译器 Rust 版、pnpm 11.5...
前端·javascript·css
一个被程序员耽误的厨师1 小时前
02-架构篇-前端怎么反客为主把AI编排权拿回到自己手里
前端·人工智能·架构
云浪1 小时前
别再让用户干等了:用 Express + SSE 实现《红楼梦》AI 问答实时输出
javascript·后端·node.js