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);
};
相关推荐
雪芽蓝域zzs4 分钟前
新建前端pnpm(vue js ) 仿若依项目(一)
前端·javascript·vue.js
vipbic5 分钟前
网站升级了,我却有点舍不得
前端·vue.js·后端
IT_陈寒5 分钟前
Java Stream并行处理让我数据库崩了两次
前端·人工智能·后端
恋猫de小郭5 分钟前
Flutter 3.47 首坑,analysis_options 问题连环回归
android·前端·flutter
kaixin_learn_qt_ing23 分钟前
Electron程序---初体验
javascript·electron
星夜夏空9925 分钟前
网络编程(5)—— Reactor实现(v1)
服务器·javascript·网络
YWL26 分钟前
OpenLayers测距测面:完整测量工具
前端·javascript·vue.js·信息可视化·openlayers
zhanghaha131435 分钟前
HTML系列教程:2_HTML 编辑器(零基础超详细讲解
前端·编辑器·html
半旧51839 分钟前
【Java Web02】WEB服务器内部实现技术揭秘
java·服务器·前端
拿本唠嗑AI研究1 小时前
现代前端架构爬虫指南:从静态页面到 React/Vue 单页应用
前端·爬虫·架构