el-table设置默认选中报错_this.$refs.singleTable.toggleRowSelection is not a function

最新推荐文章于 2024-08-15 17:26:28 发布
最新推荐文章于 2024-08-15 17:26:28 发布
阅读量1.2w 收藏 17
点赞数 21
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42345108/article/details/105838439
版权
在Vue项目中使用el-table设置默认选中时遇到错误：_this.$refs.singleTable.toggleRowSelection is not a function。尝试使用this.$nextTick包裹代码未解决问题。通过打印this.$refs.singleTable发现其为类似数组的对象，解决方案是将this.$refs.singleTable改为this.$refs.singleTable[0]来调用toggleRowSelection方法，成功解决报错。
摘要由CSDN通过智能技术生成

直接使用以下的方法，报错信息是_this.$refs.singleTable.toggleRowSelection is not a function

this.$refs.singleTable.toggleRowSelection(item, true)

 

看了网上的解决方法，加了this.$nextTick,代码如下，但还是报错Error in nextTick: "TypeError: _this.$refs.singleTable.toggleRowSelection is not a function"

_this.$nextTick(() => {
    _this.$refs.singleTable.toggleRowSelection(item, true)
})

 

看报错信息是this.$refs.singleTable.toggleRowSelection这个东西不存在或者有错误，所以我决定把this.$refs.singleTable打印出来看看是什么东西！

最低0.47元/天 解锁文章
sqwu
关注
专栏目录
element-ui table表格 toggleRowSelection 设置无效
Chad97的博客
10-14 6279
这个问题遇到很多次了 原因是 这里 toggleRowSelection(row, boolean) 这个方法，row是重绘数据 让我们来看看 this.$nextTick()这个方法的 官方文档 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 解决方案 在要改变的数据外层套上这个方法 小栗子 // 回调 nextTic...
el-table设置默认选中报错_this.$refs.singleTable.toggleAllSelection is not a function
飞翔༒之翼
12-20 655
直接使用以下的方法，报错信息是`_this.$refs.singleTable.toggleAllSelection is not a function。再把它展开，终于在中间部分找到了这个方法，所以这个方法并不是直接。打印出来了是这么一个东西，看他的格式应该是类似数组。这个东西不存在或者有错误，所以我决定把。看了网上的解决方法，加了。打印出来看看是什么东西！
el-table中toggleRowSelection选中方法不生效问题
qq_43378083的博客
07-30 451
el-table中toggleRowSelection选中方法不生效问题
el-table中toggleRowSelection选中方法不生效附解决方案
最新发布
铁锤妹妹的博客
08-15 1194
最近在后台管理项目中，需求是需要在A弹窗中有个table表格和按钮，点击查询按钮B弹窗弹出，里面内容还是table表格，选择B弹窗中的table表格某些项，保存之后会把已选中的表格项带到A弹窗中。通过排查原因是，打开B弹窗时候需要每次请求接口，获取表格数据，导致对象引用不同，所以使用el-table的toggleRowSelection() 选中方法无效。数据源问题，我们每次请求回来的表格数据，即便数据一模一样，数据对象存储地址的指针不同也会导致失败。
vue.js常用语句记录
无拘7的博客
10-29 460
vue table点击行选中 <el-table @row-click="clickRow" > clickRow(val) { this.$refs.table.toggleRowSelection(val); } // $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM this.$nextTick(function () { this.trainPeopleTable.forEach
toggleRowSelection 失效原因及解决思路
学海无涯，回头是岸
06-06 2万+
当在含分页的table中，需分页切换后对列表项的勾选状态做回显操作。根据element文档使用this.$refs.mytable.toggleRowSelection（row, selected）方法回显，实际应用时会出现回显失效的情况。
el-table多选回显报错，this.$refs.membersTable.toggleRowSelection is not a function
qq_41838435的博客
06-15 1808
toggleRowSelection is not a function
vue3 element-plus el-table表格toggleRowSelection方法选中无效
nlhhln的博客
08-17 4396
不管怎样遍历，toggleRowSelection方法传入的row，都要从表格tableData里取值，类似tableData[0]这样，或者tableData.forEach中的item。以上是element-plus官方的一个选中示例。如果我们新建一个row数据，发现就是勾选不上，延迟执行也不行。
记录一次 element - table 多选框 toggleRowSelection 无效 的解决办法
bei199133的博客
03-25 2499
记录一次 element - table 多选框 toggleRowSelection 无效 的解决办法
element中el-tabs下的toggleRowSelection方法设置无效
漫天随飞雪的博客
11-01 453
无
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
“TypeError: _this.$refs.activity.openDialog is not a function“。父组件ref调用子组件
1461590508@qq.com的博客
01-11 2580
记录 TypeError: this.$refs.activity.openDialog is not a function"。父组件ref调用子组件的坑。 报错的时候， 首先查找，子组件引入进来是否注册。 其次查找子组件是否写在根目录，div包裹。 再查找，这个方法是写在哪里。如果在created里，是被报错的，要写在mounted中，此时dom已加载好。如果写在methods中，需要用。this.$nextTick()回掉，或者用定时器 setTimeout(()=>{ },500) 还要检查是否
Vue父组件调用子组件方法，报错[Vue warn]: Error in v-on handler: “TypeError: _this.$emit is not a function“
星云
09-30 9156
症状 一开始浏览器控制台报这个错[Vue warn]: Error in v-on handler: "TypeError: _this.$emit is not a function"，明显就是this指向问题，名为ajax的方法在父组件中，而this是子组件。 <!-- 子组件 --> <template> … <el-pagination layout="prev, pager, next" :page-count=
Vue -- Element UI的Tree组件中，this.$refs.menuTree.setCurrentKey()设置当前被选中的树节点无效果？$nextTick
热门推荐
Emily
08-22 2万+
在项目中，在数据请求完后，获得allMenuData，然后通过 this.$refs.menuTree.setCurrentKey()设置当前被选中的树节点。但是发现并没有效果。 原因：DOM并未渲染完，也就是被选中的树节点还没渲染出来，所以对它操作是无效的。所以需要借助$nextTick，确保DOM已渲染。 $nextTick(function(){ }) //或者 $nextT...
一分钟解决this.$refs.xxx 取值为undefined问题
weixin_43840538的博客
05-07 5096
问题场景是这样， 我们设定一个组件的ref = ‘a’，根据生命周期，我们是可以在mounted中访问的，但是console.log(this.$refs.a)是undefined，而我们this.$refs打印出来，这个a是存在的，这是为什么呢？ 可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果...
elementUI toggleRowSelection设置无效
为啥不能换名字的博客
12-26 2万+
// 初始化禁选的复选框 checkboxInit(row, index) { var that = this; that.$nextTick(() =&gt; { console.log(that.$refs.multipleTableGood); i...
基于el-table二次封装的表格组件，toggleRowSelection 默认选中事件被清空的问题
qq_46370075的博客
04-24 1968
从详情页点编辑进入表格页的时候，有时候需要默认选中一些数据。 在el-table中的文档中能看到可以使用roggleRowSelection方法来默认选中一些数据。 // checkList 需要默认被选中的数组 // dataList 表格中展示的数组，也就是el-table的:data对应的数组 // 表格组件 添加ref属性 ref="table" checkList.forEach(listItem => { dataList.forEach(item => {
this.$refs.table.validate is not a function
06-07
这个错误通常意味着你正在尝试在一个非表单元素上使用 ...如果你确定正在对正确的元素调用 validate 方法，那么可能是因为你的表单元素没有正确地引用 this.$refs.table。请确保在你的组件中正确地引用了表单元素。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值