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

实现效果:

相关推荐
前端 贾公子5 分钟前
React 和 Vue 都离不开的表单验证库 async-validator 之策略模式的应用 (中)
前端
郑州光合科技余经理5 分钟前
从零到一:构建UberEats式海外版外卖系统
java·开发语言·前端·javascript·架构·uni-app·php
2301_796512529 分钟前
【精通篇】打造React Native鸿蒙跨平台开发高级复合组件库开发系列:点击组件(跳转快应用)
javascript·react native·react.js·ecmascript·harmonyos
强子感冒了12 分钟前
JavaWeb学习笔记:动静态Web、URL、HTTP
前端·笔记·学习
RunsenLIu14 分钟前
基于 Spring Boot 3 与 Vue 3 的家校互动平台
vue.js·spring boot·后端
前端 贾公子16 分钟前
React 和 Vue 都离不开的表单验证库 async-validator 之策略模式的应用 (上)
vue.js·react.js·策略模式
阿珊和她的猫17 分钟前
Session 与 Cookie 的对比:原理、使用场景与最佳实践
前端·javascript·vue.js
杜子不疼.18 分钟前
SpringBoot + Vue 前后端分离项目实战:权限 + 工作流 + 报表
vue.js·spring boot·后端
Fantasy丶夜雨笙歌22 分钟前
Web 服务基石 Nginx
运维·前端·nginx