vue3之el-table单选

el-table文档中没有表格数据单选,因此基于复选框实现数据单选限制。

主要实现代码

bash 复制代码
<el-table :data="tableList" ref="tableRef" @select="selectClick">
	...
</table>

// method
const selectClick = (selection) => {
  let selectRow = {};
  if (selection.length > 1) {
    let del_row = selection.shift(); // 删除选中的第一项
    tableRef.value.toggleRowSelection(del_row, false); //并改变table勾选状态
  }

  // 到这selection数据始终为1条
  if (selection.length) {
    selectRow = selection[0];
  }
  emit("getRow", selectRow);
};
相关推荐
LEE14 分钟前
为什么你的 Claude Code 还在转圈等,别人的已经干完三件事了?
前端·后端·ai编程
java1234_小锋25 分钟前
【技术专题】HTML5 网页技术 - HTML5 SVG
前端·html·html5
飞飞鱼在摸鱼25 分钟前
前端转Agent开发 | JavaScript 从 0 到 1 完全指南
前端·javascript
开开心心就好38 分钟前
课堂随机点名工具,绿色版免安装双击即用
java·服务器·前端·ffmpeg·音视频·perl·symfony
不像程序员的程序媛39 分钟前
springboot支持的web容器
前端·spring boot·后端
xiaobaoyu42 分钟前
目录合集
前端
han_hanker43 分钟前
前端转后端入门实践日志2-nacos
前端
Suprman1 小时前
从 B/S 到 Electron:平面排版套料系统桌面版开发实战
javascript·平面·electron·排序算法
u0111026751 小时前
Vue 3 统一右侧编辑面板:布局、滚动与底部操作区设计
javascript·vue.js·ecmascript
change_fate1 小时前
Vue 3 Composable 函数指南
前端·javascript·vue.js