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

实现效果:

相关推荐
前端开发爱好者几秒前
VSCode 重磅更新!要收费了?
前端·javascript·visual studio code
烛阴1 分钟前
C# 正则表达式(4):分支与回溯引用
前端·正则表达式·c#
wuhen_n37 分钟前
LeetCode -- 1:两数之和(简单)
javascript·算法·leetcode·职场和发展
曹牧1 小时前
Java:Assert.isTrue()
java·前端·数据库
脾气有点小暴1 小时前
uniapp自定义头部导航
前端·uni-app
假装我不帅1 小时前
jquery.nicescroll使用
前端·javascript·jquery
安_1 小时前
js 数组splice跟slice
开发语言·前端·javascript
用泥种荷花2 小时前
【LangChain学习笔记】链式调用
前端
叫我阿柒啊2 小时前
从Java全栈到前端框架:一场真实的技术面试对话
java·vue.js·spring boot·微服务·typescript·前端开发·后端开发
yinuo2 小时前
IndexedDB 使用指南
前端