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);
};
相关推荐
taocarts_bidfans几秒前
Taoify 站点访问地区限制与 IP 管控配置
前端·javascript·tcp/ip·taoify
狂师5 分钟前
用自然语言控制手机,一条命令让 AI 帮你操作 Android 和 iOS 设备!
前端·开源·测试
Csvn14 分钟前
# 🎨 CSS Container Queries 实战踩坑——从「响应式」到「容器式」
前端
zhangjw3415 分钟前
第36篇:Spring Boot进阶:Web开发+参数校验+全局异常处理
前端·spring boot·后端
老王以为16 分钟前
解剖 Claude Code:逆向工程视角下的入口架构分析
前端·ai编程·claude
Csvn21 分钟前
💰 JavaScript 浮点数精度问题深度剖析——前端金额计算的「定时炸弹」
前端
今日无bug27 分钟前
深入理解 JavaScript 变量提升(Hoisting)
javascript·面试
Csvn32 分钟前
structuredClone:原生深拷贝 API 的正确打开方式
前端
大猫会长36 分钟前
获取favicon.ico的方法
前端·javascript·html
无人生还37 分钟前
从 Vue3 到 React · 快速上手系列第 5 篇:事件处理与表单(受控组件 vs v-model)
前端·vue.js·react.js