项目场景:
点击按钮,弹出一个弹出框,内部出现一个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}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!
如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教