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);
};
相关推荐
IT_陈寒4 小时前
SpringBoot自动配置差点让我加班到凌晨
前端·人工智能·后端
guslegend5 小时前
脚手架原理与本地调试:从 bin 软链接到 npm link
前端·npm·node.js·脚手架·前端工程化
小宋10216 小时前
A2UI从零实战:Agent安全生成交互界面与事件回传
javascript·人工智能·安全·交互
大包子6 小时前
structuredClone vs lodash.cloneDeep:核心差异与选型指南
javascript·vue.js
海码事务所6 小时前
Google Play 新个人开发者账号上架指南:12 人连续 14 天封闭测试怎么做?
前端
田威AI6 小时前
图片内文字翻译的规格:输入输出、保真、自动化、时间与费用
前端·计算机视觉
不可能片场6 小时前
命令行中文变问号 我用环境变量救了场
前端·electron
lerhxx6 小时前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
骑着蜗牛撵大象3276 小时前
多 Agent 分治协作:MapReduce 模式下的并行扇出与结果归并
前端
用户55318297327 小时前
Flutter iOS 热更新深入 Dart VM:读懂函数入口、解释执行与调用桥接
前端