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);
};
相关推荐
Aliex_git4 分钟前
性能优化 - Vue 日常实践优化
前端·javascript·vue.js·笔记·学习·性能优化
董世昌418 分钟前
添加、删除、替换、插入元素的全方法指南
java·开发语言·前端
qq_3168377513 分钟前
Element-Plus el-table lazy 自动更新子列表
前端·vue.js·elementui
xiaoxue..15 分钟前
把大模型装进自己电脑:Ollama 本地部署大模型完全指南
javascript·面试·node.js·大模型·ollama
Mr.app32 分钟前
VUE:Ul列表内容自动向上滚动
vue.js
林恒smileZAZ33 分钟前
Electron 的西天取经
前端·javascript·electron
这就是佬们吗38 分钟前
告别 Node.js 版本冲突:NVM 安装与使用全攻略
java·linux·前端·windows·node.js·mac·web
IT_陈寒42 分钟前
2024年JavaScript开发者必备的10个ES13新特性实战指南
前端·人工智能·后端
Miketutu42 分钟前
Flutter - 布局
开发语言·javascript·ecmascript
满栀58544 分钟前
基于 jQuery 实现商品列表增删改查与数据统计
前端·javascript·jquery