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

相关推荐
Passion不晚2 小时前
Vue vs React vs Angular 的对比和选择
vue.js·react.js·前端框架·angular.js
Jiaberrr8 小时前
前端实战:使用JS和Canvas实现运算图形验证码(uniapp、微信小程序同样可用)
前端·javascript·vue.js·微信小程序·uni-app
LvManBa9 小时前
Vue学习记录之六(组件实战及BEM框架了解)
vue.js·学习·rust
200不是二百9 小时前
Vuex详解
前端·javascript·vue.js
LvManBa9 小时前
Vue学习记录之三(ref全家桶)
javascript·vue.js·学习
深情废杨杨9 小时前
前端vue-父传子
前端·javascript·vue.js
工业互联网专业10 小时前
毕业设计选题:基于springboot+vue+uniapp的驾校报名小程序
vue.js·spring boot·小程序·uni-app·毕业设计·源码·课程设计
J不A秃V头A10 小时前
Vue3:编写一个插件(进阶)
前端·vue.js
司篂篂11 小时前
axios二次封装
前端·javascript·vue.js
姚*鸿的博客11 小时前
pinia在vue3中的使用
前端·javascript·vue.js