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

问题: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为整体页面idconst dynamicHeight = this.$el.querySelector('#jexcel-box-client').clientHeight// 头部高度;header-box-client为头部idconst dynamicHeaderHeight = this.$el.querySelector('#header-box-client').clientHeight// 底部高度const dynamicFooterHeight = dynamicHeight - dynamicHeaderHeightthis.dynamicFooterHeight = dynamicFooterHeight - 20 + 'px'}},destroyed() {window.removeEventListener('resize', this.handleJexcelResize)}
}
export default mixinJexcel

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

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

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

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

相关文章

“分布式”与“集群”初学者的技术总结

一、“分布式”与“集群”的解释: 分布式:把一个囊肿的系统分成无数个单独可运行的功能模块 集群: 把相同的项目复制进行多次部署(可以是一台服务器多次部署,例如使用8080部署一个,8081部署一个&#xff0c…

Unity 物体的运动之跟随鼠标

你想让鼠标点击哪里,你的运动的对象就运动到哪里吗? Please follow me ! 首先,你要先添加一个Plane ,以及你的围墙,你的移动的物体 想要实现跟随鼠标移动,我们先创建一个脚本 using System.Collections; using Syst…

html学习第2篇---标签(1)

html学习第2篇---标签 1、标题标签h1---h62、段落标签p3、换行标签br4、文本格式化标签5、div标签和span标签6、图像标签img6.1、图像属性6.2、相对路径、绝对路径 7、超链接标签a7.1、属性7.2、分类 8、注释标签和特殊字符8.1、注释8.2、特殊字符 1、标题标签h1—h6 为了使网…

SpringBoot案例-文件上传

目录 简介 文件上传前端页面三要素 服务端接收文件 小结 本地储存 实现 代码优化 小结 阿里云OSS 阿里云 阿里云OSS 使用第三方服务--通用思路 准备工作 参照官方SDK代码,编写入门程序 集成使用 阿里云OSS-使用步骤 阿里云OSS使用步骤 参照SDK编写入…

【C++11】future和async等

C11的future和async等关键字 1.async和future的概念 std::async 和 std::future 是 C11 引入的标准库功能,用于实现异步编程,使得在多线程环境中更容易处理并行任务。它们可以帮助你在不同线程中执行函数,并且能够方便地获取函数的结果。 在…

两个步骤让图片动起来!

在当今数字时代,动态图片已经成为了网页设计和移动应用设计的标配之一。动态图片能够吸引用户的注意力,提高用户体验和页面交互性。那么,图片怎么动起来?有什么好用的方法呢?下面我们来一起探讨一下。 通常我们认知的动…

java八股文面试[JVM]——JVM内存结构2

知识来源: 【2023年面试】JVM内存模型如何分配的_哔哩哔哩_bilibili

2023中国算力大会 | 中科驭数加入DPU推进计划,探讨DPU如何激活算网融合新基建

8月18日,由工业和信息化部、宁夏回族自治区人民政府共同主办的2023中国算力大会在宁夏银川隆重召开。作为DPU算力基础设施领军企业,中科驭数产品运营部副总经理曹辉受邀在中国信通院承办的算网融合分论坛发表主题演讲《释放极致算力 DPU激活算网融合新基…

Vue使用Element的表格Table显示树形数据,多选框全选无法选中全部节点

使用Element的组件Table表格,当使用树形数据再配合上多选框,如下: 会出现一种问题,点击左上方全选,只能够选中一级树节点,子节点无法被选中,如图所示: 想要实现点击全选就选中所有的…

嵌入式学习之linux

今天,主要对linux文件操作原理进行了学习,主要学习的内容就是对linux文件操作原理进行理解。写的代码如下:

CSS3盒模型+flex

1.盒模型 标准盒模型: wwidthpaddingborderhheightpaddingborder 怪异盒模型(ie盒模型) wwidth包含了(paddingborder)hheight包含了(paddingborder) 2.CSS3弹性盒(重点新版弹性盒) 弹性盒: 设置为弹性盒后,父元素为容器,子元素为项目弹性盒中存在两根轴,默认水平为主轴,垂…

成集云 | 畅捷通T+cloud连接器自动同步财务费用单至畅捷通 | 解决方案

源系统成集云目标系统 方案介绍 财务管理作为企业管理中重要的组成部分,在企业的发展和成长中扮演着重要角色,成集云以钉钉费用单OA审批与畅捷通TCloud系统为例,与钉钉连接器深度融合,通过数据处理和字段匹配实现了费用…

6.oracle中listagg函数使用

1. 作用 可以实现行转列,将多列数据聚合为一列,实现数据的压缩 2. 语法 listagg(measure_expr,delimiter) within group ( order by order_by_clause); 解释: measure_expr可以是基于任何列的表达式 delimiter分隔符&#xff0c…

线性代数的学习和整理8:行列式相关

目录 1 从2元一次方程组求解说起 1.1 直接用方程组消元法求解 1.2 有没有其他方法呢?有:比如2阶行列式方法 1.3 3阶行列式 2 行列式的定义 2.1 矩阵里的方阵 2.2 行列式定义:返回值为标量的一个函数 2.3 行列式的计算公式 2.4 克拉…

打印所有声母,韵母组合汉语拼音并显示到表格中

最近辅导孩子学习语文:声母,韵母。现在将其组合起来。打印所有拼音集合 以下是整理出的有关拼音的内容。 声母(23个): b、p、m、f、d、t、n、l、g、k、h、j、q、x、zh、ch、sh、r、z、c、s、y、w。 韵母&#xff0…

《华为认证》交换堆叠介绍

定义 堆叠是指将多台支持堆叠特性的交换机通过堆叠线缆连接在一起,从逻辑上变成一台交换设备,作为一个整体参与数据转发。如图1所示,SwitchA与SwitchB通过堆叠线缆连接后组成堆叠系统。 图1 堆叠示意图 应用场景 提高可靠性 堆叠系统多台成…

python连接PostgreSQL 数据库

执行如下命令安装 pip3 install psycopg2 python代码 Author: tkhywang 2810248865qq.com Date: 2023-08-21 11:42:17 LastEditors: tkhywang 2810248865qq.com LastEditTime: 2023-08-21 11:51:56 FilePath: \PythonProject02\PostgreSQL 数据库.py Description: 这是默认设置…

用户端Web自动化测试_L3

目录: 浏览器复用Cookie 复用pageobject设计模式异常自动截图测试用例流程设计电子商务产品实战 1.浏览器复用 复用浏览器简介 为什么要学习复用浏览器? 自动化测试过程中,存在人为介入场景提高调试UI自动化测试脚本效率 复用已有浏览…

docker的资源控制及docker数据管理

文章目录 docker的资源控制及docker数据管理一.docker的资源控制1.CPU 资源控制1.1 资源控制工具1.2 cgroups有四大功能1.3 设置CPU使用率上限1.4 进行CPU压力测试1.5 设置50%的比例分配CPU使用时间上限1.6 设置CPU资源占用比(设置多个容器时才有效)1.6.…

Docker常用操作命令(二)

Docker常用操作命令(二) 11、进入容器 docker exec -it 容器名称or容器ID /bin/bash [rootzch01 ~]# docker exec -it 973ff3caff19 /bin/bash 退出容器 root973ff3caff19:/# exit 12、查看容器中的进程 docker top 容器名称or容器ID [rootzch01 ~]# docker top 973ff3c…