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);
};
相关推荐
摆烂工程师5 分钟前
教你如何查询 Codex 最新额度是多少,以及 ChatGPT Pro、Plus、Business 最新额度变化
前端·后端·ai编程
捧月华如8 分钟前
响应式设计原理与实践:适配多端设备的前端秘籍
前端·前端框架·json
笨笨狗吞噬者10 分钟前
VSCode 插件推荐 Copy Filename Pro,快速复制文件、目录和路径的首选
前端·visual studio code
web_小码农11 分钟前
CSS 3D动画 旋转木马示例(带弧度支持手动拖动)
javascript·css·3d
Armouy12 分钟前
Electron:核心概念、性能优化与兼容问题
前端·javascript·electron
F2E_Zhangmo15 分钟前
react native如何发送蓝牙命令
javascript·react native·react.js
博主花神18 分钟前
【TypeScript】梳理
javascript·ubuntu·typescript
淡笑沐白23 分钟前
ECharts入门指南:数据可视化实战
前端·javascript·echarts
魔卡少女124 分钟前
Nginx配置代码化自动部署詹金斯/Github方案
前端·nginx·github
开发者如是说27 分钟前
可能是最好用的多语言管理工具
android·前端·后端