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

实现效果:

相关推荐
得物技术2 分钟前
基于 Cursor Agent 的流水线 AI CR 实践|得物技术
前端·程序员·全栈
计算机学姐23 分钟前
基于SpringBoot的宠物店管理系统
java·vue.js·spring boot·后端·spring·java-ee·intellij-idea
188号安全攻城狮24 分钟前
【前端安全】Trusted Types 全维度技术指南:CSP 原生 DOM XSS 防御终极方案
前端·安全·网络安全·xss
墨渊君1 小时前
从 0 到 1:用 Node 打通 OpenClaw WebSocket 通信全流程
前端·openai·agent
布局呆星1 小时前
Vue3 —— 监听器 (watch/watchEffect) 与 Props 组件通信
vue.js·笔记·学习
橘子编程1 小时前
UniApp跨端开发终极指南
开发语言·vue.js·uni-app
Novlan11 小时前
一个油猴脚本,解决掘金编辑器「转存失败」的烦恼
前端
前端老石人1 小时前
HTML 入门指南:从规范视角建立正确知识体系
开发语言·前端·html
计算机学姐1 小时前
基于SpringBoot的高校餐饮档口管理系统
java·vue.js·spring boot·后端·spring·intellij-idea·mybatis