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了,效果实现了!!!有神马不懂的可以评论区或者私信我哦

相关推荐
紫幽15 小时前
从 0 用 Vue 做屏并生成 LVGL 单片机代码(完整源码备忘)
前端·单片机
郭邯15 小时前
用 AI 辅助开发一个文件大小转换工具:从需求到上线的完整过程
前端
勾勾圈圈蛋蛋15 小时前
前中台项目
前端
触底反弹15 小时前
🔐 前端鉴权不再难!手把手带你搞懂 JWT + Zustand + Axios 的完整登录方案
前端·axios
打呵欠的猫15 小时前
我用 AI 写了一个"需求翻译器",产品的 PRD 直接变成开发任务清单
前端·ai编程
fatcoder15 小时前
玩转Nginx 09 — 运维排障:三场"火灾"实战演练
前端·后端·nginx
前端玩坑坑15 小时前
View Transitions API 入门教程,优雅过度
前端
李高钢16 小时前
WPF MVVM Light(三):RelayCommand 命令与 Messenger 消息
前端·c#·wpf
lichenyang45316 小时前
Socket.IO 原理与技术选型
前端
qq210846295316 小时前
在python中什么是 self 和 cls?
开发语言·前端·python