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);
};
相关推荐
消失的旧时光-19431 分钟前
数据驱动 vs 流程驱动:前端与 Flutter 的两种架构主线
前端·数据驱动·流程驱动·架构思想
2501_918126918 分钟前
国标麻将一抽胡
前端·学习·html·个人开发
m0_502724959 分钟前
CSS实现容器的宽度由内容决定
前端·css
dear_bi_MyOnly11 分钟前
用 Vibe Coding 打造 React 飞机大战游戏 —— 我的实践与学习心得
前端·react.js·游戏
TheNextByte111 分钟前
如何将 Safari 标签转移到新 iPhone 17?
前端·iphone·safari
m0_7482459212 分钟前
常见状态前缀
前端·css
用户904438163246013 分钟前
拒绝 `setInterval`!手撕“死了么”生命倒计时,带你看看 60FPS 下的 Web Worker 优雅多线程
前端·javascript
Irene199113 分钟前
在 Vue 3 项目中使用 Tailwind CSS
vue.js·tailwind css
ttod_qzstudio13 分钟前
CSS 样式优先级原则详解:从一个 Vue 组件样式冲突案例说起
前端·css·vue.js
59678515415 分钟前
css装饰
前端·css·css3