解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题
更新时间：2022年10月21日 10:35:43 作者：前端开发终生学习者
这篇文章主要介绍了解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
获取数据后this.$refs.xxx.toggleRowSelection无效
获取数据后在外部加上一个$nextTick即可
this.$nextTick(function () {
this.trainPeopleTable.forEach(row=>{
if(this.selectList.indexOf(row.staffId) >= 0){
this.$refs.trainPersonTable.toggleRowSelection(row);
}
})
})原因大概如下：
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
toggleRowSelection失效的2个原因
背景
当在含分页的table中，需分页切换后对列表项的勾选状态做回显操作。根据element文档使用 this.$refs.mytable.toggleRowSelection（row, selected）方法回显，实际应用时会出现回显失效的情况。
失效原因
1、 ref 文档本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！ $refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。
数据更新后Dom会注销新建，导致我们勾选操作失效
2、我们操作的勾选数据必须是表单数据，即便数据一模一样，数据存储地址的指针不同也会导致失效
解决办法
1、使用$nextTick,在dom 更新完成后的回调中来处理渲染选中
2、通过已选数据对比筛选表单数据来操作同一数据
this.checkedData.forEach(item => { // checkedData为已选数据
this.$nextTick( ()=>{
this.userData.find(obj => { // userData 表单数据
if(item.id === obj.id) {
this.$refs.multipleTable.toggleRowSelection(obj,true)
}
})
})
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue3学习笔记之自定义组件的相关资料,组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,需要的朋友可以参考下2023-08-08
今天小编就为大家分享一篇Vue-component全局注册实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue实现图片预览放大以及缩小问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要给大家介绍了关于Vue在ie10下空白页的debug相关资料，这是最近在工作中遇到的一个问题，通过查找相关的资料终于解决了，文中通过示例代码介绍的非常详细，需要的朋友可以参考下2018-05-05
这篇文章主要为大家学习介绍了Vue如何利用广度优先搜索实现watch（有意思），文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
vue项目中使用Hbuilder打包app 设置沉浸式状态栏的方法
这篇文章主要介绍了vue项目 使用Hbuilder打包app 设置沉浸式状态栏的方法，本文通过实例代码效果图展示给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2018-10-10
vue双向锚点实现过程简易版(scrollIntoView)
这篇文章主要介绍了vue双向锚点实现过程简易版(scrollIntoView),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要为大家介绍了Vue配置环境变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-01-01
这篇文章主要介绍了VUE表格显示错位的两种解决思路,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue自定义js图片碎片轮播图切换效果的实现代码,需要的朋友可以参考下2019-04-04
最新评论