vue3实现el-table表格单选功能以及默认选中某一行数据

要实现效果如下:

实现思路如下:

1.使用elemplent-plus组件的el-table组件实现。
2.使用select方法和select-all方法进行数据绑定方法。
3.使用toggleRowSelection方法进行校验数据默认选中以及切换某一行的状态。(详细见Table 表格 | Element Plus (element-plus.org))

具体代码截图如下:

1.el-table组件
2.select方法和select-all方法
3.点击编辑按钮找到某个id相同的数据,默认选中那行数据

这样就ok了,效果实现了!!!有神马不懂的可以评论区或者私信我哦

相关推荐
小蒜学长11 分钟前
基于SpingBoot+Vue的定向越野赛事管理系统的设计与开发(代码+数据库+LW)
java·前端·spring boot·后端·前后端分离·定向越野赛事
nyaomaru12 分钟前
is-kit 达成 100 Stars ⭐🎉 从 50 到 100,发生了什么?
前端·typescript
陈随易34 分钟前
副业搞钱点子之 Umami 统计如何赚钱
前端·后端·程序员
美狐美颜sdk1 小时前
直播APP开发中的视频帧处理:美颜SDK接入需要注意哪些细节?
大数据·前端·人工智能·音视频·美颜sdk
随风一样自由1 小时前
【React+TS71007】Next.js “use client” 误用导致 TS71007:客户端/服务端引入问题的完整排查与修复
前端·javascript·react.js
计算机魔术师2 小时前
1.4万亿没人接,OpenAI自己把价砍了1500亿
前端
非凡ghost2 小时前
Photo Supreme:专业高效的照片收藏管理专家
服务器·前端·人工智能·电脑·软件需求
zhangminghuan2 小时前
前端动态路由实现方案(Vue3 + VueRouter4)|后台权限路由实战
前端
一切皆是因缘际会2 小时前
大模型应用
前端·人工智能
SCandL1522 小时前
【无标题】
前端