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

实现效果:

相关推荐
嘻嘻嘻嘻嘻嘻ys8 分钟前
《Spring Boot 3 + GraalVM原生镜像实战:云原生时代的毫秒启动与性能调优》
前端·后端
嘻嘻嘻嘻嘻嘻ys11 分钟前
《Spring Boot 3.0×GraalVM:云原生时代的毫秒级启动实战革命》
前端·后端
嘻嘻嘻嘻嘻嘻ys13 分钟前
《Vue 3.4响应式内核优化与WebAssembly性能突破实战指南》
前端·后端
海天胜景15 分钟前
vue3 el-table 右击
javascript·vue.js·elementui
Mercury-circle17 分钟前
JavaScript基础知识合集笔记1——数据类型
开发语言·javascript·笔记
一天睡25小时28 分钟前
前端性能优化面试回答技巧(一)
前端·面试
樊小肆28 分钟前
Vue3 在线 PDF 编辑 2.0 缩放拖拽、渲染优化功能解析
前端·vue.js·开源
程序员韩立28 分钟前
精通 React Hooks:从核心技巧到自定义实践
前端
WEI_Gaot29 分钟前
React Hooks useRef useId
前端·react.js
一天睡25小时30 分钟前
视频HLS分片与关键帧优化深度解析
前端·javascript