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

相关推荐
杨超越luckly11 分钟前
HTML应用指南:利用GET请求获取全国中国建设银行网点位置信息
前端·arcgis·html·数据可视化·门店数据
王翼鹏13 分钟前
html 全角空格和半角空格
前端·html
敲代码的嘎仔14 分钟前
JavaWeb零基础学习Day2——JS & Vue
java·开发语言·前端·javascript·数据结构·学习·算法
CsharpDev-奶豆哥17 分钟前
jq获取html字符串中的图片逐个修改并覆盖原html的解决方案
前端·html
IT_陈寒40 分钟前
Python性能优化:用这5个鲜为人知的内置函数让你的代码提速50%
前端·人工智能·后端
简小瑞41 分钟前
VSCode源码解密:一行代码解决内存泄漏难题
前端·设计模式·visual studio code
邢行行42 分钟前
Node.js 核心模块与模块化笔记
前端
Asort42 分钟前
JavaScript设计模式(九)——装饰器模式 (Decorator)
前端·javascript·设计模式
Man43 分钟前
🔥 Vue3 动态 ref 黑科技:一招解决 v-for 中的组件引用难题!
前端·vue.js
叫我少年43 分钟前
Vue3 集成 VueRouter
vue.js