elementUI表格多选toggleRowSelection回显无效

已于 2022-07-14 17:26:59 修改
阅读量3.3k 收藏 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
版权
在遇到ElementUI的表格多选功能toggleRowSelection无法回显的问题时，常规的nextTick方法可能无效。如果表格进行了二次封装，$refs.multipleTable将找不到toggleRowSelection。解决办法是深入查找$refs的内部结构，可能需要通过双层refs来调用正确的方法，实现回显。建议在遇到此类问题时，先打印$refs以便定位方法。
摘要由CSDN通过智能技术生成

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

解决方法：

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

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

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

了解本专栏 订阅专栏 解锁全文 超级会员免费看
suoh's Blog
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
element-ui table表格 toggleRowSelection 设置无效
Chad97的博客
10-14 6228
这个问题遇到很多次了 原因是 这里 toggleRowSelection(row, boolean) 这个方法，row是重绘数据 让我们来看看 this.$nextTick()这个方法的 官方文档 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 解决方案 在要改变的数据外层套上这个方法 小栗子 // 回调 nextTic...
ele单元格用toggleRowSelection(row, true)回显遇到的问题
weixin_66902855的博客
08-12 1730
今天在做项目时有遇到表格里多选的选中内容后再次打开默认选中打钩，ele单元格用toggleRowSelection(row, true)回显时row必须返回当前列表渲染用的数据，自己存的数据是无效的，而且用toggleRowSelection这个方法时就会报 报错 toggleRowSelection‘ of undefined。解决方法是 ：加了个this.$nextTick(function () {}）在外边，问题解决。自己在做项目中写的代码片段 容易自己理解。...
【element-plus】toggleRowSelection不生效
最新发布
monongLY的博客
07-15 169
百度了一下，有人说是。
[Vue] el-table多选框中回显问题
m0_63834711的博客
09-15 2662
关于el-table多选框回显问题，做个说明
el-table 设置了selection多选，选中状态不回显处理
m0_49016709的博客
09-22 7264
关于回显的处理element 中Table Methods 有一个方法 toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） 设置某一行选中 (这里是vue3) table.value.toggleRowSelection(item) 设置某一行不选中 table.value.toggleRowSelection(item，false) 下面是完整代码 <template>
element-plus表格选择框使用toggleRowSelection不回显
DVZEGFR的博客
03-13 736
用nextTick包一下就好了。
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 1748
toggleRowSelection is not a function
el-talbe，selection，this.$refs.multipleTable.toggleRowSelection失效问题
qq_39594951的博客
04-20 3135
1.el-table中，设置复选框 <el-table ref="multipleTable" :data="rightforeach" tooltip-effect="dark" class="surface"
elementui的多选select回显
04-11
b'elementui\xe7\x9a\x84\xe5\xa4\x9a\xe9\x80\x89select\xe5\x9b\x9e\xe6\x98\xbe' 的意思是“ElementUI中的多选select回显”。想要回显多选select的值，可以在模板中使用v-model指定全部选中的选项，也可以使用...
elementUI树状多选表格
weixin_53003063的博客
12-14 3082
树状多选表格 需回显已选择的 可控制展开收起 <el-button v-if="!fold" @click="foldShow"> <i color="pink" class="el-icon-circle-plus"></i>全部展开 </el-button> <el-button v-if="fold" @click="foldNone"> <i color="pink" class="el-icon-remove.
vue+elementUI 分页多选弹窗回显,编辑回显
偶阵雨的博客
09-27 1878
实现分页多选弹窗回显功能 父级页面以可关闭tag标签形式展示已选 1.编写分页多选弹窗组件 <template> <el-dialog title="关联问题" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" ...
记录一下处理element table表格数据多选翻页回显实现
Mr_SnakeZ的博客
04-19 469
table表格多选框回显实现
使用element-ui中的el-table回显已选中数据时toggleRowSelection报错
lll19960406的博客
08-30 1147
最近在写一个后台，需要在表格中多选，然后点击编辑按钮的时候，需要回显已经选中的表单项 <el-table v-loading="loading" :data="discountList" :row-key="(row) => row.id" ref='multipleTable' @selection-change="handleSelectionChange"> ...
element表格多选数据回显toggleRowSelection没有效果
senoritaypj的博客
03-30 2497
场景：element表格数据回显使用官方函数toggleRowSelection没有效果 解决： 把该步骤放到this.$nextTick中渲染如下：
elementUI 表格多选框this.$refs.xxx.toggleRowSelection无效
恍若c的博客
08-24 1万+
在elementUI官方实例中，multipleSelection代表选中的值，toggleRowSelection(row,selection)方法用于原先已选的值传入进行勾选，row传递被勾选行的数据，selected设置是否选中。 需求是每次打开弹窗都会重新获取表格数据，并且要选中对应的数据，但直接使用那个方法并没有效果，因为表格中的数据还没有请求出来。 解决：获取数据后在需要进行勾选操作的外面套一个$nextTick this.$nextTick(() => { checke
el-table多选toggleRowSelection不生效
lyxgoodLucky的博客
05-31 637
el-table多选toggleRowSelection不生效解决方案
Element多选表格设置默认勾选 调用this.$refs.tableRef.toggleRowSelection不生效
你的阿迁
08-14 1273
在这里，点击筛选，不是对进来这个页面时获取的表数据进行直接筛选，而是先调用相关接口后再进行表数据的刷新，所以我们先加一层$nextTick，以便获取更新后的Dom... 其次，通过对比筛选找到源数据来设置选中项... 完美解决该问题。上次的需求是这样的... 点击筛选按钮，筛选出符合条件的数据，排列到列表页最前面并勾选...我想这还不简单，直接用下Element的方法就好了,结果就出现了勾选不生效的情况...
elementui 表格多选分页回显
06-09
对于 ElementUI 表格的多选分页回显，可以通过以下步骤实现： 1. 在父组件中定义一个数组 selectedRows，用于存储所有选中的行数据。 2. 在表格组件中添加一个 @selection-change 事件监听器，每当选中行数据发生变化时，将最新的选中行数据更新到 selectedRows 数组中。 3. 在表格组件中添加一个 :row-key 属性，用于指定表格行数据的唯一标识符。 4. 在表格组件中添加一个 :highlight-current-row="true" 属性，用于高亮当前行。 5. 在表格组件中添加一个 :default-selection 属性，用于设置表格初始化时默认选中的行数据。 6. 在分页组件中添加一个 @size-change 事件监听器，每当分页大小发生变化时，将当前页选中的行数据更新到 selectedRows 数组中。 7. 在分页组件中添加一个 :current-change 属性，用于设置当前页数发生变化时的回调函数。 8. 在回调函数中，根据当前页数和每页显示的行数，计算出当前页的行数据在 selectedRows 数组中的下标范围，并将对应的行数据设置为表格的默认选中行数据。 9. 在表格组件中添加一个 :selection 属性，用于设置表格的选中行数据，这里可以直接将 selectedRows 数组传递给该属性即可。 具体代码实现可以参考以下示例： ```html <template> <div> <el-table :data="tableData" :row-key="row => row.id" :highlight-current-row="true" :default-selection="defaultSelection" :selection="selectedRows" @selection-change="handleSelectionChange" > <el-table-column type="selection"></el-table-column> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> <el-pagination :total="total" :page-size="pageSize" :current-page="currentPage" @size-change="handleSizeChange" :current-change="handleCurrentChange" ></el-pagination> </div> </template> <script> export default { data() { return { tableData: [], selectedRows: [], defaultSelection: [], total: 0, pageSize: 10, currentPage: 1 }; }, mounted() { // 初始化表格数据 this.getTableData(); }, methods: { getTableData() { // 获取表格数据 // ... }, handleSelectionChange(selectedRows) { // 更新选中行数据 this.selectedRows = selectedRows; }, handleSizeChange(pageSize) { // 分页大小发生变化时更新选中行数据 this.updateSelectedRows(); }, handleCurrentChange(currentPage) { // 当前页数发生变化时更新选中行数据 this.currentPage = currentPage; this.updateSelectedRows(); }, updateSelectedRows() { // 计算当前页的选中行数据在 selectedRows 数组中的下标范围 const start = (this.currentPage - 1) * this.pageSize; const end = start + this.pageSize; // 将对应的行数据设置为表格的默认选中行数据 this.defaultSelection = this.selectedRows.slice(start, end); } } }; </script> ```
评论 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、付费专栏及课程。

余额充值