当前位置: 首页 > 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…...

CCPD车牌数据集预处理避坑指南:透视变换原理详解与OpenCV实战

CCPD车牌数据集预处理避坑指南&#xff1a;透视变换原理详解与OpenCV实战 车牌识别系统中&#xff0c;数据预处理的质量直接影响模型性能。CCPD作为目前最全面的中文车牌数据集&#xff0c;其四点标注特性为透视变换提供了基础&#xff0c;但也暗藏诸多陷阱。本文将手把手带您穿…...

BG3ModManager:博德之门3模组管理终极解决方案

BG3ModManager&#xff1a;博德之门3模组管理终极解决方案 【免费下载链接】BG3ModManager A mod manager for Baldurs Gate 3. This is the only official source! 项目地址: https://gitcode.com/gh_mirrors/bg/BG3ModManager 你是否曾经为《博德之门3》的模组管理而烦…...

【技术解析】基于主成分分析与神经网络的航空安全风险建模:从QAR数据预处理到实时预警仿真

1. 航空安全风险建模的技术背景 每次坐飞机时&#xff0c;你可能都好奇过&#xff1a;机长是如何确保飞行安全的&#xff1f;其实背后有一整套数据驱动的安全体系在支撑。QAR&#xff08;快速存取记录器&#xff09;就像飞机的"黑匣子"&#xff0c;记录了上百项飞行参…...

Hitboxer终极指南:专业级游戏键盘重映射与SOCD清理工具完全教程

Hitboxer终极指南&#xff1a;专业级游戏键盘重映射与SOCD清理工具完全教程 【免费下载链接】socd Key remapper for epic gamers 项目地址: https://gitcode.com/gh_mirrors/so/socd Hitboxer是一款专为竞技游戏玩家设计的专业级键盘按键重映射和SOCD清理工具&#xff…...

基于Readability算法的网页内容提取服务:从原理到工程实践

1. 项目概述&#xff1a;一个为现代阅读而生的开源工具 最近在折腾个人知识库和稍后读系统时&#xff0c;我一直在找一个能完美解决“网页内容净化与结构化”痛点的工具。市面上的方案要么太重&#xff0c;要么太简陋&#xff0c;直到我遇到了 Cat-tj/web-reader 。这不仅仅是…...

使用mcp-maker快速构建AI工具集成服务器:从MCP协议到实践

1. 项目概述&#xff1a;一个为AI应用注入“超能力”的MCP服务器工厂 如果你最近在折腾AI应用开发&#xff0c;特别是想给ChatGPT、Claude这类大模型配上“手和脚”&#xff0c;让它们能操作你的本地文件、查询数据库&#xff0c;甚至控制你的智能家居&#xff0c;那你大概率已…...

轻量级配置管理框架zcf:多环境配置、敏感信息加密与云原生集成实践

1. 项目概述&#xff1a;一个面向开发者的轻量级配置管理框架最近在梳理团队内部工具链时&#xff0c;发现一个挺普遍的问题&#xff1a;不同项目、不同环境&#xff08;开发、测试、生产&#xff09;的配置管理总是乱糟糟的。.env文件满天飞&#xff0c;敏感信息一不小心就提交…...

告别玄学调试:用英飞凌TC37X/TC38X的DSADC做旋变软解码,这些配置坑你别再踩了

英飞凌TC37X/TC38X DSADC旋变解码实战避坑指南 从实验室到产线&#xff1a;那些DSADC配置中容易忽视的细节 在新能源汽车电机控制领域&#xff0c;旋转变压器&#xff08;Resolver&#xff09;作为位置传感器的主力军&#xff0c;其解码稳定性直接决定了矢量控制的精度。英飞凌…...

构建高质量Awesome清单:开源项目精选与维护实践指南

1. 项目概述&#xff1a;为什么我们需要一个“Awesome”清单&#xff1f;在开源的世界里&#xff0c;信息过载是每个开发者、技术爱好者乃至项目经理都面临的共同挑战。每天&#xff0c;GitHub、GitLab等平台上都会涌现出成千上万个新项目&#xff0c;从精巧的工具库到庞大的系…...

【限时解密】Midjourney未公开的Tea印相冷启动协议:如何绕过默认sampler干扰,直触胶片模拟内核(仅剩37位开发者掌握)

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Midjourney Tea印相冷启动协议的起源与本质 Midjourney Tea印相冷启动协议&#xff08;Tea-Init Protocol&#xff09;并非官方标准&#xff0c;而是由东亚AI艺术协作社区在2023年自发演化出的一套轻量…...