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);
};
相关推荐
Bug-制造者11 分钟前
【Vue3 实战】全局错误处理体系搭建:实现业务与错误彻底解耦
前端·javascript·vue.js
悟空瞎说14 分钟前
# Git 交互式变基:优雅整理提交历史,告别杂乱 PR 记录
前端·git
竹林81824 分钟前
从ethers.js迁移到Viem:我在DeFi Dashboard项目中踩过的坑与最终方案
javascript
还有多久拿退休金27 分钟前
DragSortTable:一个让我怀疑人生的滚动重置 Bug
前端
zithern_juejin29 分钟前
ES6——Promise
javascript
渐儿30 分钟前
组件库开发入门到生产(从零封装到 npm 发布)
前端
KaMeidebaby1 小时前
卡梅德生物技术快报|单 B 细胞抗体制备:流程优化、表达系统适配与性能数据
前端·数据库·其他·百度·新浪微博
桜吹雪1 小时前
所有智能体架构(1):反思 (Reflection)
javascript·人工智能
lichenyang4531 小时前
从鸿蒙 AI 聊天 Demo 学习 ArkUI V2:第一天上手记录
前端
进击的松鼠1 小时前
OpenClaw 的五层架构设计与解析
前端·架构·agent