Debug-037-table列表勾选回显方案

效果展示:

图1

图2

最近实现一个支持勾选的el-table可以回显之前勾选项的功能。实现了一个"编辑"的功能:

在图1中的列表中有三行数据,当点击"更换设备"按钮时,打开抽屉显示el-table组件如图2所示,可以直接回显勾选上图1的上个对应的3行数据。

当我们重新勾选图2中的其他三行,做更新操作时,点击确认关闭弹窗,图1的列表数据会更新。再次打开抽屉,初始化会重新勾选3行新数据。

思路:主要是利用了elementUI-plus中el-table组件的一个方法:toggleRowSelection

row:表示列表中的某一行(注意是完整的一行数据,必须一致,不能错)

selected:true表示勾选 | false表示取消勾选

具体过程不在多说,这里只做记录,各位可以下去尝试一下即可。

补充:

对于图2中的被勾选上但是置灰的列表选项,是根据el-table中的另一个很有用的属性:

相关推荐
pe7er6 小时前
window管理开发环境篇 - 持续更新
前端·后端
We་ct7 小时前
LeetCode 5. 最长回文子串:DP + 中心扩展
前端·javascript·算法·leetcode·typescript
陈随易11 小时前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·后端·程序员
冰暮流星11 小时前
javascript之事件代理/事件委托
前端
陈随易12 小时前
AI时代,你还在坚持手搓文章吗
前端·后端·程序员
里欧跑得慢15 小时前
17. Flutter Hero动画实现:让界面过渡更加优雅
前端·css·flutter·web
IT_陈寒15 小时前
Vue的这个响应式陷阱,我debug了一整天才爬出来
前端·人工智能·后端
cn_mengbei15 小时前
用React Native开发OpenHarmony应用:Reanimated共享元素过渡
javascript·react native·react.js
kyriewen15 小时前
前端测试:别为了100%覆盖率而写测试,那是自欺欺人
前端·javascript·单元测试
去伪存真15 小时前
我自己写的第一个skills--project-core-standards
前端·agent