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

实现效果:

相关推荐
WangJunXiang612 小时前
Haproxy搭建Web群集
前端
吴声子夜歌13 小时前
Vue.js——自定义指令
前端·vue.js·flutter
小芝麻咿呀13 小时前
vue--面试题第一部分
前端·javascript·vue.js
nibabaoo13 小时前
前端开发攻略---H5页面手机获取摄像头权限回显出画面并且同步到PC页面
javascript·websocket·实时音视频·实时同步·录制
早起傻一天~G13 小时前
vue2+element-UI表格封装
javascript·vue.js·ui
这儿有一堆花14 小时前
深入解析 Video.js:现代 Web 视频播放的工程实践
前端·javascript·音视频
烤麻辣烫14 小时前
JS基础
开发语言·前端·javascript·学习
IT_陈寒15 小时前
Vue的响应式把我坑惨了,原来问题出在这
前端·人工智能·后端
2603_9535279915 小时前
WordPress Finale Lite 插件高危漏洞检测与利用工具 (CVE-2024-30485)
前端·python·安全·web3·xss