VUE之jspreadsheet电子excel表格动态高度设置

news2025/1/12 18:10:15

问题:excel电子表格在不同屏幕大小下横向滚动条会被遮挡

排查原因:由于excel高度固定导致

解决方法:设计页面较多,所以封装公共方法

步骤:

1.使用混入封装动态设置excel高度方法:

const mixinJexcel = {
  data() {
    return {
      dynamicFooterHeight: ''
    }
  },
  mounted() {
    this.handleJexcelResize()
    window.addEventListener('resize', this.handleJexcelResize)
    //设置excel高度
    this.options.tableHeight = this.dynamicFooterHeight
  },
  methods: {
    handleJexcelResize() {
      // 窗口高度;jexcel-box-client为整体页面id
      const dynamicHeight = this.$el.querySelector('#jexcel-box-client').clientHeight
      // 头部高度;header-box-client为头部id
      const dynamicHeaderHeight = this.$el.querySelector('#header-box-client').clientHeight
       // 底部高度
      const dynamicFooterHeight = dynamicHeight - dynamicHeaderHeight
     
      this.dynamicFooterHeight = dynamicFooterHeight - 20 + 'px'
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.handleJexcelResize)
  }
}
export default mixinJexcel

2.组件中直接引入即可
3.看效果:
屏幕缩小情况
在这里插入图片描述
放大情况
在这里插入图片描述

注意:1.不能以css方式设置excel高度;
2. 如果手动去缩放屏幕则需要刷新页面才能适配高度(首次进入页面会自动计高度进行适配)

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

达梦数据库分区表介绍

概述 本文将对达梦数据库分区表概念、创建、维护进行介绍。 1.分区表概念 1.1 分区表使用场景 近几年,随着移动支付快速发展,银行交易系统中【移动小微支付场景】使用越来越多,系统中流水账单表数据量巨大,往往上TB。 为了提高…

java八股文面试[JVM]——双亲委派模型

1.当AppClassLoader去加载一个class时,它首先不会自己去尝试加载这个类,而是把类加载请求委托给父加载器ExtClassLoader去完成。 2.当ExtClassLoader去加载一个class时,它首先也不会去尝试加载这个类,而是把类加载请求委托给父加载…

【esp32】GPIO引脚功能使用集合

本文主要介绍 esp32 这块芯片的GPIO 口功能使用以及软硬件设计注意事项 📋 个人简介 💖 作者简介:大家好,我是喜欢记录零碎知识点的小菜鸟。😎📝 个人主页:欢迎访问我的 Ethernet_Comm 博客主页…

uniapp 安卓平台签名证书(.keystore)生成

安装JRE环境 下载jre安装包:https://www.oracle.com/java/technologies/downloads/#java8安装jre安装包时,记录安装目录(例:C:\Program Files\Java\jdk-20)打开命令行(cmd),将JRE安装路径添加到系统环境变量 d: se…

Linux操作系统--linux环境搭建(3)

在上一小节中,我们搭建好了虚拟机,那么接下来,我们在虚拟机上安装我们的Linux操作系统。 1.CentOS安装 下面我们开始在我们创建好的虚拟机上安装CentOS操作系统。流程如下所示: (1).Vmware要求如果需要启动一台虚拟机,需要确保你的电脑主机必须要支持虚拟化的技术。如何…

SLS筛选推送链

* | select "client_ip", "url", count(*) as "number" from log group by "client_ip", "url" order by "number" desc

记录一次presto sql执行报错 Error executing query的解决办法

在执行presto sql 时报错截图如下: 查看后台执行报错日志: java.sql.SQLException: Error executing query at com.facebook.presto.jdbc.PrestoStatement.internalExecute(PrestoStatement.java:307) at com.facebook.presto.jdbc.PrestoStatement.exe…

Alibaba Nacos Authentication Bypass Vulnerability

文章目录 Nacos 提供了四大功能服务发现和服务健康检查动态配置管理动态域名解析服务服务和元数据管理 Alibaba Nacos Authentication Bypass Vulnerability Alibaba Nacos(Dynamic Naming and Configuration Service)是由阿里巴巴公司维护的一款开源项目,易于构建云…

centos7设置静态IP地址

安装完成系统后,接下来就是配置静态IP地址,如下: 进入编辑模式vim /etc/sysconfig/network-scripts/ifcfg-ens33 文件名不一定是ifcfg-ens33,到/etc/sysconfig/network-scripts下面找下是哪个文件 修改 : BOOTPROTO…

Ansible 创建逻辑卷

创建一个名为/ansible/lv.yml 的 playbook ,它在所有受管节点上运行以执行下列任务: 创建符合以下要求的逻辑卷: 逻辑卷创建在 research 卷组中 逻辑卷名称为 data 逻辑卷大小为 1500 MiB 使用 ext4 文件系统格式化逻辑卷 如果无法创建请求的…

keepalived + lvs (DR)

目录 一、概念 二、实验流程命令 三、实验的目的 四、实验步骤 一、概念 Keepalived和LVS(Linux Virtual Server)可以结合使用来实现双机热备和负载均衡。 Keepalived负责监控主备服务器的可用性,并在主服务器发生故障时,将…

盈利能力低于预期,财报发布后股价暴跌97%,达达集团财务前景堪忧

来源:猛兽财经 作者:猛兽财经 财报公布后,达达集团的股价就像坐过山车一样 2023年8月15日美股收盘后,达达集团(DADA)公布了2023年第二季度财务财报,在财报公布后的短短几天内,达达集…

优先级队列—数据结构

文章目录 1.堆1.1概念1.2性质1.3存储方式1.4堆向下调整创建大根堆1.5堆的插入和删除1.6 2.PriorityQueue2.1定义2.2性质2.3 PriorityQueue常用接口介绍2.4方法的使用2.5对复杂类型的PriorityQueue的使用 3.堆的应用3.1PriorityQueue的实现3.2Top-k问题3.3堆排序 4.经典习题 1.堆…

【校招VIP】专业课考点之死锁检测与恢复

考点介绍: 根据不少同学的面试反馈,最近阿里和字节跳动面试时面试官都问到了死锁问题。如字节跳动考察的问题是:什么是线程死锁?死锁如何产生?死锁如何检测与恢复?其产生的原理与对应的解决方案都是重点考察…

跨境电商服务商哪家靠谱,要怎么选择?

随着全球市场的不断扩大,跨境电商已成为众多企业进军国际贸易的重要途径。然而,跨境电商涉及的法规、市场策略、国际物流等方面的知识相当复杂,因此,寻找一个优质的跨境电商培训中心成为了企业不可或缺的需求。本文将为您介绍如何…

什么气传导蓝牙耳机好?气传导耳机最新品牌推荐

​传统入耳式耳机佩戴着容易滑落,戴不稳,久戴耳朵酸痛等问题,气传导耳机的出现就避免了这些问题的发生,我来推荐几款市面上热销火爆且使用感不错的气传导耳机给到大家,来看看吧! 一、南卡00压开放式耳机&a…

汉诺塔问题--夏令营

题目 tips: 1.本题只用多试几次,由数据推导规律即可 2.汉诺塔问题分析 这里的递归函数是(n,a,b,c)指n个盘子从a移到c,且凭借b 递归边界是n1 原始思想:要想把n个盘子从a移到c,若n1则直接move a到c n>…

Web3.0的五大趋势,你是否已经了解?

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

美格智能亮相elexcon 2023:边缘AI算力,赋能物联网终端创新升级

8月23~25日,elexcon 2023深圳国际电子展在深圳会展中心(福田)盛大举办。本届展会聚焦“嵌入式与AIoT展”“电源与储能展”“SiP与先进封装展”三大板块,规模达40000㎡,共计600家全球嵌入式产业链厂商齐聚现场&#xff…

ChatGPT解锁亲子互动新方式,10种方法教你带孩子一起探索AI世界

与孩子们一起进入AI的世界,点击一下按钮就可以得到你所有问题的答案。 ChatGPT是当下的热门话题,它正在以风暴之势席卷人工智能的世界!大多数宝妈和宝爸可能已经听说过它,但有许多人会觉得它与自己日常并无关联。事实上&#xf…