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都会遇到这么一个问题,就是产品经理提出,页面不出现滚动条,因为不美观。但是当el-table内容过多,超过页面的宽度时候,页面就会有滚动条。那应该如何解决呢?能不能让滚动条…...
Java面试篇基础部分-Java中的异常以及异常处理
导语 在实际的开发过程中,往往会遇到各种各样的编程异常,如何处理这些异常,直接会影响到整个程序和系统的稳定性,如果不能在合适的地方抛出合适的异常或者是对异常进行捕获。那么就会影响到整个程序的运行。所以如何处理异常,是作为每个开发者来说必不可少的开发技能。…...
win11 MySQL的坑
最近升级了系统,导致以前的安装的两个版本MySQL服务无法启动,只能在mysql的bin目录,执行mysqld --console才能启动,mysqld都无法启动, 所幸进行了数据库初始化,这次在MySQL的bin目录执行 mysqld或者mysqld …...
stm32单片机个人学习笔记1(简单介绍)
前言 本篇文章属于stm32单片机(以下简称单片机)的学习笔记,来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记,只能做参考,细节方面建议观看视频,肯定受益匪浅。 STM32入门教程-2023版 细…...
python中@staticmethod、@classmethod用法
1、类的基础介绍 类对象:定义的类就是类对象 类属性:定义在__init__ 外部的变量 类方法:定义在类中,且被classmethod 装饰的方法 实例对象:类对象实例化后就是实例对象 实例属性:定义在__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语言中的链表与双向链表实现
链表基础 链表是一种由有限元素组成的数据结构,其中每个元素至少使用两个内存空间:一个存储实际数据,另一个存储指向下一个元素的指针,从而形成一个元素序列构成链表。链表的第一个元素称为头结点,而最后一个元素通常…...
开始一个WPF项目时的记忆重载入
目前在工业软件的UI开发方案选择中,WPF仍然是一个重要的选项。 但是其固有的复杂性,对于像我这样,并不是一直在从事界面开发的人来说,每次重启,都需要一两天的适应的时间。所以这里稍微写一个笔记。 还是老办法&…...
用go语言实现树和哈希表算法
算法复杂度 判断一个算法的效率通常基于其计算复杂度,这主要与算法访问输入数据的次数有关。计算机科学中常用大O表示法来描述算法的复杂度。例如,O(n)的算法只需访问一次输入数据,因此优于O(n)的算法,后者则优于O(n)的算法&…...
基于SpringBoot+Vue+MySQL的校园健康驿站管理系统
系统展示 用户前台界面 管理员后台界面 系统背景 本文设计并实现了一个基于SpringBoot后端、Vue前端与MySQL数据库的校园健康驿站管理系统。该系统旨在通过数字化手段,全面管理学生的健康信息,包括体温监测、疫苗接种记录、健康状况申报等,为…...
深入理解MATLAB中的事件处理机制
在MATLAB中,事件处理机制是一种强大的工具,它允许对象之间的交互和通信。这种机制基于观察者设计模式,其中一个对象(观察者)监听另一个对象(发布者)的状态变化。当发布者的状态发生变化时&#…...
线程--线程同步
这里写目录标题 同步概念线程同步概念数据混乱原因 互斥量原理锁的注意事项1、cpu时间轮片2、建议锁总结 使用锁来管理线程同步问题产生主要函数init、destorylock、unlock代码注意事项(锁的粒度) try锁死锁出现原因图解 读写锁特性图解函数总览init、de…...
【QT】Qt窗口
欢迎来到Cefler的博客😁 🕌博客主页:折纸花满衣 🏠个人专栏:QT 目录 👉🏻菜单栏设置👉🏻QToolBar练习 👉🏻QStausBar👉🏻Q…...
场外个股期权怎么给股票加杠杆?
今天期权懂带你了解场外个股期权怎么给股票加杠杆?场外期权交易通过向证券公司支付一定额度的股票期权费,然后买入大额的股票持仓,从而实现的杠杆交易。 买入看涨期权 操作:支付权利金购买看涨期权。 杠杆作用: 期…...
【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、配置文件(解压资源到D盘DOCKER目录下) 2.1 配置文件…...
UE4_后期处理_后期处理材质及后期处理体积一
后期处理效果 在渲染之前应用于整个渲染场景的效果。 后期处理效果(Post-processing effect)使美术师和设计师能够对影响颜色、色调映射、光照的属性和功能进行组合选择,从而定义场景的整体外观。要访问这些功能,可以将一种称为…...
【PyQt6 应用程序】基于QtDesigner做一个用户登录页面
在当今的软件开发领域,用户界面(UI)设计和后端编程是创建现代、互动应用程序的两大重要组成部分。尤其是在开发具有用户登录功能的应用程序时,不仅要注重外观和用户体验的设计,还要确保后端逻辑的安全性和可靠性。 本文将介绍如何使用PyQt6框架结合UI设计,实现一个简单而…...
Ollama—87.4k star 的开源大模型服务框架!!
这一年来,AI 发展的越来越快,大模型使用的门槛也越来越低,每个人都可以在自己的本地运行大模型。今天再给大家介绍一个最厉害的开源大模型服务框架——ollama。 项目介绍 Ollama 是一个开源的大语言模型(LLM)服务工具…...
MySQL表的操作与数据类型
目录 前言 一、表的操作 1.创建一个表 2.查看表的结构 3.修改表 4.删除一个表 二、 MySQL的数据类型 0.数据类型一览: 1.整数类型 2.位类型 3.小数类型 4.字符类型 前言 在MySQL库的操作一文中介绍了有关MySQL库的操作,本节要讲解的是由库管理的结构——…...
mysql把某一个字段的值中的aa,替换成bb
UPDATE my_table SET my_column REPLACE(my_column, aa, bb); 例 假设my_table表在替换前的数据如下: idmy_column1hello aa2world aa aa3no aa here 执行上述UPDATE语句后,my_table表的数据将变为: idmy_column1hello bb2world bb b…...
开源智能体技术解析:从LangChain到自主抓取,构建自动化工作流
1. 项目概述:从“Awesome”列表看开源智能体生态的演进 最近在梳理一些前沿的自动化工具链时,又翻到了 mergisi/awesome-openclaw-agents 这个仓库。对于长期关注AI Agent(智能体)和自动化工作流开发的同行来说,这类…...
AICoverGen终极指南:5分钟用AI制作专业级翻唱歌曲
AICoverGen终极指南:5分钟用AI制作专业级翻唱歌曲 【免费下载链接】AICoverGen A WebUI to create song covers with any RVC v2 trained AI voice from YouTube videos or audio files. 项目地址: https://gitcode.com/gh_mirrors/ai/AICoverGen 想不想让AI…...
终极指南:3步掌握yfinance金融数据获取与智能修复实战
终极指南:3步掌握yfinance金融数据获取与智能修复实战 【免费下载链接】yfinance Download market data from Yahoo! Finances API 项目地址: https://gitcode.com/GitHub_Trending/yf/yfinance yfinance是一个强大的Python库,能够从Yahoo! Finan…...
告别手动框选!用SUSTechPOINTS的V键批量标注,5分钟搞定一帧点云
解锁SUSTechPOINTS的V键批量标注:点云处理效率革命 在自动驾驶与机器人研发领域,点云标注是构建高精度感知模型的基础环节,但传统逐帧手动标注方式往往成为项目进度的瓶颈。我曾参与过一个城市级点云数据集标注项目,团队最初采用常…...
Switch便携投影底座DIY:3D打印与硬件改造实战指南
1. 项目概述:当Switch遇上投影,一场桌面上的大屏革命作为一个折腾过不少游戏机外设的玩家,我一直在想,有没有办法让Switch的“便携”属性再进化一步?官方底座接电视固然爽,但总被一根线缆束缚在客厅。直到我…...
Shell脚本加固实战:用shellguard提升脚本健壮性与安全性
1. 项目概述:一个为Shell脚本穿上“防弹衣”的守护者 在运维开发、自动化部署乃至日常的系统管理工作中,Shell脚本是我们最忠实、最高效的伙伴。从简单的日志清理到复杂的CI/CD流水线,Shell脚本无处不在。然而,脚本的安全性、健壮…...
基于RAG与智能体技术构建专业客服AI:从知识注入到流程执行
1. 项目概述:一个面向客服场景的AI智能体指南最近在GitHub上看到一个挺有意思的项目,叫mrqhocungdungai-vn/hermes-cskh-guide。从名字就能猜个大概,这是一个关于“Hermes”的客服(CSKH)指南,而且看起来是越…...
AI智能体开发实战:从Devin现象到代码辅助智能体构建
1. 项目概述:当开发者遇上AI智能体最近在GitHub上闲逛,发现一个叫“awesome-devins”的仓库热度飙升。点进去一看,好家伙,这简直是一个关于“AI智能体”的宝藏目录。这个由e2b-dev团队维护的项目,本质上是一个精心整理…...
【Clickhouse从入门到精通】第03篇:ClickHouse适用场景深度剖析
上一篇【第02篇】ClickHouse横空出世——天下武功唯快不破 下一篇【第04篇】ClickHouse生态全景与生产实践者巡礼 摘要 技术选型是数据架构设计的核心命题。再优秀的工具,若用错了场景,也会事倍功半。ClickHouse 以"极速分析查询"著称&#x…...
基于Particle Photon与NeoPixel的物联网徽章:实时追踪ISS空间站
1. 项目概述:一个会“感知”太空的智能徽章 如果你和我一样,对头顶那片星空充满好奇,特别是当得知国际空间站(ISS)这个重达数百吨的大家伙,其实每天都会数次悄无声息地掠过我们的城市上空时,总…...
