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

news2024/11/15 11:28:03

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

HTML:

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

js:

<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.coloradmin.cn/o/1982726.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Kubernetes】Deployment 的清理策略

Deployment 的清理策略 在 Deployment 中配置 spec.revisionHistoryLimit 字段&#xff0c;可以指定其 清理策略。该字段用于指定 Deployment 保留旧 ReplicaSet 的个数&#xff0c;即更新 Pod 前的版本个数。该字段的默认值是 10。 创建 revisionhistory-demo.yaml 文件&…

一文了解K8S(Kubernates)

一、K8S 1. 概述 Kubernetes 是一个可移植、可扩展的开源平台&#xff0c;用于管理容器化的工作负载和服务&#xff0c;可促进声明式配置和自动化。 Kubernetes 拥有一个庞大且快速增长的生态&#xff0c;其服务、支持和工具的使用范围相当广泛。 Kubernetes 这个名字源于希腊…

Unity 功能 之 创建 【Unity Package】 Manager 自定义管理的包使用配置URL,使用 git URL加载的简单整理

Unity 功能 之 创建 【Unity Package】 Manager 自定义管理的包使用配置URL&#xff0c;使用 git URL加载的简单整理 目录 Unity 功能 之 创建 【Unity Package】 Manager 自定义管理的包使用配置URL&#xff0c;使用 git URL加载的简单整理 一、简单介绍 二、Unity Package …

【你也能从零基础学会网站开发】SQL Server 2000中的数据类型之String字符串类型

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;程序猿、设计师、技术分享 &#x1f40b; 希望大家多多支持, 我们一起学习和进步&#xff01; &#x1f3c5; 欢迎评论 ❤️点赞&#x1f4ac;评论 &#x1f4c2;收藏 &#x1f4c2;加关注 SQL Server 中…

c++ | vector

前言 本篇博客讲解cSTL中的vector &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞…

珠江电缆,顺应全球变化,实现高质量出海

在全球经济快速变化的今天&#xff0c;越来越多的企业将目光投向了国际市场。特别是对于线缆行业来说&#xff0c;顺应全球变化、应对机遇与挑战&#xff0c;实现高质量出海已成为长期发展的战略目标之一。珠江电缆作为一家集研发、制造和销售为一体的大型专业电线电缆企业&…

智能电表在什么情况下需要加装互感器?

智能电表作为现代电力系统中不可或缺的一部分&#xff0c;负责准确计量电力消耗。然而&#xff0c;在某些特定条件下&#xff0c;仅凭智能电表无法满足高精度测量需求&#xff0c;此时便需引入互感器。本文将深入解析智能电表与互感器的协作原理&#xff0c;明确指出加装互感器…

ASR(Automatic Speech Recognition)调研,当前sota的架构

asr概览英文纯享版&#xff1a;an overview of transducer models for asr 本文主要讲述nvidia和openai的模型架构&#xff0c;应为他们两家霸榜huggingface leader board 小白也能阅读了解一下当前sota的asr架构是什么样的 评测指标 Word Error Rate (WER)&#xff1a;错词率…

关于使用QListView向模型插入第一条数据的相关问题

在使用QListView的时候&#xff0c;看着它的四个尖角不爽&#xff0c;想着让它变成圆角矩形吗&#xff0c;但麻烦就接踵而至了。。。 在向其中插入第一条数据的时候发现&#xff0c;你插入的一条数据它存在边界超过QListView的现象。如下图所示&#xff1a; 这就令人头大了&am…

JavaEE 图书管理系统

基于阿里巴巴的fastjson框架搭建的JavaEE版本的图书管理系统&#xff0c;项目架构如下&#xff1a; fastjson包的阿里云下载镜像如下&#xff1a; Central Repository: com/alibaba/fastjson2/fastjson2/2.0.8 运行效果&#xff1a; Bean Book.java package Bean;public c…

2024华数杯大学生数学建模竞赛(C题)数学建模完整思路+完整代码全解全析

你是否在寻找数学建模比赛的突破点&#xff1f;数学建模进阶思路&#xff01; 作为经验丰富的数学建模团队&#xff0c;我们将为你带来2024华数杯数学建模竞赛&#xff08;C题&#xff09;的全面解析。这个解决方案包不仅包括完整的代码实现&#xff0c;还有详尽的建模过程和解…

按照指定格式打印pprint()

【小白从小学Python、C、Java】 【考研初试复试毕业设计】 【Python基础AI数据分析】 按照指定格式打印 pprint() [太阳]选择题 根据给定的Python代码&#xff0c;哪个选项是正确的&#xff1f; from pprint import pprint data { name: A, age: 30, hobbies:…

Vue项目学习(项目的开发流程)(2)

1、vue项目的默认首页和入口文件 2、两种书写的方式是表达一样的意思——>el&#xff1a;指定当前Vue实例挂载到哪个区域里 3、如果属性值和属性名一致&#xff0c;冒号和后面可以省略不写 &#xff08;所以有两种写法&#xff09; 4、以".vue"文件结尾的文件在项…

3个步骤上⼿Midjourney表情包教程,并上传到微信实现变现!

羡慕别⼈设计的表情包,有趣⼜好玩~也想拥有⾃⼰的个性表情包,可是⾯对复杂的设计流程,却不知从何开始?现在⽤Midjourney,你就可以轻松制作,各种⻛格的表情包,变钱赚钱,这些⽅法分享给 你~ 通⽤公式: 我们⽤表情包魔法公式,加⼊你想要的风格,⽐如漫画、卡通、插画、…

rpc框架怎么使用

这是我们提供RPC的服务类&#xff1a; class MprpcApplication { public:static void Init(int argc, char **argv);static MprpcApplication& GetInstance();static MprpcConfig& GetConfig(); private:static MprpcConfig m_config;MprpcApplication(){}MprpcApplica…

cuda逐步优化实现reduce sum 操作

归约是一种常见的数据并行原语&#xff0c;它将数组中的元素通过某种二元操作&#xff08;如加法&#xff09;合并成一个单一的值。通过逐步展示不同的CUDA实现版本&#xff0c;来演示重要的优化策略。 由于规约的算术操作很简单&#xff0c;对算力要求不高&#xff0c;因此我们…

文件上传和下载

要想实现文件上传和下载&#xff0c;其实只需要下述代码即可&#xff1a; 文件上传和下载 import cn.hutool.core.io.FileUtil; import cn.hutool.core.util.StrUtil; import com.example.common.Result; import org.springframework.web.bind.annotation.*; import org.sprin…

SQL注入sqli-labs-master关卡二

第二关如下&#xff1a; 查看页面与第一关差不多的样子&#xff0c;再查看PHP源码&#xff0c;与第一关差不多只是其中的查询处有不同。&#xff08;查看源码是为了更好的判断出该页面有什么漏洞&#xff09;其中没有单引号所以不用添加单引号去闭合去逃离单引号&#xff0c;说…

【生成式AI-一-生成式AI到底在说什么】

成式AI到底在说什么 什么是生成式人工智能生成式人工智能、机器学习、深度学习的关系chat-gpt 到底是如何实现对话的&#xff1f; 今天主要来看到底生成式AI是什么&#xff0c;语言模型是如何实现生成这个功能的&#xff1f; 什么是生成式人工智能 现在人工智能能做的事情很多…

pxe环境下的无人值守自动安装

0. 环境部署前的准备 1.rhel7的主机 2.开启主机图形 3.配置网络可用 4.关闭vmware dhcp功能 5.关闭防火墙以及selinux getenforce要为disable状态 grubby --update-kernel ALL --args selinux0 systemctl disable --now firewalld 1.kickstart自动安装脚本制作 我们想要…