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);
};
相关推荐
希赛网3 分钟前
网工面试:常问技术问题汇总(3)
服务器·前端·网络·网络工程师·ospf·网工面试·技术面
WYiQIU3 分钟前
普及一下字节前端岗需要达到的强度......
前端·javascript·vue.js·面试·职场和发展
切糕师学AI11 分钟前
Win11 如何彻底阻止 Edge 后台运行
前端·edge
小阿鑫16 分钟前
32岁程序员猝死背后,我的一些真实感受
前端·后端·程序员·代码人生
qq_124987075316 分钟前
基于Spring Boot的桶装水配送管理系统的设计与实现(源码+论文+部署+安装)
java·前端·spring boot·后端·spring·毕业设计·计算机毕业设计
Leweslyh18 分钟前
【实战】如何在家定位国际空间站 (ISS)? —— 坐标转换的魔法 (例题 5.9)
开发语言·javascript·ecmascript
帆张芳显20 分钟前
智表zcell产品V3.5 版发布,新增行列选中操作等功能
前端·javascript·excel·插件·canva可画
程序员小寒22 分钟前
前端性能优化之首屏时间采集篇
前端·性能优化
GGGG寄了24 分钟前
HTML——div和span标签和字符实体
前端·html
这儿有一堆花33 分钟前
网页开发的基石:深入解析 HTML 与 PHP 的本质差异
前端·html·php