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

实现效果:

相关推荐
跟着珅聪学java37 分钟前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
吞掉星星的鲸鱼40 分钟前
使用高德api实现天气查询
前端·javascript·css
lilye6643 分钟前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
....49244 分钟前
Vue3 + Element Plus + AntV X6 实现拖拽树组件
javascript·vue.js·elementui·antvx6
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼3 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_3 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo4 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)5 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之6 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue