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);
};
相关推荐
西陵14 分钟前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常15 分钟前
vue中添加原生右键菜单
javascript·vue.js
小磊哥er25 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生30 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮35 分钟前
webpack基础
前端·webpack
YongGit1 小时前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士2 小时前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学