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

news2024/12/22 23:04:47

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

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

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

步骤:

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

const mixinJexcel = {
  mounted() {
    this.handleJexcelResize()
    window.addEventListener('resize', this.handleJexcelResize)
  },
  methods: {
    handleJexcelResize() {
      // 窗口高度
      const dynamicHeight = this.$el.querySelector('#jexcel-box-client').clientHeight
      // 头部高度
      const dynamicHeaderHeight = this.$el.querySelector('#header-box-client').clientHeight
      // 底部高度
      const dynamicFooterHeight = dynamicHeight - dynamicHeaderHeight
      // excel动态高度
      const dynamicFooterExcelHeight = dynamicFooterHeight - 20 + 'px'
      this.$nextTick(() => {
        $('.jexcel_content')[0].style.maxHeight = dynamicFooterExcelHeight
      })
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.handleJexcelResize)
  }
}
export default mixinJexcel


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

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

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

相关文章

MySQL行格式 又称 记录格式

行格式 ROW_formate compact 行格式dynamic 行格式 默认compress 行格式 行格式定义 创建表同时指定行格式 create table 表明 ( 列的信息) row_formate行格式名称 修改行格式 alter table 表明 ROW_FORMATE 行格式名称 查看mysql8.0 默认行格式 select innodb_default_row_…

HTTP状态码504(Gateway Timeout)报错原因分析和解决办法

文章目录 504报错原因分析一、用户角度1. 代理服务器问题2. 网络问题 二、网站管理员角度1. 服务器负载过重2. 网关配置问题3. 目标服务器响应慢4. IIS/nginx/apache服务关闭5. 维护或故障6. 数据库的慢处理也会导致504 用户角度可以采取哪些措施解决504错误1. 刷新页面2. 检查…

Viobot定位用于导航

注:此教程以轮式机器人作为一个样例,具体的应用还需要用户自己去做更深入的开发。当然,着并不是唯一的方法,有更好的方法也欢迎大家讲一下自己的思路,有什么说错的地方也欢迎大家批评指正。 路径规划部分我们选用轮式机…

什么是量化交易接口?(股票下单接口)特点(一)

股市领域里的量化交易接口是一种用于与金融市场进行交互的编程接口,它允许开发者通过计算机程序自动执行交易策略。量化交易接口通常提供以下功能: 1. 实时市场数据获取:量化交易接口通常可以提供实时的市场行情数据,包括股票、期…

el-upload 上传附件

案例: <template><div><el-drawertitle"附件信息"v-model"drawer"direction"rtl":before-close"handleClose"size"35%":close-on-click-modal"false":close-on-press-escape"false">…

2. 配置版本

2.1 安装 Python 版本 ① 首先打开 Anaconda 的 Prompt 终端&#xff0c;输入 jupyter kernelspec list&#xff0c;查看已经安装的 python 版本。如下图所示&#xff0c;只有 Anaconda 自带的 python3。 ② 输入 conda create --name py3.6.3 python3.6.3 命令&#xff0c;输…

rman备份数据文件和归档指定不同的filesperset

客户说带库上抓小文件会导致带库紧张。 大部分的备份软件都会用filesperset参数来做备份&#xff0c;这样恢复速度快&#xff0c;而且也有利于带库重复删除。 客户用的plus archivelog的形式&#xff0c;一条命令的做全备&#xff0c;现在就有filesperset不区分dbf和arc的情况…

Java之API详解之Objects类的详细解析

5 Objects类 5.1 概述 tips&#xff1a;了解内容 查看API文档&#xff0c;我们可以看到API文档中关于Objects类的定义如下&#xff1a; Objects类所在包是在java.util包下&#xff0c;因此在使用的时候需要进行导包。并且Objects类是被final修饰的&#xff0c;因此该类不能被继…

跨境电商独立站如何实现全球开店,获得更多流量?

对于独立站卖家来说&#xff0c;针对一个国家搭建一个站点、运营&#xff0c;就已经要花上不少力气了。更别说想要在多个市场售卖了&#xff0c;每个国家不同的货币、语言、定价、付款方式等等就已经够让人头大。 研究显示&#xff0c;40%的人不会从其他语言的网站上购买产品。…

Windows系统配置jar包自启动

目录 一、下载 WinSW.NET4.exe二、创建windows的目录结构三、编写xml配置文件四、检查环境4.1 是否安装jdk4.2 是否存在.net framework4的服务 五、安装 一、下载 WinSW.NET4.exe https://github.com/winsw/winsw/releases 下载完毕改名为jar名&#xff0c;也就是 项目.exe64位…

QT使用QImage做图片切割

#include "mainwindow.h" #include "ui_mainwindow.h" #include <QFileDialog> #include <QDebug>MainWindow::MainWindow(QWidget *parent) :QMainWindow(parent),ui(new Ui::MainWindow) {ui->setupUi(this);// 选择本地图片文件QString …

了解java中的通配符“?“

目录 通配符的作用 先看一段代码 用通配符"?"后,代码变化 结论 通配符上界 通配符下界 对通配符上下界的注释理解及其练习代码 简记: ? 用于在泛型的使用&#xff0c;即为通配符. 在Java中&#xff0c;通配符&#xff08;wildcard&#xff09;主要用于泛型…

11.物联网lwip,网卡原理

一。LWIP协议栈内存管理 1.LWIP内存管理方案 &#xff08;1&#xff09;堆heap 1.灰色为已使用内存 2.黑色为未使用内存 3.紫色为使用后内存 按照某种算法&#xff0c;把数据放在内存块中 &#xff08;2&#xff09;池pool 设置内存池&#xff0c;设置成大小相同的内存块。 2…

想报考pmp,一定得经过培训机构吗?

想要申请PMP考试&#xff0c;必须具备35个学时的PMBOK项目管理学习或培训经验。这是报考的首要条件。 所有符合条件的机构必须具备“PMI”和“中国国际基金会人才交流中心”的授权资质之一即可 首先&#xff0c;在进行英文报名时&#xff0c;需要提供并填写35学时的培训经历。…

WordPress(2)主题安装-菜单-菜单图标

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、上传你的主题文件启用我的是 LoliMeow二、主题设置1.小工具中设置即可在网站右侧显示2.在文章中新建分类用做菜单3.也可在文字的前面添加图标[图标库](http://fa.fangguokeji.cn/)前言 提…

Visual Studio 2022的MFC框架——AfxWinMain全局对象和InitInstance函数

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天我们来重新审视一下Visual Studio 2022下开发工具的MFC框架知识。 在看这篇帖子前&#xff0c;请先看我的另一篇帖子《Visual Studio 2022的MFC框架——应用程序向导》。 当程序调用了CWinApp类的构造…

shell常用脚本

1、Java项目重启脚本 #!/bin/bash# 定义一个函数来结束进程和启动新进程 function restart(){JAR_NAME$1 # jar包LOG_NAME$2 # 日志JVM_ARGS$3 # jvm 参数PID$(ps -ef | grep java | grep ${JAR_NAME} | awk { print $2 })if [[ ! -z "$PID" ]]; thenecho "…

LeetCode(力扣)700. 二叉搜索树中的搜索Python

LeetCode20. 有效的括号 题目链接代码 题目链接 https://leetcode.cn/problems/search-in-a-binary-search-tree/ 代码 递归法 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val #…

进度猫:如何做好项目进度管理?有几点建议

项目目进度管理是在项目实施过程中&#xff0c;对各阶段的进展和项目最终完成的期限进行的管理。目的是保证项目能在满足其时间的约束条件的前提下实现项目的总体目标。 因此为了保证项目能够按时完成&#xff0c;需要制订详尽的可操作性的项目进度管理计划&#xff0c;才可以…

MySQL数据库备份及恢复

数据备份的重要性 1、备份的主要目的是灾难恢复 2、在生产环境中&#xff0c;数据的安全性至关重要 3、任何数据的丢失都可能产生严重的后果 4、造成数据丢失的原因 备份类型(重点) 1、物理备份 数据库备份可以分为物理备份和逻辑备份。物理备份是对数据库操作系统的物…