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);
};
相关推荐
书中枫叶2 分钟前
生活缴费充值系统
前端·javascript·经验分享·mongodb·node.js
weixin_461769404 分钟前
npm 修改镜像源依赖下载缓慢运行报错日志解决
前端·npm·node.js
Soari5 分钟前
Hermes-webui:面向 Hermes Agent 的自托管 Web 控制台
前端·webui·agent ai·自托管ai
一个博客1 小时前
pdf-viewer 实现预览pdf文件
开发语言·javascript·pdf
2501_912784081 小时前
跨境电商独立站的多语言架构设计:基于 Laravel + Vue.js 的实践
vue.js·php·laravel·跨境电商·taocarts
wuxia21189 小时前
微信小程序单击元素切换元素的显示和隐藏
javascript·微信小程序·setdata
JustHappy9 小时前
古法编程秘籍(二):什么是代码模块化?别背概念,把房间收拾明白就够了
前端·后端
小江的记录本9 小时前
【JVM虚拟机】堆内存分代模型:年轻代(Eden+Survivor)、老年代、元空间Metaspace(附《思维导图》+《面试高频考点清单》)
java·前端·jvm·后端·python·spring·面试
weixin_4713830310 小时前
图片预解码缓存
前端·浏览器缓存·图片预解码
一起学开源10 小时前
一文读懂 ReAct 范式:让 AI Agent 真正学会“思考+行动“
java·javascript·react.js·ecmascript·react·alibaba·智能体开发