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

24小时运行不中断:OpenClaw+GLM-4.7-Flash构建个人资讯聚合器

24小时运行不中断&#xff1a;OpenClawGLM-4.7-Flash构建个人资讯聚合器 1. 为什么需要个人资讯聚合器 每天早上打开手机&#xff0c;总会被各种新闻推送淹没。财经、科技、行业动态...信息过载已经成为现代人的通病。作为一个技术从业者&#xff0c;我发现自己花费在筛选有效…...

Qwen-Image-2512-SDNQ Web服务API集成:Node.js/Java调用生成图片完整示例

Qwen-Image-2512-SDNQ Web服务API集成&#xff1a;Node.js/Java调用生成图片完整示例 1. 服务概述与核心价值 Qwen-Image-2512-SDNQ-uint4-svd-r32 Web服务是一个基于Flask框架构建的图片生成应用&#xff0c;它将先进的AI图片生成模型封装成易于使用的Web接口。这个服务最大…...

HUNYUAN-MT 7B翻译终端Matlab科学计算集成:技术文档跨语言协作

HUNYUAN-MT 7B翻译终端Matlab科学计算集成&#xff1a;技术文档跨语言协作 如果你在科研或工程团队里工作&#xff0c;很可能遇到过这样的场景&#xff1a;团队里有来自不同国家的同事&#xff0c;大家用Matlab写的算法注释、实验报告、技术文档&#xff0c;语言五花八门。你想…...

OptiScaler完全指南:如何为你的游戏解锁跨厂商上采样技术

OptiScaler完全指南&#xff1a;如何为你的游戏解锁跨厂商上采样技术 【免费下载链接】OptiScaler DLSS replacement for AMD/Intel/Nvidia cards with multiple upscalers (XeSS/FSR2/DLSS) 项目地址: https://gitcode.com/GitHub_Trending/op/OptiScaler 还在为游戏中…...

Electron应用打包体积优化实战:从30MB瘦身到15MB,我的electron-builder.yml配置清单

Electron应用打包体积优化实战&#xff1a;从30MB瘦身到15MB 最近在优化一个Electron应用的打包体积时&#xff0c;发现初始生成的安装包竟然达到了30MB。经过一系列配置调整和优化&#xff0c;最终成功将体积缩减到15MB。这个过程让我深刻体会到&#xff0c;electron-builder…...

mytrader-开源量化交易平台:多语言支持下的金融数据分析与策略开发实战

1. mytrader&#xff1a;量化交易的全能工具箱 第一次接触mytrader时&#xff0c;我被它支持的多语言生态震惊了——这就像找到了一把能打开所有量化交易大门的万能钥匙。作为开源量化交易平台&#xff0c;mytrader最突出的特点就是允许开发者使用C/C、Python、Excel/VBA甚至麦…...

告别终端命令:Applite如何让macOS应用管理变得轻松有趣

告别终端命令&#xff1a;Applite如何让macOS应用管理变得轻松有趣 【免费下载链接】Applite User-friendly GUI macOS application for Homebrew Casks 项目地址: https://gitcode.com/gh_mirrors/ap/Applite 如果你曾因复杂的终端命令而对Homebrew望而却步&#xff0c…...

火绒误删explorer.exe导致Win10黑屏?保姆级修复指南(含安全模式+注册表操作)

火绒误删explorer.exe导致Win10黑屏的全面解决方案 当Windows 10系统突然陷入黑屏状态&#xff0c;只剩鼠标指针孤独地在屏幕上闪烁&#xff0c;这种体验对任何用户来说都堪称噩梦。特别是当发现罪魁祸首竟是日常依赖的安全软件火绒时&#xff0c;更让人措手不及。本文将系统性…...

GDAL:Windows环境下的高效安装与基础配置指南

1. Windows环境下GDAL安装全攻略 第一次接触GDAL时&#xff0c;我也被官网上密密麻麻的下载选项搞得头晕眼花。作为地理空间数据处理领域的"瑞士军刀"&#xff0c;GDAL确实功能强大&#xff0c;但在Windows平台上的安装过程却让不少新手望而却步。别担心&#xff0c;…...

LVGL显存、FreeRTOS堆栈、全局变量:在128KB RAM的STM32F407上如何做内存预算与平衡?

LVGL显存、FreeRTOS堆栈与全局变量的内存博弈&#xff1a;STM32F407的128KB RAM精算指南 当一块STM32F407芯片的128KB RAM需要同时供养LVGL的华丽界面、FreeRTOS的多任务调度以及应用层的全局变量时&#xff0c;开发者面临的挑战不亚于一位财务总监在有限预算下平衡多个部门的开…...