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);
};
相关推荐
yqcoder5 小时前
CSS 迷思破解:`:nth-child` vs `:nth-of-type`
前端·css
时寒的笔记5 小时前
某陆飞11期_webpack案例
前端·webpack·node.js
漫游的渔夫5 小时前
前端开发者做多步 Agent:别让 AI 边想边乱跑,用 Plan-Act-Observe 稳住 4 步任务
前端·人工智能·typescript
武帝为此5 小时前
【Selenium 执行 JavaScript】
javascript·selenium·测试工具
一锤捌拾5 小时前
V8引擎精品漫游指南--Ignition篇(下 一) 动态执行前的事情
前端·javascript
遇见~未来5 小时前
第六篇_CSS进阶_深入浏览器与工程化
前端·css·rust
Cache技术分享5 小时前
397. Java 文件操作基础 - 创建常规文件与临时文件
前端·后端
Daybreak5 小时前
Vercel Serverless 调国内 AI 接口 504?Edge Runtime 救了我
前端
Elastic 中国社区官方博客5 小时前
用于 JavaScript 和 TypeScript 的 ES|QL 查询构建器:流式、类型安全的查询构建
大数据·javascript·数据库·elasticsearch·搜索引擎·typescript·全文检索
zubylon5 小时前
Ollama 本地起一个开发助手
前端·人工智能