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

实现效果:

相关推荐
竹林81827 分钟前
用 wagmi v2 + viem 监听链上事件,我踩了三天坑终于搞懂了实时日志与历史补全
javascript
Momo__31 分钟前
VueUse createReusableTemplate —— 单文件组件内的模板复用神器
前端·vue.js
只一35 分钟前
😭从回调地狱到 async/await:一文打通 Ajax 与 JS 异步编程
javascript
程序员小富38 分钟前
我开源了一个开发者专属的智能 JSON 工具,得到了媳妇高度认可
前端·vue.js·后端
小小小小宇38 分钟前
程序员如何给 LLM 装工具以及看懂推理过程
前端
写代码的皮筏艇38 分钟前
React中的forwardRef
前端·react.js·面试
槑有老呆1 小时前
花三个月工资请了个 AI 程序员,结果它连青岛啤酒股价都查不了
前端
风骏时光牛马1 小时前
Verilog开发常见问题汇总解析
前端
子兮曰1 小时前
AI Coding Method Map:一张图看懂 AI 编程的完整链路
前端·人工智能·后端