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

相关推荐
nnnnna12 小时前
props 、emits 、组件上的v-model(详细版)
前端·javascript
三年三月12 小时前
Tailwind CSS 入门介绍
前端
余生H13 小时前
前端技术新闻(WTN-1):React.js & Next.js 爆出 CVSS 10.0 级严重漏洞,历史风险回顾与代码级深度分析
前端·javascript·react.js
1024肥宅13 小时前
JavaScript 原生方法实现:数学与数字处理全解析
前端·javascript·ecmascript 6
烟袅13 小时前
深入理解 JavaScript 内存机制与闭包原理
前端·javascript
烟袅13 小时前
JavaScript 内存三空间协同机制:代码空间、栈空间与堆空间如何联合运行
前端·javascript
lqj_本人13 小时前
DevUI高频组件(Form 组件)深度用法与避坑指南
前端·javascript
live丶13 小时前
从零实现一个低代码 H5 页面编辑器(Vue3 + 拖拽)
前端·vue.js
码界奇点13 小时前
基于Django REST framework与Vue的前后端分离后台管理系统设计与实现
vue.js·后端·python·django·毕业设计·源代码管理
黑臂麒麟13 小时前
华为云 DevUI初体验:如何快速入门项目搭建
前端·ui·华为云·devui