获取数据后this.$refs.xxx.toggleRowSelection无效

最新推荐文章于 2024-03-29 10:12:50 发布
最新推荐文章于 2024-03-29 10:12:50 发布
阅读量637 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52753294/article/details/115870379
版权

获取数据后在外部加上一个$nextTick即可;


this.$nextTick(function () {
  this.trainPeopleTable.forEach(row=>{
    if(this.selectList.indexOf(row.staffId) >= 0){
      this.$refs.trainPersonTable.toggleRowSelection(row);
    }
  })
})

原因大概如下：$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

一个小开心呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element 默认勾选表格 toggleRowSelection的实现
12-29
官网尽管提供了toggleRowSelection方法，但没有提供demo实例。 通过了解，结合vue的特殊属性ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。 以下通过三种不同的数据来源实现table默认勾选对应的列： 1、固定写在data数据里： 注意el-table上有一个ref=”table”的属性 <el-table :data=tableData3 border ref=table style=width: 100% @selection-change=handleSele
elementUI 表格 获取数据后this.$refs.xxx.toggleRowSelection无效
indomi126的博客
04-30 5336
使用elementUI构建样式界面时，有一个跨页多选数据的需求，尝试在跳转其他页后根据已存的数据来判断是否已勾选 官网有一个toggleRowSelection(row,selection)方法 按着elementUI官网给出的示例一直不能触发toggleRowSelection 根据网上给出的解决办法 获取数据后在需要进行勾选操作的外面套一个$nextTick即可 this.$nextTic...
vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中
最新发布
weixin_44867717的博客
03-29 577
【代码】vue3中，el-table表格的禁用、回显和多选操作——标识row-key、是否勾选selectable & toggleRowSelection(row, true)-true选中。
elementUI 表格多选框this.$refs.xxx.toggleRowSelection无效
恍若c的博客
08-24 1万+
在elementUI官方实例中，multipleSelection代表选中的值，toggleRowSelection(row,selection)方法用于原先已选的值传入进行勾选，row传递被勾选行的数据，selected设置是否选中。 需求是每次打开弹窗都会重新获取表格数据，并且要选中对应的数据，但直接使用那个方法并没有效果，因为表格中的数据还没有请求出来。 解决：获取数据后在需要进行勾选操作的外面套一个$nextTick this.$nextTick(() => { checke
element Table使用toggleRowSelection添加默认值不生效的原因与解决方法
weixin_44441196的博客
06-09 3819
我遇到的需求是点击选择弹框，多选列表中的数据回显到页面中的表格，页面中的表格可以删除数据。 点击图片一中的选择按钮弹出图片2的弹框 图片2中选中的数据回显到图片一的表格 每次切换页码或者打开弹窗都需要匹配上已选中的数据，所以就需要用到 this.$refs[你表格绑定的ref].toggleRowSelection() this.$refs[你表格绑定的ref].clearSelection() 我下面的代码是每次请求接口后就去循环已选中列表，通过toggleRowSelection方法给弹框中.
toggleRowSelection nextTick失效问题解决
I've been looking for
02-11 407
if(rows){ rows.forEach(row => { this.$nextTick(()=>{ this.$refs.multipleTable.toggleRowSelection(this.list.find(e=>e.id==row.id),true); }); }); } 重点在于和当前的列表数据匹配对应上
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue列表单项展开收缩功能之this.$refs的详解
10-17
主要介绍了vue列表单项展开收缩功能之this.$refs的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
this.$toast() 了解一下？
12-03
前言 在平时的开发过程中，我们总是先写好一个组件...this.$toast({ duration: 3000, content: '这是一条消息提示' }); 没错，就是这么简单的一句话就万事大吉了（就是用 js 调用组件而已啦:face_with_monocle:）。那
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
toggleRowSelection 失效原因及解决思路
热门推荐
学海无涯，回头是岸
06-06 1万+
当在含分页的table中，需分页切换后对列表项的勾选状态做回显操作。根据element文档使用this.$refs.mytable.toggleRowSelection（row, selected）方法回显，实际应用时会出现回显失效的情况。
Element-ui中 表格（Table）组件中 toggleRowSelection 方法设置默认多选项 无法选中解决思路
有问题可关注公众号：前端研究院 后台输入问题回复
11-01 1万+
问题： Element-ui中，表格（Table）的 toggleRowSelection 方法无法默认选中的情况。 需求：对将设置为选中的内容进行部分修改，如：默认选中的内容必须得通过接口或者其他方式来获取，然后再默认选中。 <template> <div class="wrap"> <el-table border ref="multipleTable" :data="tableData" tooltip
elementUI 表格多选框this.$refs.xxx.toggleRowSelection的使用方法
dqwdnishi的博客
01-11 3255
在elementUI官方实例中，multipleSelection代表选中的值，**toggleRowSelection(row,selection)**方法用于原先已选的值传入进行勾选，row传递被勾选行的数据，selected设置是否选中。 需求是每次打开弹窗都会重新获取表格数据，并且要选中对应的数据，但直接使用那个方法并没有效果，因为表格中的数据还没有请求出来。 解决：获取数据后在需要进行勾选操作的外面套一个$nextTick this.$nextTick(() => { ch
elementUI表格多选toggleRowSelection回显无效
蜗牛~~
07-14 3053
elementUI表格多选toggleRowSelection回显无效
Vue3+element-plus:table表格设置反选，this.$refs.XXX.toggleRowSelection失效，
weixin_56204435的博客
06-05 893
2、this.$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。（注意this指向）1、tab页循环，打印this.$refs可以看出是个数组，所以要加上对应的索引。
html表格选择selection,Element 默认勾选表格 toggleRowSelection的实现
weixin_36346970的博客
06-09 821
官网尽管提供了toggleRowSelection方法，但没有提供demo实例。通过了解，结合vue的特殊属性ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。以下通过三种不同的数据来源实现table默认勾选对应的列：1、固定写在data数据里：注意el-table上有一个ref="table"的属性{{ scope.row.date }}ajax在勾子函数mou...
html+单选+回显,VUE+elementUI表格多选框实现单选以及数据回显时toggleRowSelection失效问题...
weixin_66902855的博客
08-12 3170
toggleRowSelection这个函数需要传某行数据，true表示勾选，false表示不勾选，@selection-change默认是勾选的，也就是说这个事件传进来被选中的数据如果你还是想勾选，那么不需要任何操作，除非你想不勾选，那么就把那条数据用false来去掉勾选。selectItem这个函数我自定义了，一旦勾选多于一行数据，就把上一个勾选去掉，保留最后一个勾选，用过滤器来过滤，把新的(只有一行数据)的数组赋给自定义的数组，方便调用。...
vue3 toggleRowSelection用法 实现表格回显、单选
aiiiszrh的博客
12-23 4138
vue3 toggleRowSelection用法 实现表格回显、单选
element-ui +vue实现行数据自动勾选——toggleRowSelection
weixin_42404174的博客
04-08 3855
业务需求 主数据table展开依次渲染子数据，（通过@expand-change控制），当全选子数据时，默认勾选对应行的主数据，非全选时取消勾选主数据行。 截图展示 全选 非全选（包括有禁用） 代码部分 业务代码已删除，仅保留处理逻辑。 （1）给需要控制添加自动勾选的el-table加上ref属性 <el-table ref="mutipleTable" :data="tableData" height="87vh" style="width: 1..
页面加载第一次获取不到 this.$refs
09-07
在使用this.$refs来获取DOM或组件时，有时会遇到无法获取到this.$refs的情况。在你提供的引用内容中，出现了两种解决办法。 第一种解决办法是在页面加载完成后，使用this.$nextTick()方法来获取this.$refs。这个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值