首页 > 其他分享 >【vue】,封装的table组件,table表格超出高度自适应滚动效果,设置页面全局统一自适应高度

【vue】,封装的table组件,table表格超出高度自适应滚动效果,设置页面全局统一自适应高度

时间:2023-12-29 18:33:39浏览次数:32  
标签:el 表格 高度 value 适应 table 页面

需求背景:为了使后台页面的 table 列表页面始终保持统一的高度,无论我们的列表数据有多少都只占一个屏幕的高度,
如果 table 表格的数据太多,只滚动table 表格的数据,页面高度保持不变;

使用 window.onresize 监听浏览器的高度:

// tableHeight: 为 el-table 绑定的 height 高度;
onMounted(() => {
  // 设置表格初始高度为 innerHeight-offsetTop - 表格底部与浏览器底部距离:68 + 顶部固定高度:50
  tableHeight.value = window.innerHeight - elTableRef.value.$el.offsetTop - 118;
  // 监听浏览器高度变化
  window.onresize = () => {
    tableHeight.value =
      window.innerHeight - elTableRef.value.$el.offsetTop - 118;
  };
});


注意的点是:
  1、我们 table 表格距离底部的距离 elTableRef.value.$el.offsetTop;
  2、如果我们顶部有固定高度 (有绑定 fixed 属性),还需要另外减去这个 fixed盒子属性的高度;

标签:el,表格,高度,value,适应,table,页面
From: https://www.cnblogs.com/leng12/p/17935510.html

相关文章

  • 定制栏目 --- 关于el-table 的显示隐藏的列
      <el-button type="primary"plainicon="el-icon-s-operation"@click="columsVisible=true":loading="handleTotalChecked">定制栏目</el-button> 需要的页面引入组件:<divclass="tableList">    ......
  • C++ Qt开发:SqlRelationalTable关联表组件
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍SqlRelationalTable关联表组件的常用方法及灵活运用。在上一篇文章中详细介绍了SqlTableModle组......
  • DockerCompose中重启某个服务时提示: (iptables failed: iptables --wait -t nat -A D
    场景DockerCompose修改某个服务的配置(添加或编辑端口号映射)后如何重启单个服务使其生效:https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/134666413除了以上重启某个服务的方式外。基于docker-compose的方式,如果只是要单纯的重启某个服务,则可以通过docker-compo......
  • zb-table自定义行样式
    h5开发中要展示个表格,找了一圈感觉zb-table比较合适,就用了这个。但自定义行样式一直找不到文章,网上写的都是el-table的自定义样式,误导了一些时间看zb-table的源码cellStyle是写在style里的,是个数组包含了个对象,所以return的时候要返回一个对象,setCellStyle({row,column,row......
  • table表格 组件
     <template> <div>  <BaseTable   :searchConfig="searchConfig"   :operateBtnConfig="operateBtn"   :tableData="tableData"   :tableConfig="tableConfig"   :pagination="pagin......
  • Cisco ASAv 9.20.2 发布 - 思科自适应安全虚拟设备 (ASAv)
    CiscoASAv9.20.2发布-体验思科上一代防火墙思科自适应安全虚拟设备(ASAv)作者主页:sysin.org思科自适应安全虚拟设备(ASAv):跨物理和虚拟环境扩展安全性思科自适应安全虚拟设备(ASAv)是一款完全重新构想的虚拟安全解决方案。对于思科以应用为中心的基础设施(ACI)环境,它支......
  • Cisco ASA 9.20.2 发布 - 思科自适应安全设备 (ASA) 软件
    CiscoASA9.20.2发布-思科上一代防火墙思科自适应安全设备(ASA)软件作者主页:sysin.org思科自适应安全设备(ASA)软件成熟的防火墙和网络安全平台CiscoASA系列安全设备可以保护各种规模的公司网络。它可让用户随时随地使用任何设备进行高度安全的数据访问。这些设备15年......
  • Layui treeTable 使用【数据不显示、子级不显示】
    //返回JSON数据类publicclassLeaveMessageTreeTable{publicLeaveMessageTreeTable(){this.children=newList<LeaveMessageTreeTable>();this.isParent=false;}publicintId{get;set;}publicintUserId{get;s......
  • CompletableFuture异步编程
    一、基本介绍1.1 多线程编程的发展过程创建线程的方式继承 Thread 类实现 Runnable 接口特点:没有参数,没有返回值,没办法抛出异常JDK 1.5 进阶版Callable + FutureCallable接口中定义的 V call() throws Exception,该方法可以返回泛型值 V,并能够抛出异常......
  • Unity_U_OP1 ScriptableObject 替代单例
    核心思想:解耦GameManager单例模式,不再由一个单例管理所有事件触发,拆分成无数个小单例,各自管理优点:更加灵活的事件管理模式复用性高,对于相关类型的事件,只需要写一遍代码,剩下的拖拖拖就可以实现相同的功能。缺点:管理起来相对麻烦不利于维护,除非对这个系统非常了解,要不然排......