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

2023-10-28

问题: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.看效果:
屏幕缩小情况
在这里插入图片描述
放大情况
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

VUE之jspreadsheet电子excel表格实时动态高度设置 的相关文章

  • Excel VBA - 将一行单元格值传递到数组,然后将该数组粘贴到单元格的相对引用

    使用 Excel 2010 VBA 我尝试将恒定范围的单元格 其值重新计算 复制 传递 到数组 然后我尝试将该数组传递到其正下方的新单元格范围 完成此操作后 我想再次将常量范围的新值复制 传递 到数组 并将这些新值传递到我之前传递的值正下方
  • 每次页面重新启动时,Firebase.auth().currentUser 都会变为 null

    我正在使用 firebase 身份验证与 vue 应用程序 每次登录用户后重新启动页面时 currentUser 都会变为 null firebase auth signInWithEmailAndPassword this email t
  • Excel 超链接到带有 ID 或命名锚点的网页位置

    在 Excel 中 我可以创建指向网页的超链接 但是 如果 URL 包含 字符 Excel 始终会将井号转换为空格 连字符 空格 因此链接不再有效 网址http www example com page location http www
  • 当第二个工作表中存在值时删除整行

    我有 2 张纸 sheet1 和sheet2 我在单元格 A3 sheet1 中有一个值 该值不是恒定的 Sheets2 中还有许多文件 我想做的是 当单元格 A3 Sheet1 中的值与 A 列 Sheet2 中的值相同时 它将删除找到该
  • 如何使用Vue3中的ref访问父组件中的子组件方法?

    我正在尝试使用 vue3 和 ref 方法访问父组件中的子方法 但它返回一个错误 未捕获的类型错误 addNewPaper value savePaper 不是函数 下面是我的代码 请指导我哪里错了 子组件
  • 如何使用 VBA 忽略范围内的绿色三角形错误,而不逐个单元循环?

    我有一些正在自动化和分发的大型数据集 我想消除警告用户有关存储为文本的数字的绿色小三角形 我使用了以下代码 但在大量纸张上速度非常慢 Range Cells 1 1 Cells lastrow lColumn Select kill tho
  • 如何创建动态变量名VBA

    我正在尝试根据单元格中的值在 VBA 中创建动态数量的变量 本质上我想要的结果是这样的Team1 Team2 to TeamX 任何帮助是极大的赞赏 Dim i x As Integer Set x Range J4 Value Dim T
  • 如何在 vue 模板中使用 `console.log` 或 `console.error`?

    我有一个 vue 组件
  • 用户完成后关闭 Excel

    任务非常简单 我想从 VB net GUI 打开 Excel 文档 xls 用户将处理 Excel 文件 用户完成后关闭 Excel 文件 我想要VB net代码释放Excel对象 问题是 当用户关闭文件时 Excel 对象仍然可以在任务管
  • 如何以编程方式添加 Vue 3 组件?

    Vue 3 没有 Vue extend 方法 因此这里的示例不起作用 https css tricks com creating vue js component instances programmatically https css t
  • 请参阅使用代号的表

    我在此代码中收到 类型不匹配 错误 With Worksheets Sheet1 Error here my code here End With 我的床单CodeName is sheet1 有人可以帮我消除错误吗 1 按索引参阅表 Wi
  • 如何使用 Excel 公式将一个工作表中的单元格范围引用到另一个工作表?

    我有一个包含工作表 Sheet1 和 Sheet2 的工作表 我试图引用从 Sheet2 到 Sheet1 的一系列单元格 我知道如何引用工作表单元格 例如 Sheet2 A1但我怎样才能对单元格范围做同样的事情 例如A1 F1我试过 Sh
  • MS Excel 对于每个循环:插入行

    我有一个包含 242 行的工作表 我想在每个现有行下面创建一个新行 相反 我的代码在第 1 行下方创建了 242 行 我花了整个下午的时间在 Google 和 Stack Overflow 上 尝试了各种想法 但遇到了同样的问题 这是我的代
  • 遍历 Excel 工作表

    这是我的代码 我是 VBA 新手 所以我不确定如何迭代多个页面 这是我的代码 Dim ws As Worksheet Sub spellCheck For Each ws In ActiveWorkbook Worksheets Cells
  • Vue.js 动态图像路径未加载

    我试图在单个文件组件中动态加载图像 但收到错误消息 指出无法找到该模块 我想我正在尝试做同样的事情这个帖子 https stackoverflow com questions 40491506 vue js dynamic images n
  • 如何隔离 Vuetify 全局样式

    我已经开始在旧的现有项目中将 Vue js 与 Vuetify 结合使用 所以我没有重写所有前端 我只是导入了Vue并替换了一些部分 然后我注意到一个非常意想不到的行为 Vuetify 具有常见类的全局样式 例如 title它不仅影响整个页
  • Pandas - 分割大的Excel文件

    我有一个大约有 500 000 行的 Excel 文件 我想将其拆分为多个 Excel 文件 每个文件有 50 000 行 我想用熊猫来做 这样它会是最快和最简单的 有什么想法如何制作吗 感谢您的帮助 假设您的 Excel 文件只有一个 第
  • 如何从 vue 组件调用 App.vue 中的方法

    我有一个 vue 组件和一个 vue 元素声明 如下所示 Vue component todo item template li This is a todo li methods test function I am getting an
  • 在 Excel 中将多组列相互叠置

    所以我有多组 3 列 每组始终采用相同的列顺序 SKU 销售 日期 我想知道是否有 VBA 脚本或其他方法可以执行以下操作 1 Copy G I 2 Paste into A C 3 Copy J L 4 Paste into A C Un
  • 具有该名称的查询已存在

    所以我想使用 Excel VBA 创建雅虎财经历史数据 csv 下载 的自动查询 我设置了一个函数 以便 Excel 会自动查询股票代码及其开始日期和结束日期 分别为 K1 K2 K3 这是代码 Sub YFIN get YFIN get

随机推荐