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);
};
相关推荐
gogoing1 分钟前
Prettier 配置说明
前端·javascript
十有八七2 分钟前
Hermes Agent 自进化实现:从源码到架构的深度拆解
前端·人工智能
渐儿2 分钟前
NestJS 生产级开发教程
前端
前端毕业班3 分钟前
uni-app onShareAppMessage hook 原理分析
前端·javascript
gogoing4 分钟前
React 分包加载优化
前端·react.js
gogoing7 分钟前
Babel 配置与工具
前端·javascript
亲亲小宝宝鸭8 分钟前
重新install,项目就跑不起来了?!
前端·npm
Mike117.21 分钟前
GBase 8a 物化视图依赖和 DDL 风险排查记录
java·服务器·前端
蜡台37 分钟前
Vue3 Hook 与 Store 状态管理:深度解析与选型指南
前端·javascript·vue.js
存在的五月雨38 分钟前
项目中 Vitest 配置详解:vitest.config.ts
开发语言·javascript·vue.js