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);
};
相关推荐
林太白17 小时前
八大数据结构
前端·后端·算法
一 乐17 小时前
流浪动物救助|流浪猫狗救助|基于Springboot+vue的流浪猫狗救助平台设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设
火星数据-Tina17 小时前
Python + WebSocket 实现实时体育比分系统(含数据库设计与前端演示)
开发语言·前端
国思RDIF框架17 小时前
国思RDIF低代码快速开发框架 v6.2.2版本发布
前端·vue.js·后端
oil欧哟17 小时前
Agent 设计与上下文工程- 02 Workflow 设计模式(上)
前端·网络·人工智能
StarkCoder17 小时前
GetX 状态管理优化:从 GetBuilder 到 Obx 的性能提升实践
前端
小高00717 小时前
深入理解 package.json:前端项目的 "身份证"
前端·javascript·vue.js
StarkCoder17 小时前
Flutter ListView 数据变动导致的卡顿与跳动问题:Key 的妙用
前端
lichenyang45317 小时前
Next.js 学习笔记:从约定式路由到 Tailwind、Image、Font 优雅整合。
前端·javascript·全栈
杂鱼豆腐人17 小时前
【自用】CSS查漏补缺
前端·css