当前位置: 首页 > news >正文

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指令中进行动态计算

相关文章:

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

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

Java面试篇基础部分-Java中的异常以及异常处理

导语   在实际的开发过程中,往往会遇到各种各样的编程异常,如何处理这些异常,直接会影响到整个程序和系统的稳定性,如果不能在合适的地方抛出合适的异常或者是对异常进行捕获。那么就会影响到整个程序的运行。所以如何处理异常,是作为每个开发者来说必不可少的开发技能。…...

win11 MySQL的坑

最近升级了系统&#xff0c;导致以前的安装的两个版本MySQL服务无法启动&#xff0c;只能在mysql的bin目录&#xff0c;执行mysqld --console才能启动&#xff0c;mysqld都无法启动&#xff0c; 所幸进行了数据库初始化&#xff0c;这次在MySQL的bin目录执行 mysqld或者mysqld …...

stm32单片机个人学习笔记1(简单介绍)

前言 本篇文章属于stm32单片机&#xff08;以下简称单片机&#xff09;的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 STM32入门教程-2023版 细…...

python中@staticmethod、@classmethod用法

1、类的基础介绍 类对象&#xff1a;定义的类就是类对象 类属性&#xff1a;定义在__init__ 外部的变量 类方法&#xff1a;定义在类中&#xff0c;且被classmethod 装饰的方法 实例对象&#xff1a;类对象实例化后就是实例对象 实例属性&#xff1a;定义在__init__内部带…...

Harmony Next 文件命令操作(发送、读取、媒体文件查询)

查询文件位置 hdc shell mediatool query IMG_20240902_204224.jpg 输出示例 拉取文件 hdc file recv /storage/cloud/100/files/Photo/4/IMG_1725281044_036.jpg aa.jpg 发送文件 hdc file send aa.jpg /storage/media/100/local/files/Docs/Download/ab.jpg 下载目录位置…...

Go语言中的链表与双向链表实现

链表基础 链表是一种由有限元素组成的数据结构&#xff0c;其中每个元素至少使用两个内存空间&#xff1a;一个存储实际数据&#xff0c;另一个存储指向下一个元素的指针&#xff0c;从而形成一个元素序列构成链表。链表的第一个元素称为头结点&#xff0c;而最后一个元素通常…...

开始一个WPF项目时的记忆重载入

目前在工业软件的UI开发方案选择中&#xff0c;WPF仍然是一个重要的选项。 但是其固有的复杂性&#xff0c;对于像我这样&#xff0c;并不是一直在从事界面开发的人来说&#xff0c;每次重启&#xff0c;都需要一两天的适应的时间。所以这里稍微写一个笔记。 还是老办法&…...

用go语言实现树和哈希表算法

算法复杂度 判断一个算法的效率通常基于其计算复杂度&#xff0c;这主要与算法访问输入数据的次数有关。计算机科学中常用大O表示法来描述算法的复杂度。例如&#xff0c;O(n)的算法只需访问一次输入数据&#xff0c;因此优于O(n)的算法&#xff0c;后者则优于O(n)的算法&…...

基于SpringBoot+Vue+MySQL的校园健康驿站管理系统

系统展示 用户前台界面 管理员后台界面 系统背景 本文设计并实现了一个基于SpringBoot后端、Vue前端与MySQL数据库的校园健康驿站管理系统。该系统旨在通过数字化手段&#xff0c;全面管理学生的健康信息&#xff0c;包括体温监测、疫苗接种记录、健康状况申报等&#xff0c;为…...

深入理解MATLAB中的事件处理机制

在MATLAB中&#xff0c;事件处理机制是一种强大的工具&#xff0c;它允许对象之间的交互和通信。这种机制基于观察者设计模式&#xff0c;其中一个对象&#xff08;观察者&#xff09;监听另一个对象&#xff08;发布者&#xff09;的状态变化。当发布者的状态发生变化时&#…...

线程--线程同步

这里写目录标题 同步概念线程同步概念数据混乱原因 互斥量原理锁的注意事项1、cpu时间轮片2、建议锁总结 使用锁来管理线程同步问题产生主要函数init、destorylock、unlock代码注意事项&#xff08;锁的粒度&#xff09; try锁死锁出现原因图解 读写锁特性图解函数总览init、de…...

【QT】Qt窗口

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;QT 目录 &#x1f449;&#x1f3fb;菜单栏设置&#x1f449;&#x1f3fb;QToolBar练习 &#x1f449;&#x1f3fb;QStausBar&#x1f449;&#x1f3fb;Q…...

场外个股期权怎么给股票加杠杆?

今天期权懂带你了解场外个股期权怎么给股票加杠杆&#xff1f;场外期权交易通过向证券公司支付一定额度的股票期权费&#xff0c;然后买入大额的股票持仓&#xff0c;从而实现的杠杆交易。 买入看涨期权 操作&#xff1a;支付权利金购买看涨期权。 杠杆作用&#xff1a; 期…...

【Docker部署ELK】(7.15)

1、拉取镜像 docker pull docker.elastic.co/elasticsearch/elasticsearch:7.15.0 docker pull docker.elastic.co/kibana/kibana:7.15.0 docker pull docker.elastic.co/logstash/logstash:7.15.02、配置文件&#xff08;解压资源到D盘DOCKER目录下&#xff09; 2.1 配置文件…...

UE4_后期处理_后期处理材质及后期处理体积一

后期处理效果 在渲染之前应用于整个渲染场景的效果。 后期处理效果&#xff08;Post-processing effect&#xff09;使美术师和设计师能够对影响颜色、色调映射、光照的属性和功能进行组合选择&#xff0c;从而定义场景的整体外观。要访问这些功能&#xff0c;可以将一种称为…...

【PyQt6 应用程序】基于QtDesigner做一个用户登录页面

在当今的软件开发领域,用户界面(UI)设计和后端编程是创建现代、互动应用程序的两大重要组成部分。尤其是在开发具有用户登录功能的应用程序时,不仅要注重外观和用户体验的设计,还要确保后端逻辑的安全性和可靠性。 本文将介绍如何使用PyQt6框架结合UI设计,实现一个简单而…...

Ollama—87.4k star 的开源大模型服务框架!!

这一年来&#xff0c;AI 发展的越来越快&#xff0c;大模型使用的门槛也越来越低&#xff0c;每个人都可以在自己的本地运行大模型。今天再给大家介绍一个最厉害的开源大模型服务框架——ollama。 项目介绍 Ollama 是一个开源的大语言模型&#xff08;LLM&#xff09;服务工具…...

MySQL表的操作与数据类型

目录 前言 一、表的操作 1.创建一个表 2.查看表的结构 3.修改表 4.删除一个表 二、 MySQL的数据类型 0.数据类型一览&#xff1a; 1.整数类型 2.位类型 3.小数类型 4.字符类型 前言 在MySQL库的操作一文中介绍了有关MySQL库的操作&#xff0c;本节要讲解的是由库管理的结构——…...

mysql把某一个字段的值中的aa,替换成bb

UPDATE my_table SET my_column REPLACE(my_column, aa, bb); 例 假设my_table表在替换前的数据如下&#xff1a; idmy_column1hello aa2world aa aa3no aa here 执行上述UPDATE语句后&#xff0c;my_table表的数据将变为&#xff1a; idmy_column1hello bb2world bb b…...

TwinCAT界面美化指南:3步搞定背景主题切换(附最佳配色方案推荐)

TwinCAT界面美化实战&#xff1a;从主题定制到高效编程的视觉优化 每次打开TwinCAT开发环境&#xff0c;是否觉得默认的灰白色调让人昏昏欲睡&#xff1f;作为工业自动化领域的核心开发工具&#xff0c;TwinCAT的界面美学长期被工程师们忽视。实际上&#xff0c;一个精心调校的…...

OpenGOAL编译器实战指南:如何构建你自己的Jak游戏

OpenGOAL编译器实战指南&#xff1a;如何构建你自己的Jak游戏 【免费下载链接】jak-project Reviving the language that brought us the Jak & Daxter Series 项目地址: https://gitcode.com/gh_mirrors/ja/jak-project OpenGOAL编译器是一个强大的工具&#xff0c…...

【20年JVM老兵亲测】Java 25密封类+模式匹配+记录类三重协同时,API设计效率提升47%!

第一章&#xff1a;Java 25密封类扩展特性的演进脉络与设计哲学Java 密封类&#xff08;Sealed Classes&#xff09;自 Java 15 作为预览特性引入&#xff0c;历经 Java 16、17 的持续迭代&#xff0c;最终在 Java 17 成为正式特性。而 Java 25 进一步拓展其能力边界&#xff0…...

OpenClaw备份策略:Qwen3.5-9B重要数据自动同步到私有云盘

OpenClaw备份策略&#xff1a;Qwen3.5-9B重要数据自动同步到私有云盘 1. 为什么需要自动化备份方案 作为一个经常需要处理大量文档和代码的技术写作者&#xff0c;我经历过太多次因为系统崩溃或误操作导致工作成果丢失的惨痛教训。传统的备份方案要么需要手动操作&#xff08…...

运维工程师必看:如何用因果AI+DeepSeek实现3分钟精准故障定位(实战案例)

运维工程师必看&#xff1a;如何用因果AIDeepSeek实现3分钟精准故障定位&#xff08;实战案例&#xff09; 在当今复杂的云原生和微服务架构环境中&#xff0c;运维工程师面临的挑战前所未有。系统组件间的依赖关系错综复杂&#xff0c;一个微小的故障可能引发连锁反应&#xf…...

用Python+OpenCV实现双目相机三维重建:从标定到triangulatePoints的完整流程

PythonOpenCV双目三维重建实战&#xff1a;从标定到点云生成的完整指南 当你第一次看到双目相机生成的彩色点云在屏幕上缓缓旋转时&#xff0c;那种震撼感难以言表。两个普通的USB摄像头&#xff0c;经过精确标定和算法处理&#xff0c;竟能重建出真实世界的三维结构。本文将带…...

Dalsa线阵相机采图实战:从FreeRun到编码器触发的保姆级配置流程

Dalsa线阵相机采图实战&#xff1a;从FreeRun到编码器触发的工业级配置指南 在工业视觉检测领域&#xff0c;线阵相机凭借其高分辨率、高速成像的特性&#xff0c;已成为印刷、纺织、板材检测等连续运动场景的首选方案。作为行业标杆的Dalsa线阵相机&#xff0c;其工作模式切换…...

OpenClaw+GLM-4.7-Flash:自动化代码审查工具

OpenClawGLM-4.7-Flash&#xff1a;自动化代码审查工具 1. 为什么需要自动化代码审查 作为一个长期与代码打交道的开发者&#xff0c;我深知代码审查的重要性。但现实情况是&#xff0c;团队中的代码审查往往成为瓶颈——要么因为人力不足导致积压&#xff0c;要么因为审查者…...

如何在Windows下使用Rufus轻松格式化ext文件系统:完整指南

如何在Windows下使用Rufus轻松格式化ext文件系统&#xff1a;完整指南 【免费下载链接】rufus The Reliable USB Formatting Utility 项目地址: https://gitcode.com/GitHub_Trending/ru/rufus 还在为在Windows系统下无法直接创建Linux文件系统而烦恼吗&#xff1f;&…...

从硬件到空域:拆解一个真实的无人机Remote ID广播包,聊聊合规与隐私

从硬件到空域&#xff1a;拆解无人机Remote ID广播包的技术与合规全景 当一架多旋翼无人机在低空掠过城市天际线时&#xff0c;它的存在不仅通过旋翼的嗡鸣声宣告&#xff0c;更通过无线电波向方圆数公里广播着自己的"数字身份证"。这种被称为Remote ID的技术&#x…...