vue+element 根据父容器动态设置table高度出滚动条

news/2024/9/19 18:41:07/ 标签: vue.js, 前端, javascript

可以通过CSS样式来控制表格的高度,并使用JavaScript动态地设置这个高度。

HTML:

<template><el-table:data="tableData":height="tableHeight"style="width: 100%"><!-- 列配置 --></el-table>
</template>

js:

javascript"><script>
export default {data() {return {tableData: [// 数据列表],tableHeight: '' // 初始高度};},mounted() {this.setTableHeight();window.addEventListener('resize', this.setTableHeight);},beforeDestroy() {window.removeEventListener('resize', this.setTableHeight);},methods: {setTableHeight() {const parentHeight = this.$el.parentNode.clientHeight; // 获取父容器高度this.tableHeight = parentHeight - 100 + 'px'; // 减去其他元素高度,保留一定空间}}
};
</script>

css:确保父级有高度:(父级是自适应%高度也可以,但是不能没有!!!)

<style scoped>
/* 确保父容器有高度 */
.el-table {width: 100%;
}
</style>

说明:在这个示例中,表格组件在被挂载后会计算其父元素的高度,并设置表格的height属性以适应父元素的高度。同时,它还会在浏览器窗口大小改变时重新计算并设置表格高度。需要注意的是,父元素的高度应该是可用的


http://www.ppmy.cn/news/1505226.html

相关文章

7 postgresql 10版本 分区表使用场景、创建删除、注意事项

pg10版本支持的内置分区&#xff1a;范围分区&#xff08;range&#xff09;&#xff0c;列表分区(list)&#xff0c;另外传统分区为触发器方式实现 为什么引入分区表 可以理解为分表&#xff0c;有这几种优势&#xff1a; 1、分区上顺序扫描提升性能&#xff0c;因为不会整…

Day15--Servlet后端之Jsp了解学习(数据展示分页的实现)

JSP&#xff08;Java Server Pages&#xff09;是一种基于Java的动态网页开发技术&#xff0c;主要用于创建能够动态生成内容的Web应用程序。他可以前后端语言混合编写&#xff0c;用在编译后会变成一个类&#xff0c;你也可以理解为jsp文件就是一个servlet类&#xff0c;只是j…

【Linux】TCP全解析:构建可靠的网络通信桥梁

文章目录 前言1. TCP 协议概述2. TCP报头结构3. 如何理解封装和解包呢&#xff1f;4. TCP的可靠性机制4.1 TCP的确认应答机制4.2 超时重传机制 5. TCP链接管理机制5.1 经典面试题&#xff1a;为什么建立连接是三次握手&#xff1f;5.2 经典面试题&#xff1a;为什么要进行四次挥…

工业人工智能真的能落地吗?

文章目录 前言Part1 聊聊技术1 人工智能、机器学习和深度学习的关系2 优化思想的一个案例 part2 聊聊业务3 工业人工智能与消费互联网人工智能的区别3.1 消费互联网中人工智能的应用3.2 为什么如此成熟的消费互联网人工智能扩展到工业场景那么难 4 工业互联网人工智能的发展方向…

yolov8 剪枝

yolov8n 初始&#xff1a; YOLOv8n summary (fused): 185 layers, 3151904 parameters, 31936 gradients, 8.7 GFLOPs

C# Unity 面向对象补全计划 七大原则 之 接口隔离原则 (ISP) 难度:☆ 总结:大接口分成小的,然后该干啥干啥

本文仅作学习笔记与交流&#xff0c;不作任何商业用途&#xff0c;作者能力有限&#xff0c;如有不足还请斧正 本系列作为七大原则和设计模式的进阶知识&#xff0c;看不懂没关系 请看专栏&#xff1a;http://t.csdnimg.cn/mIitr&#xff0c;查漏补缺 1.接口隔离原则 (ISP) 这…

100道C/C++面试题

1. static的作用2. 引用与指针的区别3. .h头文件中的ifndef/define/endif 的作用4 #include<file.h>与#include"file.h"的区别?5 描述实时系统的基本特性6 全局变量和局部变量在内存中是否有区别?如果有&#xff0c;是什么区别?7 什么是平衡二叉树?8 堆栈溢…

vulhub靶场之WordPress

第一步搭建环境 靶场地址&#xff0c;自行去gethub找 安装靶场&#xff0c;使用vm虚拟机或云服务器 需安装docker和docker-compose 执行命令 cd /vulhub/wordpress/pwnscriptum docker-compose up -d 开启docker docker ps -a查看运行端口 访问进行wordpress设置 第二…

SpringBoot面试题整理(1)

面试整理 前置知识 ApplicationContextInitializerApplicationListenerBeanFactoryBeanDefinitionBeanFactoryPostProcessorAwareInitializingBean/DisposableBeanBeanPostProcessor 面试题 SpringBoot启动流程IOC容器初始化流程Bean声明周期Bean循环依赖SpringMVC执行流程…

PYTHON专题-(7)python都有包了?

什么是包&#xff1f;什么是模块&#xff1f; 在Python中&#xff0c;包&#xff08;Package&#xff09;是一种将相关的模块组织在一起的方式。包是一个包含了多个模块的文件夹&#xff0c;该文件夹下还会有一个特殊的文件__init__.py&#xff0c;用于表示这是一个包。包可以嵌…

多语言海外AEON抢单可连单加额外单源码,java版多语言抢单系统

多语言海外AEON抢单可连单加额外单源码&#xff0c;java版多语言抢单系统。此套是全新开发的java版多语言抢单系统。 后端java&#xff0c;用的若依框架&#xff0c;这套代码前后端是编译后的&#xff0c;测试可以正常使用&#xff0c;语言繁体&#xff0c;英文&#xff0c;日…

软件测试生命周期、BUG描述与处理策略

软件测试的生命周期 需求分析&#xff1a;需求是否完整、是否正确 测试计划&#xff1a;确定由谁测试、测试的起止时间、设计哪些模块 测试设计、测试开发&#xff1a;写测试用例&#xff08;手工、自动化测试用例&#xff09;、编写测试工具 执行测试用例 测试评估&…

[Kimi 笔记]“面向搜索引擎”

"面向搜索引擎"&#xff08;Search Engine-Oriented&#xff0c;SEO-Oriented 或 SEO-Friendly&#xff09;通常指的是在设计和开发网站时&#xff0c;采取一系列措施来优化网站内容和结构&#xff0c;以便提高网站在搜索引擎结果页面&#xff08;SERP&#xff09;中…

深度学习中卷积算子和dropout算子的作用

笔者在调网络的时候&#xff0c;有时调细一些在想不同卷积核尺寸的卷积操作有啥区别&#xff0c;在哪些算子后用dropout会比较好呢&#xff1f;于是有了下面一段总结。 文章目录 一、卷积核尺寸1X1和3X3的区别1x1卷积核3x3卷积核 二、dropout的作用使用情况算子组合注意事项 一…

声学气膜馆的独特优势—轻空间

声学气膜馆是一种专为提供卓越声学体验而设计的特殊建筑形式。相比于普通的气膜馆&#xff0c;声学气膜馆在设计和材料选择上更加注重声学性能&#xff0c;旨在为音乐会、演讲、录音等活动提供最佳的声音效果。以下是声学气膜馆的一些独特优势。 卓越声学设计与控制 声学气膜馆…

什么是移码?

目录 移码的原理 具体例子 4位移码&#xff08;Excess-7 Code&#xff09; 8位移码&#xff08;Excess-127 Code&#xff09; 移码的特点 原码、补码、反码和移码这 4 种编码表示的总结如下&#xff1a; 移码的应用 移码&#xff08;Excess-N Code&#xff09;是一种用…

【文献阅读】GraphAny: A Foundation Model for Node Classification on Any Graph

Abstract 可以执行任何新任务而无需特定训练的基础模型已经在视觉和语言应用中引发了机器学习的革命。然而&#xff0c;涉及图结构数据的应用仍然是基础模型面临的一个难题&#xff0c;因为每个图都有独特的特征和标签空间。传统的图机器学习模型&#xff0c;如图神经网络&…

spark连接metastore(kerbors)揭秘

1、hivemeta开启meta后&#xff0c;spark-sql执行报错&#xff1a; Caused by: GSSException: No valid credentials provided (Mechanism level: Server not found in Kerberos database (7) - LOOKING_UP_SERVER) at sun.security.jgss.krb5.Krb5Context.initSecCon…

Go语言学习笔记(一)

Go语言学习笔记&#xff08;一&#xff09; Go学习笔记 1.字符串类型 package mainimport "unsafe" const (a "abc"b len(a)c unsafe.Sizeof(a) )func main(){println(a, b, c) }unsafe.Sizeof(a)输出的结果是16 。字符串类型在 go 里是个结构, 包含…

ScreenAgent:基于LVLM的计算机控制智能体

ScreenAgent : A Vision Language Model-driven Computer Control Agent 论文链接: https://arxiv.org/abs/2402.07945https://arxiv.org/abs/2402.07945IJCAI 2024 1.概述 大型语言模型(LLM),诸如ChatGPT与GPT-4,在自然语言处理领域(涵盖生成、理解及对话等任务)展现出…