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,代码中只给下面的表格写多选框了

相关推荐
宿6741 天前
vue3-env环境
前端·vue.js
汉堡大王95271 天前
Vue 3 + TS + Element Plus 实战:如何从零搭建企业级违章记录管理 SaaS 前端
前端·javascript·vue.js
To_OC1 天前
绕开层层 props 搬运:我把 useContext 和自定义 Hook 跑通了
前端·react.js·前端框架
障碍的枫子1 天前
Vue组件导出&渲染
前端·javascript·vue.js
Sterting1 天前
组件通信:Props 与 Emit
前端·vue.js
喵个咪1 天前
GoWind Shop 架构剖析:一个 REST 请求穿越三服务 BFF 的七环链路
vue.js·后端·go
喵个咪1 天前
GoWind Shop 安全设计:JWT 鉴权、Ent 行级隔离、防篡改审计与四个真实漏洞修复
vue.js·后端·go
喵个咪1 天前
GoWind Shop:一个 proto 文件如何生成后端、前端、文档、校验六路代码
vue.js·后端·go
喵个咪1 天前
GoWind Shop 出海实战:多语言商品内容怎么存、怎么录、怎么按 locale 取
vue.js·后端·go
No Silver Bullet1 天前
Vue进阶(贰幺叁)vue.config.js 中 productionSourceMap 作用详解
前端·javascript·vue.js