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);
};
相关推荐
涛涛ing11 分钟前
2026 上半年,前端圈已经炸了五次
前端
hunterandroid16 分钟前
Android 后台任务可靠性排查:从 WorkManager 观测到失败重试闭环
android·前端
skiyee16 分钟前
🔥 oiyo & unibest = 又新又好的 uniapp 模板
前端·uni-app
xingren20 分钟前
「眨眼」UI 特效 - 在 Winform/WPF/WinUI3/Avalonia/Web 的实现
前端
观察员22 分钟前
Vue3 猜字游戏前端实战:从零搭建聊天交互界面
vue.js
颜进强24 分钟前
前端看后端 13:什么是 Cookie 和 Session?
前端·后端
月月大王的3D日记26 分钟前
Three.js 入门系列(7):让甜甜圈围着我转 —— 3D文字生成
前端·javascript
gitboyzcf28 分钟前
mpegts.js解决Chrome无法播放7568×142分辨率报错 DOMException问题
前端·后端
yio_yin42 分钟前
MyBatis
java·前端·mybatis
棒棒的唐1 小时前
非常棒的向量数据库chroma的前端管理工具及向量模型配置
前端