首页 前端知识 vue3实现el-table表格单选功能以及默认选中某一行数据以及多选

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

2024-05-13 10:05:41 前端知识 前端哥 96 834 我要收藏

要实现效果如下:

实现思路如下:

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相同的数据,默认选中那行数据

二、多选表格实现思路相似(要求弹窗表格回显以及分页切换数据依然存在,关闭弹窗清空多选

1.多选表格回显

2.多选表格分页切换

3.多选表格弹窗关闭

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8540.html
标签
评论
发布的文章

1、SpringBoot简介及返回json

2024-05-25 09:05:17

mysql 的jsonTable使用

2024-05-25 09:05:41

MySQL中的JSON

2024-05-25 09:05:32

JSON简介(1)

2024-05-25 09:05:22

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!