element表格使用this.$refs.table.clearSelection()清除报错

于 2023-11-15 10:30:34 发布
阅读量641 收藏
点赞数
文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45177235/article/details/134414484
版权

1.原因

this.$refs.table实例上没有clearSelection()方法，但看官网就是直接调用的

2.解决

使用this.$refs.table.$refs.ElTable.clearSelection()

成长的大佬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 解决通过this.$refs来获取DOM或者组件报错问题
10-15
主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue列表单项展开收缩功能之this.$refs的详解
10-17
主要介绍了vue列表单项展开收缩功能之this.$refs的详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
取消elementUI中table的选中状态和勾选状态赋值
最新发布
c_qianxia5040的博客
11-03 1760
1、表格上绑定ref。2、清空用户选中数据。
ElementUI table表格如何手动清空某条数据复选框选中状态
weixin_42594419的博客
01-04 2634
你可以使用 ElementUI 的 table 组件中的 clearSelection 方法来手动清空表格中某条数据的复选框选中状态。 使用方法如下： 在你的组件中导入 ElementUI 的 table 组件： import { Table } from 'element-ui'; 在你的组件中调用 clearSelection 方法： this.$refs.yourTableName....
解决element table 使用clearSelection报错
emoji111111的博客
05-24 1785
使用官网的clearSelection,用来清除table选中状态，但是控制台报错 然后打印this.$refs.tableData，控制台显示undefined？？？ 原因是dom还没渲染完成，导致找不到refs元素，可以使用this.$nextTick来解决 ...
elementUI clearSelection属性报错 Cannot read property ‘clearSelection‘ of undefined“
weixin_44981329的博客
08-10 7464
接到客户一个需求，点击操作按钮时，table的选择框不要去掉，只有查询的时候才给去掉。 当时想到可以用elementUI的 :reserve-selection=“true” 属性，配置row-key="id"来设置不去除复选框。 但这样就定死了 查询也不会刷新复选框。 想着把属性:reserve-selection定成可变参数 值设置为可变的，只有查询的时候把值改成false。 实际效果显示，这种方式不可行。 那就再换一种方式 clearSelection。文档中是这么说的 这样设置的话，看看效果 用这
vue element table 清空选中clearSelection无效
weixin_45422787的博客
08-11 1万+
官方文档给出的table清空选中状态的方法是clearSelection 然后this.refs.multipleTable.clearSelection();这样去用但是无效我就问你要不要这么坑的！！！！！！！！！关键还是靠自己，打印this.refs.multipleTable.clearSelection();这样去用 但是无效 我就问你要不要这么坑的！！！！！！！！！ 关键还是靠自己，打印this.refs.multipleTable.clearSelection();这样去用但是无效我就问你要不
清空表格选中项clearSelection
qq_42931285的博客
06-09 7470
clearSelection、toggleRowSelection
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
主要介绍了Vue 报错TypeError: this.$set is not a function 的解决方法，分享给大家，需要的朋友们下面随着小编来一起学习学习吧
this.$toast() 了解一下？
12-03
上面这种类型的浮层提示有一个很大的特点，就是使用频率特别高，几乎每个页面都会用到它，于是乎我们就要在每个页面中去引入该组件，并且在每个页面都得通过一个变量来控制它的显隐，这显然不是我们想要的:person_...
Vue el-element ui 清空表格选中记录
u013992330的博客
12-02 8220
有两种方法： 方法一： this.$refs.my_table.$refs.multipleTable.clearSelection() 方法二： this.$refs.my_table.$children[0].clearSelection() 其中 my_table 是 el-table 的ref
elementul表格多选状态一键清空
seeeeeeeeeee的博客
09-28 3011
效果图 上代码 在表格上添加ref <el-table ref="multipleTable" @selection-change="handleSelectionChange"> <el-table-column type="selection" align="center" ></el-table-column> <el-table-column align="center" porp="abc"></el-table-col
Element UI实现全选和取消功能
taibaishenlong的专栏
11-05 3967
1、点击全选，则选择全部选项框，再点击一下全选，则不选任何选项框，先放一张实现图，如下所示。 2、Element UI下的el-table构建表格，属于html表现层部分，其代码如下所示: <template> <div> <el-table ref="multipleTable" :data="tableData" border style="width: 80%" @selection-change="handleSelectionChan.
关于el-table调用清除方法clearSelection()时会触发change方法的解决方案
喜欢做一些demo，和分享遇到的 BUG
02-27 4517
背景 最近项目有个需求场景是左边账户切换时展示表格的数据，表格是同一个table，所以切换时理想场景是先清空已选值，然后再手动回显保存的已选值。 遇到的问题是：每次调用clearSelection（）会触发change函数，导致保存的已选值被赋值为空数组，一直存不了。 解决方案是添加一个标识来判定是清空和change方法。 调用toggleRowSelection(item, true);方法是勾选，但是会记录在table的change事件中，你再操作勾选，会连同回显的和已选的一起返回，存在重复数据。所以
Vue中this.$refs的使用
weixin_43337481的博客
04-08 1956
ref 写在组件上时：this.$refs['component'] 获取到的是添加了ref="component"属性的这个组件。注意：$ refs不是响应式的，只在组件渲染完成之后才填充。ref 写在标签上时：this.$refs.ipt 获取的是添加了ref="ipt"标签对应的dom元素，$refs 是所有注册过 ref 的集合（对象）；若是遍历的ref，则对应$refs是个数组集合。this.$refs在vue中ref可以以属性的形式添加给标签或者组件，
vue+element 表格中全选与清除选中
热门推荐
疏影横斜水清浅
04-11 2万+
表格中添加 事件@selection-change （回调参数为选中的选项） 事件名 说明 参数 select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection selection-change 当选择项发生变化...
Element UI 问题整理
niuniu2878499107的博客
08-17 255
element ui 问题整理
el-table复选框回显出错
李知恩李知金
07-18 1458
经过研究，json的序列化只是把同一组数据里的东西在内存中的位置进行了调换，并不是真正意义上的深拷贝，至于用索引却能取到正确的值，这个楼主没有想通。根据element的官方文档。
Vue3解决：[Vue warn]: Failed to resolve component: el-table(或el-button) 的三种解决方案
狮子座的男孩
06-29 2万+
等组件，却发现页面一直再 Vue warn。，且在页面上一直显示不出来自己想要的结果；想完整引入 ElementPlus ui。// 没实测过，因为我使用 vue3。库，并想使用 el-table。通过方式一、方式二和方式三后，或 el-button。的代码风格不是如此;
使用element UI如何批量删除表格
05-19
可以使用 Element UI 中的 el-table 组件，结合 el-table-column 组件的 selection 属性和 el-button 组件的 type 属性实现批量删除。 具体实现步骤如下： 1. 在 el-table-column 组件中设置 selection 属性为 true，表示开启多选框。 ``` <el-table-column type="selection"></el-table-column> ``` 2. 在 el-table 组件上设置 ref 属性，用于在代码中获取表格的实例。 ``` <el-table ref="table"></el-table> ``` 3. 在 el-button 组件上绑定一个事件处理函数，用于删除选中的行。 ``` <el-button type="danger" @click="handleDelete">批量删除</el-button> ``` 4. 在事件处理函数中获取选中的行，并使用 $refs.table 的 clearSelection 方法清空选中状态。 ``` methods: { handleDelete() { const selectedRows = this.$refs.table.selection; // 进行删除操作 // ... this.$refs.table.clearSelection(); } } ``` 完整的示例代码如下： ``` <template> <div> <el-table :data="tableData" ref="table"> <el-table-column type="selection"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> <el-button type="danger" @click="handleDelete">批量删除</el-button> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 18 }, { name: '李四', age: 20 }, { name: '王五', age: 22 } ] }; }, methods: { handleDelete() { const selectedRows = this.$refs.table.selection; // 进行删除操作 // ... this.$refs.table.clearSelection(); } } }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值