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);
};
相关推荐
徐小夕10 分钟前
花了2个月时间研究了市面上的4款开源表格组件,崩溃了,决定自己写一款
前端·javascript·react.js
by————组态32 分钟前
低代码 Web 组态
前端·人工智能·物联网·低代码·数学建模·组态
拉不动的猪36 分钟前
UniApp金融理财产品项目简单介绍
前端·javascript·面试
菜冬眠。40 分钟前
uni-app/微信小程序接入腾讯位置服务地图选点插件
前端·微信小程序·uni-app
jayson.h40 分钟前
pdf解密程序
java·前端·pdf
萌萌哒草头将军41 分钟前
😡😡😡早知道有这两个 VueRouter 增强插件,我还加什么班!🚀🚀🚀
前端·vue.js·vue-router
苏卫苏卫苏卫1 小时前
【Vue】案例——To do list:
开发语言·前端·javascript·vue.js·笔记·list
0509151 小时前
测试基础笔记第四天(html)
前端·笔记·html
聪明的墨菲特i2 小时前
React与Vue:哪个框架更适合入门?
开发语言·前端·javascript·vue.js·react.js
时光少年2 小时前
Android 副屏录制方案
android·前端