解决获取数据后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)
}
})
})
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
我们平时经常做的是上传文件,下面这篇文章主要给大家介绍了关于vue项目中实现多文件上传功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue实现一个单独的组件注释，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue3深入学习 nextTick和historyApiFallback
这篇文章主要介绍了vue3深入学习 nextTick和historyApiFallback，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的朋友可以参考一下2022-08-08
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
这篇文章主要介绍了vue.js实现数据库的JSON数据输出渲染到html页面功能,结合实例形式分析了vue.js针对本地json数据的读取、遍历输出相关操作技巧,需要的朋友可以参考下2019-08-08
axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护，在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，本文就给大家介绍一下axios封装与api接口封装管理,需要的朋友可以参考下2023-06-06
vue3.0 的 Composition API 的使用示例
这篇文章主要介绍了vue3.0 的 Composition API 的使用示例，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下2020-10-10
本文主要介绍了Javascript中Vuex的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
在Vue和Django进行前后分离开发时,经常会遇到跨域和CSRF令牌验证问题,本文详细介绍了如何在Django后端设置视图获取CSRF令牌,并在Vue前端进行配置以确保安全的数据交互,文章提供了后端视图创建、settings配置以及前端axios请求封装的具体方法2024-09-09
这篇文章介绍了Vue使用$set和$delete操作对象属性的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要给大家介绍了关于vue-cli基础配置及webpack配置修改的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者使用vue-cli具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-10-10
最新评论