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);
};
相关推荐
雪芽蓝域zzs11 分钟前
Element‑Plus icon 图标名称查询 & 和菜单 meta.icon 字段映射
前端
01_ice1 小时前
前端学习css
前端·css·学习
愚公搬代码1 小时前
【愚公系列】《Web应用安全》010-Repeater模块的使用
前端·安全
Cache技术分享2 小时前
503. Java 反射 - 编写 ServiceFactory 类
前端·后端
赵大仁2 小时前
AI 限流 UX 设计:排队、降级、告知与用户预期管理
前端·ai·限流·用户体验·产品设计
__sjfzllv___2 小时前
在职前端Leader学习/转行 AI Agent -DAY37
前端
用户2181697049302 小时前
Flutter (二十二) GlobalKey
前端
用户2181697049302 小时前
Flutter (二十一) 下拉刷新,加载更多
前端
光影少年3 小时前
react navite 内存泄漏:定时器、监听事件、订阅销毁
前端·javascript·react native·react.js·前端框架
breeze jiang3 小时前
Next.js 16 App Router 实战:从 About、Blog 动态路由到全局 404
开发语言·javascript·ecmascript