el-table 多个表格切换多选框显示bug

今天写了个功能,点击左侧的树做判断,一级树节点显示系统页面,二级树节点显示数据库页面,三级树节点显示表页面。

数据库页面和表页面分别有2个el-table ,上面的没有多选框,下面的有多选框

现在出现bug,在点击树节点,代码:

// 点击节点

nodeClick(data) {

if(data.type == "datasource" || data.type == "table" || data.type == "compony"){

this.tableType = data.type;

if(this.tableType == "compony"){

this.getComponyInfo(data)

}

if(this.tableType == "datasource"){

this.sourceTableTableQuery.datasourceId = data.id

this.getDatasourceInfo(data.id)

}

if(this.tableType == "table"){

this.sourceTableColumnQuery.datasourceId = data.datasourceId

this.sourceTableColumnQuery.tableName = data.label

this.getTableInfo(data)

}

}

},

在datasource(库页面)和table(表页面)之间切换,多选框一会在上,一会在下,

解决方法,给有多选框的表格添加 :key="Math.random()" 或者 :key="1" :key="2" 写死也行

记住是给所有有多选框的表格加,或者给所有表格加也行,加key是好事,可以运行快

我还发现只给其中一个有多选框的表格加又出现这种bug,代码中只给下面的表格写多选框了

相关推荐
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ThemeClock(主题时钟)
前端·javascript·css·vue.js·前端框架·tailwindcss
浏览器API调用工程师_Taylor2 小时前
AOP魔法:一招实现登录弹窗的全局拦截与动态处理
前端·javascript·vue.js
一个水瓶座程序猿.2 小时前
Vue3 中使用 Vueuse
前端·javascript·vue.js
网络点点滴3 小时前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
paopaokaka_luck3 小时前
基于SpringBoot+Vue的酒类仓储管理系统
数据库·vue.js·spring boot·后端·小程序
雲墨款哥4 小时前
Vue3.0 项目初始化及 Element Plus 配置实战
前端·vue.js
前端小饭桌4 小时前
关于 Vue 3 的 ref,这些细节你了解了多少?
前端·vue.js
光影少年4 小时前
vue3.0性能提升主要通过那几方面体现的?
前端·vue.js
江城开朗的豌豆5 小时前
路由守卫:你的Vue路由‘保安’,全局把关还是局部盯梢?
前端·javascript·vue.js
Jinxiansen02115 小时前
Vue 3 响应式核心源码详解(基于 @vue/reactivity)
前端·javascript·vue.js