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);
};
相关推荐
枫,为落叶9 分钟前
Axios使用教程(一)
前端
小章鱼学前端14 分钟前
2025 年最新 Fabric.js 实战:一个完整可上线的图片选区标注组件(含全部源码).
前端·vue.js
ohyeah16 分钟前
JavaScript 词法作用域、作用域链与闭包:从代码看机制
前端·javascript
流星稍逝17 分钟前
手搓一个简简单单进度条
前端
uup22 分钟前
JavaScript 中 this 指向问题
javascript
涔溪25 分钟前
实现将 Vue3 项目作为子应用,通过无界(Wujie)微前端框架接入到 Vue2 主应用中(Vue2 为主应用,Vue3 为子应用)
vue.js·前端框架·wujie
倚栏听风雨40 分钟前
详解 TypeScript 中,async 和 await
前端
小皮虾1 小时前
告别服务器!小程序纯前端“图片转 PDF”工具,隐私安全又高效
前端·javascript·微信小程序
ohyeah1 小时前
我的变量去哪了?JS 作用域入门指南
前端·javascript
灼华_1 小时前
Vue 3 + Vite + Router + Pinia + Element Plus + Monorepo + qiankun 构建企业级中后台前端框架
前端