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中watchEffect的追踪逻辑,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-04-04
本文主要介绍了Vuex模块化实现待办事项的状态管理的相关知识，具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
今天小编就为大家分享一篇element UI upload组件上传附件格式限制方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了关于移动端与大屏幕自适应适配方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
放大镜效果在很多购物网站都可以看到，本文主要介绍了vue3实现淘宝放大镜效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
这篇文章主要为大家介绍了vue实现搜索关键词高亮的详细教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了vue中v-if失效原因及解决方法,一般v-if失效都是和绑定变量有关,下面就来具体介绍一下,感兴趣的可以了解一下2023-09-09
在遇到chunk-vendors.js文件的语法错误时,可以尝试在vue.config.js文件中添加transpileDependencies参数进行配置,这通过明确指示哪些依赖需要被babel转译,从而帮助解决编译过程中的语法问题,此方法适用于Vue项目中遇到的相关错误,希望能帮助到遇到同样问题的开发者2024-10-10
基于 flexible 的 Vue 组件：Toast -- 显示框效果
这篇文章主要介绍了基于 flexible 的 Vue 组件：Toast -- 显示框效果,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了Vue 浏览器本地存储,LocalStorage 和 SessionStorage 统称为 WebStorage，存储大小一般支持5mb左右，但是不同的浏览器也有区别，具体内容介绍跟随小编一起看看吧2022-04-04
最新评论