首页 > 其他分享 >el-table 根据窗框大小 高度变化 固定表头

el-table 根据窗框大小 高度变化 固定表头

时间:2024-03-15 15:45:27浏览次数:27  
标签:el tableHeight 高度 innerHeight 表头 window table 100

 

 <el-table :data="tableData" style="width: 100%" :height="tableHeight">
        <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      </el-table>

 

created() {
    // 100是表格外其它布局占的高度,这个数值根据自己实际情况修改
    this.tableHeight = window.innerHeight - 100
  }

  mounted() {
    // 设置表格高度
    this.tableHeight = window.innerHeight - 100
    // / 监听浏览器窗口变化,动态计算表格高度,
    window.onresize = () => {
      return (() => {
        this.tableHeight = window.innerHeight - 100
      })()
    }
  }

 

标签:el,tableHeight,高度,innerHeight,表头,window,table,100
From: https://www.cnblogs.com/dianzan/p/18075574

相关文章

  • 如何提取企业年报中表格的数据?-使用camelot库
     参考资料链接:Python解析pdf表格|Camelot库(完胜)VSPdfplumber库一、表格在单独一页的情况importcamelotpdf=r"C:\Users\ziyao\Desktop\pythonforwork\办公\work1\2018年10月全国城市空气质量报告.pdf"table=camelot.read_pdf(pdf,pages='11')print(table)#查看该......
  • el-menu 点击有子元素的菜单项字体变色
    效果图: el-menu组件只是在点击跟元素时,根元素变色,如图:.el-menu-item.is-active{background-color:rgb(56,96,226)!important;color:white;} 点击有子元素的菜单时不会变色,下面可以实现:(点击有子元素菜单时,会有一个class属性is-opened,所以给其编辑样式即......
  • ELK日志处理部署笔记-2
    logstash概述什么是logstash-是一个数据采集、加工处理以及传输的工具特点-所有类型的数据集中处理-不同模式和格式数据的正常化-自定义日志格式的迅速扩展-为自定义数据源轻松添加插件为什么使用logstash将日志转化为json使elasticasearch可读下载#logstash的配置文件......
  • Qt opengl和qlabel的update同时更新,内存泄漏问题
    工作要做一个类似播放器的软件,但是需要自己解码,然后可能多张图像合成再显示,所以不能直接用QT播放视频的模块,就用了QOpenGLWidget来渲染。后面发现内存一直在涨,一直以为是自己的原因,因为解码分配的内存挺多的,折腾了快一个月了,后面发现是update频繁更新导致;如下代码,XVideoWidget继......
  • LoRA及其变体概述:LoRA, DoRA, AdaLoRA, Delta-LoRA
    LoRA可以说是针对特定任务高效训练大型语言模型的重大突破。它被广泛应用于许多应用中。在本文中,我们将解释LoRA本身的基本概念,然后介绍一些以不同的方式改进LoRA的功能的变体,包括LoRA+、VeRA、LoRA-fa、LoRA-drop、AdaLoRA、DoRA和Delta-LoRA。Lora低秩自适应(Low-Rankadapt......
  • 1秒AI出图的时代来了!Stable Diffusion WebUI Forge+SVD整合包
    速度快N倍!StableDiffusionWebUIForge整合包要说今年绘画圈最大的新秀那妥妥的就StableDiffution本次更新的StableDiffusionWebUIForge整合包+SVD比之前推送的更加智能、快速和简单有多简单呢?这么说吧之前的版本需要初中生级别现在的的幕后网整合包加强版小......
  • 常用Shell脚本 - 开发环境安装
    功能描述在AmazonLinux上快速安装开发环境,包括Python3.11.8,Nodejs,npm,yarn,GO工具。#!/bin/bash#@Author:LanShiyun#@CreateTime:2024/3/15#@FileName:install_development_env.sh#@Version:1.0#@Software:VSCode#@UpdateTime:2024/3/15#......
  • 常用Shell脚本 - Docker and Docker-compose 安装
    功能描述在AmazonLinux上自动安装DockerandDocker-compose#!/bin/bash#@Author:LanShiyun#@CreateTime:2024/3/15#@FileName:install_docker_4_aws_.sh#@Version:1.0#@Software:VSCode#@UpdateTime:2024/3/15#@UpdateBy:LanShiyun#@Des......
  • React Antd 的ProTable 如何默认展开树结构
    1、defaultExpandAllRows:true  defaultExpandAllRows设为true就可以了<ProTablerowKey="key"columns={rightBomColumnArr}dataSource={rightBomTableTreeData}......
  • vue3 批量导入excel表
    安装xlxs插件npminstallxlsx//安装import*asXLSXfrom"xlsx";//引入 批量导入里面引用了element-plus的loading和弹窗,不需要的可以去掉letexcelloading;constimportExcel=(e)=>{//导入excelvarfile=e.target.files[0];if(......