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);
};
相关推荐
Dovis(誓平步青云)3 分钟前
家里设备越来越多,如何用一张空间地图控制灯光和温度![
android·java·前端·javascript·人工智能·电脑
穆梓兰煊5 分钟前
TS5.7 vs 裸JS:AI应用少3坑
前端
榆瓷14 分钟前
闲着没事,我把 WebGPU 的样板代码封成了一个库
前端
1360967572321 分钟前
页面打不开不是 Nginx 的错
前端·后端
xieter22 分钟前
【技术精选】TypeScript 高级类型体操:条件类型与模板字面量深度剖析 (2026-10-06)
javascript
ss2731 小时前
AI全栈实战 | 3.3-02 Python 并发:有 GIL 为什么还用多线程,asyncio 和 JS 事件循环同源不同味
开发语言·javascript·python
liangshanbo12151 小时前
高级前端面试题:package.json 常见字段
前端·json
CappuccinoRose1 小时前
输入事件进阶
前端·javascript·输入事件
liangshanbo12153 小时前
面试题:前端工程化中 Tree Shaking的原理是什么?
前端·treeshaking
500843 小时前
React Native for OpenHarmony 实战:三方库 react-native-url-polyfill 的鸿蒙化适配指南
javascript·react native·react.js·性能优化·electron·harmonyos