当前位置: 首页 > news >正文

【vue】elemente-ui table toggleRowSelection 默认选择无效[已解决]

项目场景:

点击按钮,弹出一个弹出框,内部出现一个table表,表内数据是动态获取,同时得勾选上几个table表的数据,类似以下的图
在这里插入图片描述

问题描述

点击按钮显示弹出框,加载table中的数据,默认选择table表数据失效

//template
<el-dialog :visible.sync="openDialog"><el-table ref="multipleTableRef" :data="aaa"><el-table-column type="selection" width="55" align="center" /><el-table-column label="aa" align="center" prop="aa"/></el-table>
</el-dialog>
//methods
handleShowWechatList(){....requestxxxx().then(res=>{this.aaa=res;//table表的数据//this.bbb是table表中被默认选中的数据if(this.bbb.length>0){this.bbb.map(row=>{this.$refs.multipleTableRef.toggleRowSelection(row);})}this.openDialog=true;//显示弹出框})
....
},

原因分析:

原因一: table表数据aa 没有渲染完就调用toggleRowSelection方法

原因二: 使用this.$refs.multipleTableRef.toggleRowSelection选中数据源和table数据源不一样

原因三: 因为是弹出框,需要等弹出框渲染成功后才能进行在进行toggleRowSelection选中操作


解决方案:

提示:使用$nextTick()延迟执行toggleRowSelection方法,同时toggleRowSelection方法中的参数得跟table表的数据源一样

//template
<el-dialog :visible.sync="openDialog"><el-table ref="multipleTableRef" :data="aaa"><el-table-column type="selection" width="55" align="center" /><el-table-column label="aa" align="center" prop="aa"/></el-table>
</el-dialog>//methods
handleShowWechatList(){
....requestxxxx().then(res=>{this.aa=res;//table表中的数据this.openDialog=true;//显示弹出框//this.bbb是table表中被默认选中的数据// 渲染和被渲染的数据源得相同if(this.bb.length>0){for(let i in this.aa){for(let q in this.bb){if(this.bb[q]["id"] == this.aa[i]["id"]){//等dom渲染完成,延迟执行nextTick内部函数this.$nextTick(()=>{this.$refs.multipleTableRef.toggleRowSelection(this.aa[i]);})break;}}}}})
....
},

踩坑不易,还希望各位大佬支持一下\textcolor{gray}{踩坑不易,还希望各位大佬支持一下}踩坑不易,还希望各位大佬支持一下

📃 个人主页:\textcolor{green}{个人主页:}个人主页: 沉默小管

📃 个人网站:\textcolor{green}{个人网站:}个人网站: 沉默小管

📃 个人导航网站:\textcolor{green}{个人导航网站:}个人导航网站: 沉默小管导航网

🔥 技术交流QQ群:837051545\textcolor{green}{技术交流QQ群:837051545}技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教

http://www.lryc.cn/news/13840.html

相关文章:

  • SpringMVC DispatcherServlet源码(5) HttpMessageConverter扩展
  • day16_API
  • 十二月券商金工精选
  • JUnit
  • MySQL学习笔记4-乐观锁和悲观锁
  • 踩大坑:json格式存储wav二进制内容
  • 加入CSDN的一年,我收获了这些……
  • 【Python学习笔记】44.Python3 MongoDB和urllib
  • LVS中的keepalived高可用
  • 【Vue3】组件数据懒加载
  • 基于 SmartX 分布式存储的 iSCSI 与两种 NVMe-oF 技术与性能对比
  • Anaconda 安装 Pytorch
  • 从零开始使用MMSegmentation训练Segformer
  • 会利用信息差赚钱的人才是聪明人
  • 【机器学习】Adaboost
  • 深度学习神经网络基础知识(二)权重衰减、暂退法(Dropout)
  • [面试直通版]网络协议面试核心之HTTP,HTTPS,DNS-DNS安全
  • 【OJ】A+B=X
  • Python实现性能自动化测试,还可以如此简单
  • Leetcode力扣秋招刷题路-0080
  • Java实现JDBC工具类DbUtils的抽取及程序实现数据库的增删改操作
  • 【docker】拉取镜像环境报错解决#ERROR: Get https://registry-1.docker.io/v2/
  • java中NumberFormat 、DecimalFormat的介绍及使用,java数字格式化,BigDecimal数字格式化
  • 2023什么是分销商城系统?营销,核心功能
  • 天翼数字生活C++客户端实习
  • Java 接口
  • 【React】react-router 路由详解
  • DaVinci 偏好设置:系统 - 内存和 GPU
  • 视频知识点(22)- 教你认清楚YUV420P和YUV420SP的真正差异在哪里
  • 企业电子招标采购系统源码Spring Cloud + Spring Boot + MybatisPlus + Redis + Layui