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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/73954.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

fastapi发布web配置页面

fastapi发布web配置页面 FastAPI 是一个基于 Python 的快速 Web 开发框架,它提供了许多功能来简化 Web 开发过程。其中一个重要的功能是能够轻松地创建 API 文档页面。 在 FastAPI 中,可以使用 OpenAPI 和 Swagger 来创建 API 文档页面。下面是一个简单…

iMazing2.17.3免费版苹果传输电脑端文件数据工具

苹果手机在日常使用过程中可能会遇到iPhone内存不足的情况,遇到这种情况很多用户会选择删除照片来节省存储空间,大量删除照片可能会误删重要照片。另外iPhone可能会遇到自动重启、黑屏等故障。手机突然损坏,数据无法导出,此时备份…

el-table实现纯前端查询列表(不走后端接口)

2023.8.16今天我学习了如何使用前端进行数据的查询,有时候后端会直接返回全部的数据,这时候我们就需要用前端进行查找数据。 首先elementUI有自带el-table查询的组件: Element - The worlds most popular Vue UI framework 我们发现在这段代…

QGraphicsView 实例3地图浏览器

主要介绍Graphics View框架&#xff0c;实现地图的浏览、放大、缩小&#xff0c;以及显示各个位置的视图、场景和地图坐标 效果图: mapwidget.h #ifndef MAPWIDGET_H #define MAPWIDGET_H #include <QLabel> #include <QMouseEvent> #include <QGraphicsView&…

飞天使-k8s简单搭建

文章目录 k8s概念安装部署-第一版无密钥配置与hosts与关闭swap开启ipv4转发安装前启用脚本开启ip_vs安装指定版本docker 安装kubeadm kubectl kubelet,此部分为基础构建模版 k8s一主一worker节点部署k8s三个master部署,如果负载均衡keepalived 不可用&#xff0c;可以用单节点做…

React Native文本添加下划线

import { StyleSheet } from react-nativeconst styles StyleSheet.create({mExchangeCopyText: {fontWeight: bold, color: #1677ff, textDecorationLine: underline} })export default styles

【hive】hive中row_number() rank() dense_rank()的用法

hive中row_number() rank() dense_rank()的用法 一、函数说明 主要是配合over()窗口函数来使用的&#xff0c;通过over(partition by order by )来反映统计值的记录。 rank() over()是跳跃排序&#xff0c;有两个第二名时接下来就是第四名(同样是在各个分组内)dense_rank() …

RocketMQ 5.0 架构解析:如何基于云原生架构支撑多元化场景

作者&#xff1a;隆基 本文将从技术角度了解 RocketMQ 的云原生架构&#xff0c;了解 RocketMQ 如何基于一套统一的架构支撑多元化的场景。 文章主要包含三部分内容。首先介绍 RocketMQ 5.0 的核心概念和架构概览&#xff1b;然后从集群角度出发&#xff0c;从宏观视角学习 R…

图数据库_Neo4j中文版_Centos7.9安装Neo4j社区版3.5.9_基于jdk1.8---Neo4j图数据库工作笔记0012

由于我们在国内使用啊,具体还是要用中文版滴,找了好久这个neo4j,原来还是有中文版的, https://we-yun.com/doc/neo4j-chs/ 中文版下载地址在这里: 所有版本都在这里了,需要哪个自己去下载就可以了,要注意下载以后,参考: https://we-yun.com/blog/prod-56.html 在这个位置下载…

Hlang--用Python写个编程语言-函数与基本数据结构实现

文章目录 前言语法表述解析器修改词法解析函数节点函数节点解析List的解析实现解释器节点函数操作String和List处理总结前言 okey,经过一段时间的努力,接下来要实现的是函数。当然还有对应的基本数据结构,那么之后的话,我们的工作就开始进一步转换了。 那么在这块我们要实…

学习笔记230802---vue项目手写css样式二次悬浮状态问题

问题描述 今天在开发页面时&#xff0c;遇到一个很棘手的问题&#xff0c;需求页面做一个卡片效果&#xff0c;鼠标悬浮在卡片上&#xff0c;出现一个选项卡&#xff0c;鼠标悬浮每一项&#xff0c;文字和图标都要变成选中状态的颜色。选项卡的每一项都是通过数据循环渲染来的…

vue技术学习

vue快速入门 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>vue快速入门</title> </head> <body> <!--老师解读 1. div元素不是必须的&#xff0c;也可以是其它元素&#xff0…