elementUI表格多选toggleRowSelection回显无效

已于 2022-07-14 17:26:59 修改
阅读量3.2k 收藏 4
点赞数 1
分类专栏： ❤️❤️--vue2核心技术栈 文章标签： elementui 前端 javascript element多选表格回显无效
于 2022-07-14 17:24:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41579104/article/details/125788167
版权

如果你是正常情况下，按照别的博客说的在页面加载完毕之后再调用这个方法就可以回显，当你看到我的博客时候，说明你不是正常情况、哈哈

解决方法：

法一（正常情况）：通过nextTick，在页面加载结束之后再调用 

法二（二次封装情况或法一不适用的来看）：看自己用的表格是不是二次封装了，二次封装的话，this.$refs.multipleTable.toggleRowSelection是找不到方法toggleRowSelection的。

我的表格就是二次封装，通过this.$refs.multipleTable打印出来之后并没有发现toggleRowSelection

最后仔细查找，发现打印出来的还有一个$refs，这里面包含了该方法，，，，很无语

了解本专栏 订阅专栏 解锁全文 超级会员免费看
suoh's Blog
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
element-ui table表格 toggleRowSelection 设置无效
Chad97的博客
10-14 6123
这个问题遇到很多次了 原因是 这里 toggleRowSelection(row, boolean) 这个方法，row是重绘数据 让我们来看看 this.$nextTick()这个方法的 官方文档 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 解决方案 在要改变的数据外层套上这个方法 小栗子 // 回调 nextTic...
el-table设置默认选中报错_this.$refs.singleTable.toggleRowSelection is not a function
wusq的博客
04-29 1万+
直接使用以下的方法，报错信息是_this.$refs.singleTable.toggleRowSelection is not a function this.$refs.singleTable.toggleRowSelection(item, true) 看了网上的解决方法，加了this.$nextTick,代码如下，但还是报错Error in nextTick: "TypeErr...
el-table多选toggleRowSelection不生效
最新发布
lyxgoodLucky的博客
05-31 417
el-table多选toggleRowSelection不生效解决方案
Element多选表格设置默认勾选 调用this.$refs.tableRef.toggleRowSelection不生效
你的阿迁
08-14 1228
在这里，点击筛选，不是对进来这个页面时获取的表数据进行直接筛选，而是先调用相关接口后再进行表数据的刷新，所以我们先加一层$nextTick，以便获取更新后的Dom... 其次，通过对比筛选找到源数据来设置选中项... 完美解决该问题。上次的需求是这样的... 点击筛选按钮，筛选出符合条件的数据，排列到列表页最前面并勾选...我想这还不简单，直接用下Element的方法就好了,结果就出现了勾选不生效的情况...
elementui dialog中el-table多选table修改时设置选中项
kirinlau的专栏
11-30 1万+
el-table默认选中项 核心伪代码如下： this.$refs.multipleTable.toggleRowSelection(this.tableData[index],true); //row 选中 外面套两层for循环，if判断想要选中的某项值和tableData中某对象的某个值相等即可 ...
html表格选择selection,Element 默认勾选表格 toggleRowSelection的实现
weixin_36346970的博客
06-09 852
官网尽管提供了toggleRowSelection方法，但没有提供demo实例。通过了解，结合vue的特殊属性ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。以下通过三种不同的数据来源实现table默认勾选对应的列：1、固定写在data数据里：注意el-table上有一个ref="table"的属性{{ scope.row.date }}ajax在勾子函数mou...
el-table多选回显报错，this.$refs.membersTable.toggleRowSelection is not a function
qq_41838435的博客
06-15 1627
toggleRowSelection is not a function
vue2的element UI 表格单选
qq_46131497的博客
03-07 389
是定义的表格的ref。
详解关于element级联选择器数据回显问题
12-29
element级联选择器数据回显问题 对于前端小菜鸡来说，被这个问题也是困扰了好久。也是百度的方法。 表单部分代码： 部门名称： prop=deptId> 请选择部门 props=depShowType options=deptData v-model=...
Vue+elementUI实现多图片上传与回显功能（含回显后继续上传或删除）
10-15
在开发过程中，有时我们需要实现多图片上传与回显的功能，尤其是在创建或编辑表单时，用户可能需要上传多张图片，并在页面加载时能够显示出已保存的图片。本文将详细介绍如何使用 Vue 和 Element UI 来实现这一功能...
layui表格数据复选框回显设置方法
10-16
然而，在layui的早期版本（如2.3版本）中，对于表格数据的复选框回显功能并不直接支持。本文将详细讲解如何实现layui表格数据复选框的回显设置。 首先，我们需要理解layui表格的基本使用方法。`table.render()` 是...
select2控件回显方法
09-12
JavaScript 技术： select2控件选择多个数据，以及回显数据的方法 。
解决element ui select下拉框不回显数据问题的解决
10-17
然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个问题，并提供解决方案。 问题描述： 当使用`el-select`组件绑定数据模型（`v-model`）时，下拉框在编辑表单时...
element-ui 组件 table 多选，翻页有记忆功能
热门推荐
萝卜芹菜芽
05-23 1万+
需求（这样的需求挺无赖的。。。）： 表格多选 支持翻页 当前页全选注：翻页时需要把上一次当前页点击的选项选中， 可以实现但是性能不好（每次点击都需要双重循环）。效果如下：方法： 单击事件和全选事件都需要 一、 单击事件，2个参数（selection，row）： selection: 当前页所有打钩的 row: 当前点击的行 通过这两个参数可以判断，当前点击是打钩还是取消打钩 二、 全选/取消全
Vue3+element-plus:table表格设置反选，this.$refs.XXX.toggleRowSelection失效，
weixin_56204435的博客
06-05 967
2、this.$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。（注意this指向）1、tab页循环，打印this.$refs可以看出是个数组，所以要加上对应的索引。
vue3 使用element-ui的toggleRowSelectio方法 实现表格回显勾选状态
m0_68956554的博客
03-26 4739
回显需要用到element-ui 3的 toggleRowSelection方法。通过遍历接口返回的数据和table的数据来回显相同数据的打勾状态。
[Vue] el-table多选框中回显问题
m0_63834711的博客
09-15 2591
关于el-table多选框回显问题，做个说明
vue3中使用element-plus表格多选进行回显，分页勾选保存
weixin_69186400的博客
04-21 3936
vue3 使用element-plus对表格进行多选回显保存
关于element-ui中dialog嵌套table时，报toggleRowSelection未定义undefined错误完美解决方案
王森的博客
09-29 5368
3，然后在这个组件中执行了mounted函数，但是dialog是懒加载模式，在showDialog默认为false的时候，在初始时dialog根本没有挂载到body下面，因此这时更不存在table被挂载上去，进而导致undefined问题；5，因此我第一想法是增加v-if，来延迟载入该组件，但带来的问题是，SelectGoods会被来回销毁重建，导致不能保持dialog隐藏时的状态。4，因为dialog被封装成了一个组件，而这个组件，在一开始就被执行了，所以该组件会调用mounted函数。
elementui 表格多选分页回显
06-09
对于 ElementUI 表格的多选分页回显，可以通过以下步骤实现： 1. 在父组件中定义一个数组 selectedRows，用于存储所有选中的行数据。 2. 在表格组件中添加一个 @selection-change 事件监听器，每当选中行数据发生...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

suoh's Blog

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值