el-table多选回显报错，this.$refs.membersTable.toggleRowSelection is not a function

最新推荐文章于 2023-12-13 16:18:52 发布
最新推荐文章于 2023-12-13 16:18:52 发布
阅读量1.4k 收藏 3
点赞数 3
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41838435/article/details/131228415
版权

el-table多选回显报错，this.$refs.membersTable.toggleRowSelection is not a function

直接使用this.$refs.membersTable.toggleRowSelection，报错找不到此方法toggleRowSelection 。

遇事不决，就打印呗

在这里插入图片描述

发现打印this.$refs.membersTable并没有找到toggleRowSelection

因为我这边的el-table用的公共组件里面的el-table，然后往里面这个$refs.table里面找，然后可以找到toggleRowSelection。
在这里插入图片描述

解决方法：

this.$refs.membersTable.$refs.table.toggleRowSelection(row, true)
hibiscusxin
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
elementUI表格多选toggleRowSelection回显无效
蜗牛~~
07-14 3106
elementUI表格多选toggleRowSelection回显无效
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...
【坑】element-ui el-table的toggleRowSelection小坑
all____might的博客
11-23 438
遇到的小坑
Element多选表格设置默认勾选 调用this.$refs.tableRef.toggleRowSelection不生效
你的阿迁
08-14 1116
在这里，点击筛选，不是对进来这个页面时获取的表数据进行直接筛选，而是先调用相关接口后再进行表数据的刷新，所以我们先加一层$nextTick，以便获取更新后的Dom... 其次，通过对比筛选找到源数据来设置选中项... 完美解决该问题。上次的需求是这样的... 点击筛选按钮，筛选出符合条件的数据，排列到列表页最前面并勾选...我想这还不简单，直接用下Element的方法就好了,结果就出现了勾选不生效的情况...
elementUI 表格多选框this.$refs.xxx.toggleRowSelection无效
热门推荐
恍若c的博客
08-24 1万+
在elementUI官方实例中，multipleSelection代表选中的值，toggleRowSelection(row,selection)方法用于原先已选的值传入进行勾选，row传递被勾选行的数据，selected设置是否选中。 需求是每次打开弹窗都会重新获取表格数据，并且要选中对应的数据，但直接使用那个方法并没有效果，因为表格中的数据还没有请求出来。 解决：获取数据后在需要进行勾选操作的外面套一个$nextTick this.$nextTick(() => { checke
html表格选择selection,Element 默认勾选表格 toggleRowSelection的实现
weixin_36346970的博客
06-09 835
官网尽管提供了toggleRowSelection方法，但没有提供demo实例。通过了解，结合vue的特殊属性ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。以下通过三种不同的数据来源实现table默认勾选对应的列：1、固定写在data数据里：注意el-table上有一个ref="table"的属性{{ scope.row.date }}ajax在勾子函数mou...
JavaWeb新版教程. 项目第五阶段-分页目-搜索价格区间的回显.avi
05-17
JavaWeb新版教程. 项目第五阶段-分页目-搜索价格区间的回显.avi
JavaWeb新版教程. 项目第三阶段目-表单提交失败的错误回显.avi
05-17
JavaWeb新版教程. 项目第三阶段目-表单提交失败的错误回显.avi
el-form动态增减表单项==＞ el-table自定义列数并动态加载列
05-12
【Vue入门实战6】【ElementUI组件使用优化】el-form动态增减表单项==＞ el-table自定义列数并动态加载列 ==＞ 处理后端复杂数据结构==＞回显动态列数据 本功能主要是实现【新建自定义配置】，输入配置基本信息，...
rlwrap-0.30-1.el5.i386 rpm包
11-09
默认情况下在Linux上安装的Oracle 10g的sqlplus不支持回显，这在使用中造成了一定的不便，为了使其支持回显功能，我们需要rlwrap软件来帮忙。 首先下载rlwrap-0.30-1.el5.i386的rpm包或者源码包，然后安装即可。...
JavaWeb新版教程. 项目第三阶段目-书城项目第四阶段，使用EL表达式实现表单错误回显.avi
05-17
JavaWeb新版教程. 项目第三阶段目-书城项目第四阶段，使用EL表达式实现表单错误回
【vue】elemente-ui table toggleRowSelection 默认选择无效[已解决]
我的开源项目:https://gitee.com/derekgo/vue-cms_xg
02-20 1365
点击按钮，弹出一个弹出框，内部出现一个table表，表内数据是动态获取，同时得勾选上几个table表的数据，类似以下的图。
el-table中的toggleRowSelection无效
qq_40011214的博客
08-15 4003
el-table中的toggleRowSelection无效问题
基于el-table二次封装的表格组件，toggleRowSelection 默认选中事件被清空的问题
qq_46370075的博客
04-24 1856
从详情页点编辑进入表格页的时候，有时候需要默认选中一些数据。 在el-table中的文档中能看到可以使用roggleRowSelection方法来默认选中一些数据。 // checkList 需要默认被选中的数组 // dataList 表格中展示的数组，也就是el-table的:data对应的数组 // 表格组件 添加ref属性 ref="table" checkList.forEach(listItem => { dataList.forEach(item => {
el_table的this.$refs.MainTable.toggleRowSelection(row, true)；事件会触发selection-change
最新发布
weixin_63896561的博客
12-13 679
这种情况多用于：点击含有多选框的行，在某处显示当前行的患者信息（可能出现点击事件和多选事件冲突的情况）。那么我们在点击click事件中只做多选框的选中，在多选事件中，做传递数据的操作。在点击el-table行时，需求同时选中跟当前行人不同的申请单。①处的代码因为是循环遍历，所以肯定会多次触发多选事件，那么如何拿到最后一次的多选事件呢（因为多选事件中，最后一次的事件获取的才是最终的）在点击时el-table行时，同时选中el-table的多选框。
vue3 element-plus el-table表格toggleRowSelection方法选中无效
nlhhln的博客
08-17 3430
不管怎样遍历，toggleRowSelection方法传入的row，都要从表格tableData里取值，类似tableData[0]这样，或者tableData.forEach中的item。以上是element-plus官方的一个选中示例。如果我们新建一个row数据，发现就是勾选不上，延迟执行也不行。
记录一次 element - table 多选框 toggleRowSelection 无效 的解决办法
bei199133的博客
03-25 2378
记录一次 element - table 多选框 toggleRowSelection 无效 的解决办法
Table 多选显示 this.$refs.multipleTable.toggleRowSelection(）清除 this.$refs.multipleTable.clearSelection()
weixin_63621456的博客
08-10 1533
Table 多选显示 this.$refs.multipleTable.toggleRowSelection(）清除 this.$refs.multipleTable.clearSelection()
解决elementui 多个el-table切换样式错乱问题，以及doLayout的坑
weixin_43020925的博客
10-19 8468
天坑的饿了么ui，最近有个需求需要在弹窗里做一个表格切换功能，但是多个表格进行切换时，样式会错乱，用v-if也没有，后面按照官方文档提示，通过再el-tabe上绑定个ref，然后使用doLayout这个方法解决，可是最后结果就是一直报错doLayout is not a function，试了无数种方法，在el-dialog的opened回调里调用，写在this.$nextTick回调里，甚至升级到最新版elementui，可是还是没卵用，真的佛了。 最后发现只需要在el-table上绑定一个唯一的key值
el-table 多选回显
08-19
el-table的多选回显可以通过以下步骤实现： 1. 重写表格的多选与全选方法，因为表格自带的切换分页会清空选择的数据。 2. 父组件传递选中的数据给子组件。 3. 对传递的数据进行重新组织，以适应采购单位列表的字段。 4. 使用表格数据回显方法来将数据显示在表格中。 在el-table中实现多选回显需要使用以下两个API： 1. 使用v-model指令来绑定一个展示在另一张页面的数据组，这样就能实现数据的回显。 2. 使用this.$refs.multipleTable.toggleRowSelection(row, true)方法来设置选中的行，其中传入的row是关联此el-table的data数组中的元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [el-table多选数据回显](https://blog.csdn.net/lxhmm921/article/details/123841658)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [el-table（type=“selection“）多选框两种回显](https://blog.csdn.net/qq_50276105/article/details/128307456)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值