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);
};
相关推荐
光影少年8 分钟前
react的hooks优缺点、底层实现及hooks参数
前端·react.js·前端框架
qq_124987075312 分钟前
基于SpringBoot+Vue的旅游信息咨询网站的设计与实现(源码+论文+部署+安装)
java·vue.js·spring boot·毕业设计·旅游·计算机毕设·计算机毕业设计
weixin_4569074120 分钟前
2026+:html+css 生态的成型之年与平台化跃迁
前端·css·html
上海合宙LuatOS22 分钟前
LuatOS框架的使用(2)
java·服务器·开发语言·前端·数据库·嵌入式硬件·php
江湖有缘33 分钟前
Docker部署NextTrace Web路由工具
前端·docker·容器
wljt1 小时前
游标分页原理
java·前端·数据库
KeroroLX1 小时前
uniapp项目中使用echarts
javascript·uni-app·echarts
weixin_456907411 小时前
【html+Tss 故障排查】链20230304 最详细解析之像素已拉取,容器仍起不来(含命令清单)
前端·html
Ulyanov1 小时前
基于Impress.js的3D概念地图设计与实现
开发语言·前端·javascript·3d·ecmascript
jiayong231 小时前
Vue 3 面试题 - TypeScript 与工程化
前端·vue.js·typescript