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

实现效果:

相关推荐
爱泡脚的鸡腿几秒前
Web第二次笔记
前端·javascript
良辰未晚几秒前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀5 分钟前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript
P7Dreamer6 分钟前
Vue 3 + Element Plus 实现可定制的动态表格列配置组件
前端·vue.js
洋流6 分钟前
0基础进大厂,第12天:ES6语法基础篇
javascript
I'm写代码8 分钟前
el-tree树形结构笔记
javascript·vue.js·笔记
万少9 分钟前
最新 HarmonyOS API 20 知识库 重磅推出
前端
蓝易云16 分钟前
CentOS 7上安装X virtual framebuffer (Xvfb) 的步骤以及如何解决无X服务器的问题
前端·后端·centos
到底起什么网名才能不重名17 分钟前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
然我17 分钟前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试