ElementUi tab组件切换导致echarts宽度变窄问题

2023-11-18

解决tab组件变成100px的问题
使用echarts实例自带的resize()方法

<el-card shadow="always" style="height: calc(100vh - 260px);">
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="事业部各部门人数" name="first" :lazy="true">
              <DelayRateBarChart1 :treeId="treeId" ref="first"></DelayRateBarChart1>
            </el-tab-pane>
            <el-tab-pane label="事业部人员地区分布" name="second" :lazy="true">
              <DelayRateBarChart2 :treeId="treeId" ref="second"></DelayRateBarChart2>
            </el-tab-pane>
            <el-tab-pane label="事业部人员司龄分析" name="third" :lazy="true">
              <DelayRateBarChart3 :treeId="treeId" ref="third"></DelayRateBarChart3>
            </el-tab-pane>
          </el-tabs>
        </el-card>
   //tabs图表切换
    handleClick(tab, event) {
      // console.log(tab.name);
      this.$nextTick(() => {
        this.$refs[tab.name].resize()
      })
    },
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

ElementUi tab组件切换导致echarts宽度变窄问题 的相关文章

随机推荐

  • spring cloud框架介绍

    直接引用经典文章来源 https blog csdn net w05980598 article details 79007194什么是微服务 微服务的概念源于2014年3月Martin Fowler所写的一篇文章 Microservice
  • malloc申请二维数组的四种方法

    方法一 二级指针 include
  • 动漫数据推荐系统

    Simple TfidfVectorizer and CountVectorizer recommendation system for beginner 简单的TfidfVectorizer和CountVectorizer推荐系统 适用于
  • stm32单片机之外部脉冲捕获例程

    stm32单片机之外部脉冲捕获例程 定时器通道1来捕获外部脉冲 并且当脉冲到来时 通过HAL库的回调函数来处理这个事件 include stm32f4xx hal h 定义一个TIM HandleTypeDef结构体 TIM HandleT
  • 字符串长度检查

  • docker安装mysql 及 ls: cannot access ‘/docker-entrypoint-initdb.d/‘: Operation not permitted问题解决

    目录 查看本地镜像 搜索可用mysql 拉取最新版本 运行镜像 查看进程是否正常 问题解决 查看本地镜像 查看本地是否已经有mysql镜像了 docker images grep mysql 正常此步骤不会有返回结果 搜索可用mysql d
  • kaggle数据挖掘竞赛初步--Titanic<随机森林&特征重要性>

    完整代码 https github com cindycindyhi kaggle Titanic 特征工程系列 Titanic系列之原始数据分析和数据处理 Titanic系列之数据变换 Titanic系列之派生属性 维归约 之前的三篇博文
  • 模式识别学习笔记之一:模式识别的步骤及相关概念

    1 信息获取 2 预处理 对获取信号进行规范化等各种处理 3 特征提取与选择 将识别样本构造成便于比较 分析的描述量即特征向量 4 分类器设计 由训练过程将训练样本提供的信息变为判别事物的判别函数 5 分类决策 对样本特征分量按判别函数的计
  • 学习二叉树必须要了解的各种遍历方式及节点统计

    哈喽 大家好 我是小林 今天给大家分享一下对二叉树的一些常规操作 愿我们都能保持一颗向上的心 目录 一 前序遍历 二 中序遍历 三 后序遍历 四 统计节点个数 五 统计叶子节点个数 六 第K层的节点个数 七 二叉树的深度 八 查找值为x的节
  • bash 刷题leetcode

    题目一 给定一个文本文件 file txt 请只打印这个文件中的第十行 示例 假设 file txt 有如下内容 Line 1 Line 2 Line 3 Line 4 Line 5 Line 6 Line 7 Line 8 Line 9
  • Revit更改用户选择

    private void ChangeSelection Document document UIDocument uidoc new UIDocument document Autodesk Revit UI Selection SelE
  • 2014 奇虎360 笔试主观题

    1 在审计某一开源项目的代码时 假设有下面一个foo 子函数的实现 从安全的角度看 会存在安全漏洞吗 有的话 请 1 描述漏洞细节 2 说明可以利用的方法 3 还有该怎么修补漏洞 没有的话 也请说明为什么 int foo void func
  • QT.setStyleSheet()用法

    1 基本用法 textViewer gt setStyleSheet background color 00FF00 背景颜色 color FF0000 前景色 color rgb 255 0 0 color rgbd 255 0 0 0
  • selenium+java实现web自动化例子

    简单记录 有不正确的地方请指出 selenium java可以实现对web页面的自动化控制 在公司内部比较稳定 页面迭代较少的后台web系统使用时非常有效 web自动化收益最大化的情况 1 多更新于后端 前端页面迭代较少 2 在日常迭代中页
  • C++vector容器

    vector容器被称为动态数组 也被称为向量 它与array容器的区别是 array是静态数组 动态扩展 并不是在原空间之后续接新空间 而是找更大的内存空间 然后将原数据拷贝新空间 释放原空间 at 函数 返回对矢量中指定位置的元素的引用
  • 第零章 内核网络相关配置选项--基于Linux 3.10

    Kconfig选项 packet protocol 被直接和网络设备通信的应用程序使用 其没有使用内核的其它协议 像tcpdump支持需要使能该选项 af packet lt gt Packet socket 支持PF PACKET套接字
  • kubeadm构建(Calico+Dashboard+Containerd)

    文章目录 前言 一 环境 二 部署容器网络 CNI master操作 1 下载yamll 2 修改yaml 3 部署 三 部署 Dashboard 1 下载yaml 2 修改yaml 3 部署 4 创建管理员 四 切换容器引擎为Contai
  • 区块链开发之Solidity编程基础(一)

    Solidy是当前编写智能合约的主流语言 概要 sol文件结构 编译开发 引入其他文件 注释 代码注释 文档注释 合约 状态变量 类型 值类型 1 布尔类型 2 整型 3 地址 4 定长字节数组 5 有理数和整型字面量 6 枚举类型 7 函
  • controller与servlet的区别

    理解1 你可以理解为 Spring MVC是基于servlet的 它有一个DispatherServlet 然后它负责处理请求 并且调用了你的controller 打一个比方 web网站是应用程序么 你可以说浏览器是一个应用程序 而web网
  • ElementUi tab组件切换导致echarts宽度变窄问题

    解决tab组件变成100px的问题 使用echarts实例自带的resize 方法