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

实现效果:

相关推荐
Jackson__12 小时前
Agent Skill 和 Rules 有什么区别?
前端·agent·ai编程
不要卷鸿蒙啊12 小时前
【鸿蒙开发】HMRouter一款和好用的管理路由三方工具
前端·harmonyos
李剑一12 小时前
数字孪生大屏必看:Cesium 3D 模型选中交互,3 种高亮效果拿来就用!
前端·vue.js·cesium
奶昔不会射手13 小时前
自定义vue3函数式弹窗
前端·javascript·css
new code Boy13 小时前
前端全栈之路
前端
牛奶13 小时前
为什么敲几个字母就能访问网站?DNS原理大揭秘
前端·http·dns
wuhen_n13 小时前
破冰——建立我们的AI开发实验环境
前端·javascript
HelloReader13 小时前
Flutter 自适应布局一套代码适配手机和平板(十二)
前端
牛奶14 小时前
HTTP裸奔,HTTPS穿盔甲——它们有什么区别?
前端·http·https
梓言14 小时前
tailwindcss构建执行npm exec tailwindcss init -p 报错
前端