el-table多选toggleRowSelection不生效解决方案
更新时间：2023年08月15日 10:51:01 作者：一只小白菜~
这篇文章主要给大家介绍了关于el-table多选toggleRowSelection不生效的解决方案,文中通过图文以及代码将解决办法介绍的非常详细,需要的朋友可以参考下
做弹窗里有个表格多选时，经常遇到再次打开弹窗， 已选值赋值不上 的问题，这里简单记录一下解决方案。
element官方提供的例子经常是有各种问题的，这里经常是toggleSelection不生效
toggleRowSelection是用来控制table表格选择框回显的方法，这个方法有两个参数
toggleRowSelection(item, true)，第一个参数是你准备 回显哪一项 ，也就是表格对应的哪一行，第二个就是那个勾勾，true就是 勾选 上。
一般遇到的业务是，第一次打开选中了，然后有个列表回显选中的值，再有个编辑，点编辑回显选中的，然后就会遇到选中不生效的问题…
直接上解决方案：
1、赋值前先清空值clearSelection()
2、在DOM节点更新后再进行赋值，这里使用nextTick
3、进行赋值渲染选中toggleRowSelection(item, true)
// 我这里是用的el-dialog弹窗里的，所以在@open事件中处理
onOpen () {
const TABLE_DOM = this.$refs.multipleTable
const { optCoupons } = this
if (TABLE_DOM) {
TABLE_DOM.clearSelection()
this.$nextTick(_ => {
optCoupons.forEach(item => {
TABLE_DOM.toggleRowSelection(item, true)
})
})
}
}总结
到此这篇关于el-table多选toggleRowSelection不生效解决方案的文章就介绍到这了,更多相关el-table多选toggleRowSelection不生效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue + Element UI图片上传控件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
干了6年前端,和Token斗智斗勇了不知道多少回,本文小编就跟大家聊聊如何优雅处理Token过期,甚至让它自动续期,让用户无感知,有需要的小伙伴可以了解下2025-07-07
这篇文章主要给大家介绍了vue获取DOM节点的常用方法,使用ref属性,使用$el属性,使用querySelector和querySelectorAll,使用$refs和querySelector,这几种方法,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了基于vue-cli3.0构建功能完善的移动端架子，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
实现小游戏可以锻炼自己的逻辑思维能力，也不会很枯燥，完成时会给自己带来一种满足感。本文就将利用Vue和JS实现简单的扫雷小游戏，需要的可以参考一下2022-06-06
如何为vuex实现带参数的 getter和state.commit
这篇文章主要介绍了如何为vuex实现带参数的getter和state.commit，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了Vue项目配置@别名全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
本文主要介绍了Vue中tab栏切换的简单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
今天小编就为大家分享一篇vue-cli监听组件加载完成的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue微信分享出来的链接点开是首页问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
最新评论