el-table实现当内容过多时,el-table显示滚动条,页面不显示滚动条

估计有不少小伙伴在开发公司的ERP使用el-table都会遇到这么一个问题,就是产品经理提出,页面不出现滚动条,因为不美观。但是当el-table内容过多,超过页面的宽度时候,页面就会有滚动条。那应该如何解决呢?能不能让滚动条出现在el-table的容器中,而不是出现在页面上呢?

实现方案就是 resize时间 结合el-table的 max-height 属性 然后根据页面大小实现自适应

定义auto-height 指令

// auto-height.js
export default {componentUpdate(el,binding,vnode) {const self = vnode.context;if(!self || typeof self[binding.arg] === 'undefined' || self.autoHeightResizeListener) returnself.autoHeightResizeListener = () => {let top = el.offsetTop;let cur = el.offsetParent;while (cur) {top += cur.offsetTop;cur = cur.offsetParent;}const h = (window.innerHeight-top) + binding.value;self[binding.arg] = Math.max(h,100);}window.addEventListener('resize', self.autoHeightResizeListener,false);setTimeout(self.autoHeightResizeListener,50)}unbind(el,binding,vnode) {const self = vnode.context;if(self && self.autoHeightResizeListener) {window.removeEventListener('resize',self.autoHeightResizeListener,false)self.autoHeightResizeListener = null;}}

全局注册

//main.js
import autoHeight from './auto-height.js'
// 注册全局指令 
Vue.directive('auto-height',autoHeight )

案例使用

<el-tableref='table'v-auto-height:tableHeight='-50'  // 自定义一个默认值:max-height='height'>  // 初始值
</el-table>	data(){return {height:0, // 初始值}
}

代码解释:

  • v-auto-height 指令作用:用于监听窗口的resize时间,并根据窗口大小动态调整表格高度,确保表格最终占据的可用空间
  • v-auto-height:tableHeight=‘-50’ 表示将tableHeight 属性作为目标属性,并将-50作为初始值
  • tableHeight用于存储表格的最大高度,但会在autoHeightResize指令中进行动态计算

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

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

相关文章

MySQL 大量 IN 的查询优化

背景 &#xff08;1&#xff09;MySQL 8.0 版本 &#xff08;2&#xff09;业务中遇到大量 IN 的查询&#xff0c;例&#xff1a; SELECT id, username, icon FROM users WHERE id IN (123, 523, 1343, ...);其中 id 为主键&#xff0c;IN 的列表长度有 8000 多个 问题 …

c++开关灯

题目描述 现有 &#x1d45b;n 盏灯排成一排&#xff0c;从左到右依次编号为&#xff1a;11&#xff0c;22&#xff0c;……&#xff0c;&#x1d45b;n。然后依次执行 &#x1d45a;m 项操作。 操作分为两种&#xff1a; 指定一个区间 [&#x1d44e;,&#x1d44f;][a,b]&…

程序员和开发者如何写好一份简历入门

文章目录 引言简历结构 简历模板姓名个人简介教育背景工作经验高级Java开发工程师 | XX科技有限公司Java开发工程师 | YY信息技术有限公司 项目经验项目名称&#xff1a;ZZ在线教育平台 技能荣誉与奖项附加信息 引言 怎么写好一份开发人员简历 简历结构 个人信息&#xff1a;…

使用 `readResolve` 防止序列化破坏单例模式

单例模式是一种设计模式&#xff0c;其目的是确保一个类只有一个实例&#xff0c;并提供一个全局访问点。在 Java 中&#xff0c;我们常常通过私有化构造方法和提供静态访问方法来实现单例。然而&#xff0c;尽管这些手段可以有效防止类的实例化&#xff0c;反射和序列化依然能…

百度静态资源瓦片nginx直接显示完整案例

案例地址&#xff1a;https://download.csdn.net/download/jinhuding/89733763 访问显示效果&#xff1a;(根据瓦片地址直接显示) http://172.16.39.203:8099/tiles/

【IPV6从入门到起飞】5-1 IPV6+Home Assistant(搭建基本环境)

【IPV6从入门到起飞】5-1 IPV6Home Assistant #搭建基本环境 1 背景2 docker下载 hass3 创建容器4 浏览器访问 hass5 手机APP远程访问hass6 更多玩法 1 背景 既然电脑可以IPV6入站&#xff0c;手机流量可以访问IPV6网络的服务&#xff0c;为什么不在电脑搭建Home Assistant&am…

卷积神经网络综述

摘要 本文对卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;进行了全面综述。首先介绍了卷积神经网络的发展历程&#xff0c;包括早期的理论基础和关键突破。接着详细阐述了卷积神经网络的结构组成&#xff0c;包括卷积层、池化层、全连接层…

使用生成式AI解读人们的真实意图

你可以使用生成式AI来辨别别人所说的话与他们的真实意思&#xff0c;这是一种非常有用的工具&#xff0c;懂得如何明智地使用它非常重要。 你是否曾经怀疑过别人对你说的话是否真正传达了他们的真实意思&#xff1f; 我敢肯定你有过这种经历。 有时候&#xff0c;人们说的一…

ONU测试需要那些协议的学习

在进行ONU&#xff08;Optical Network Unit&#xff0c;光网络单元&#xff09;的相关测试时&#xff0c;需要学习和掌握一系列协议和技术&#xff0c;以确保测试的有效性和准确性。这些协议主要涉及网络传输、设备管理、服务质量&#xff08;QoS&#xff09;等方面。以下是需…

敏捷开发解决的到底是什么问题?

随着信息化社会的快速发展&#xff0c;软件项目的开发方式也面临着不断更新和改进的压力。敏捷开发作为一种新兴的软件开发方法&#xff0c;因其高效、灵活和适应市场需求的能力&#xff0c;逐渐得到了广泛的关注和应用。 一、敏捷开发是什么&#xff1f; 百度百科中是这样解…

视频号黄金时间

现在刷视频的人越来越多&#xff0c;看视频号的也很多&#xff0c;那我们应该怎样发视频号呢&#xff1f;发朋友圈都有黄金时间&#xff0c;那视频号有吗&#xff1f; 答案是&#xff1a;有的。 不同时间段发什么内容的视频&#xff0c;可以引流更多精准的流量&#xff0c;可…

期货量化现在是要比股票量化更适合高频交易,程序化交易

炒股自动化&#xff1a;申请官方API接口&#xff0c;散户也可以 python炒股自动化&#xff08;0&#xff09;&#xff0c;申请券商API接口 python炒股自动化&#xff08;1&#xff09;&#xff0c;量化交易接口区别 Python炒股自动化&#xff08;2&#xff09;&#xff1a;获取…

【JAVA入门】Day34 - Stream流

【JAVA入门】Day34 - Stream流 文章目录 【JAVA入门】Day34 - Stream流一、Stream 流的作用和使用步骤1.Stream流的创建&#xff0c;数据的添加2. Stream流的中间方法3. Stream流的终结方法 Stream 流有什么作用&#xff1f;我们看一个例子&#xff1a; 【练习】需求&#xff…

记录一下linux安装nginx,也是很简单了啦

1、下载nginx 官网下载nginx&#xff1a;http://nginx.org/&#xff0c;这里很简单&#xff0c;下载自己想要的版本就行&#xff0c;这里不罗嗦 1、进入home目录&#xff0c;建一个文件夹nginx rootroot ~]# cd /home rootroot home]# mkdir nginx rootroot home]# cd /nginx2…

Java语言程序设计——篇十三(1)

&#x1f33f;&#x1f33f;&#x1f33f;跟随博主脚步&#xff0c;从这里开始→博主主页&#x1f33f;&#x1f33f;&#x1f33f; 欢迎大家&#xff1a;这里是我的学习笔记、总结知识的地方&#xff0c;喜欢的话请三连&#xff0c;有问题可以私信&#x1f333;&#x1f333;&…

系统架构师考试学习笔记第四篇——架构设计实践知识(21)安全架构设计理论与实践

本章考点&#xff1a; 第21课时主要学习信息系统中安全架构设计的理论和工作中的实践。根据考试大纲,本课时知识点会涉及案例分析题和论文题(各占25分),而在历年考试中,综合知识选择题目中也有过诸多考查。本课时内容侧重于知识点记忆;,按照以往的出题规律,安全架构设计基础知识…

SOMEIP_ETS_100: SD_ClientServiceActivate_no_FindServices_in_Main_Phase

测试目的&#xff1a; 确保客户端服务模式仅在启动阶段发送FindService消息&#xff0c;在主阶段不发送。 描述 本测试用例旨在验证DUT在客户端服务模式下的行为&#xff0c;即它应当在启动阶段发送FindService消息&#xff0c;并在进入主阶段后停止发送。 测试拓扑&#x…

【触想智能】工业一体机在物流领域上的四大应用分析

随着物流业的快速发展&#xff0c;工业一体机在物流领域上的应用越来越普遍。工业一体机是一种高级智能设备&#xff0c;是多种技术的综合应用&#xff0c;包括机械、电子、计算机、通讯等。 在物流行业中&#xff0c;工业一体机可以发挥其先进的技术和功能&#xff0c;提高物流…

基于单片机的仔猪喂饲系统设计

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师&#xff0c;一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设…

【网络安全 | 渗透工具】Cencys+Shodan使用教程

原创文章,不得转载。 文章目录 Cencys准备语法全文搜索字段和值搜索通配符搜索布尔逻辑搜索嵌套搜索时间相关搜索范围搜索双引号 (")转义序列和保留字符Censys 搜索语言中的主机查询查看主机搜索结果Censys 搜索语言中的证书查询查看证书搜索结果生成报告其余Shodan准备使…