【Vue+ElementUI】el-table动态高度设置及表格内容错乱对不齐

在Vue中使用ElementUI的el-table标签会遇到以下问题

一、遇到页面切换时,表格内容错乱(对不齐):doLayout()

二、动态计算表格高度:getTableMaxHeight()

页面结构:搜索框+表格,通常会在表格内部进行滚动比较好看,这时候就需要计算并设置表格高度

<template><div class="app-container"><el-form :model="queryParams" ref="queryForm" size="small" :inline="true"><el-form-item label="名字" prop="name"><el-inputv-model="queryParams.name"placeholder="请输入名字"clearable@keyup.enter.native="handleQuery"/></el-form-item></el-form><el-table ref="tables" v-loading="loading" :data="list" :height="maxHeight"><el-table-column label="ID" align="center" prop="id" /><el-table-column label="名字" align="center" prop="name" /><el-table-column label="年龄" align="center" prop="age" /></el-table></div>
</template>
<script>
export default {data() {return {loading: true,list: [], // 表格数据maxHeight: null,queryParams: {}},created() {this.getList();},mounted() {// 监听窗口变化事件window.addEventListener("resize", this.resizeScreen);},// 页面销毁时移除监听事件beforeDestroy() {window.removeEventListener('resize', this.resizeScreen)},// 页面缓存重新进入页面时,在路由组件被激活时触发activated() {this.$nextTick(() => {this.$refs.tables.doLayout(); // 对表格重新布局(解决切换页面后列错乱)})},methods: {// 获取数据,设置表格高度getList() {this.loading = true;this.list = [{id: 1, name: '小红', age: 20},{id: 2, name: '小华', age: 20},{id: 3, name: '小东', age: 20},{id: 4, name: '小刘', age: 20},];this.resizeScreen(); // 获取数据后,计算高度并重新渲染表格this.loading = false;},// 窗口变化时,表格高度跟着动态变化resizeScreen() {this.$nextTick(() => {this.maxHeight = this.getTableMaxHeight(); // 计算高度this.$refs.tables.doLayout(); // 重新渲染表格})},// 动态计算并返回:表格最大高度 computeHeightgetTableMaxHeight() {if (!this.list.length) return // 如果没有数据,直接退出if (!this.$refs.tables) return;// 表头高度var headerHeight = document.getElementsByClassName('el-table__header')[0].offsetHeight;// 表内高度var bodyHeight = document.getElementsByClassName('el-table__body')[0].offsetHeight;// 默认表格高度 = 表头 + 表内 (表格渲染后的默认高度)var tableDataHeight = headerHeight + bodyHeight; // 页面高度var pageHeight = document.getElementsByClassName('app-main')[0].offsetHeight; // 页内边距const pagePadding = 40; // 动态高度:el-form 搜索框var elFormHeight = document.getElementsByClassName('el-form')[0].offsetHeight; // 导出行高度(包含margin)const elRowOperButton = 36; // 分页高度(包含margin)const pagingHeight = 50; // 计算页面最大容纳高度var computeHeight = pageHeight - pagePadding - elFormHeight - elRowOperButton - pagingHeight; // 是否有X轴滚动条var hasScrollX = document.getElementsByClassName('el-table--scrollable-x').length; // 当 最大高度 大于 表格数据高度时,取表格高度(注:有滚动条时 + 滚动条高度)if (computeHeight > tableDataHeight) {computeHeight = (hasScrollX ? tableDataHeight + 17 : tableDataHeight) + 1; // 必须+1,否在有y轴滚动条出现}// console.log('表头', headerHeight,//   'rowHeights', rowHeights,//   'pageHeight', pageHeight, //   'lastHeight', computeHeight,//   'tableDataHeight', tableDataHeight,//   'computeHeight', computeHeight,// )return computeHeight;}}}
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/4650.shtml

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

相关文章

Meilisearch 快速入门(Windows 环境) 搜索引擎 语义搜索

Meilisearch 快速入门(Windows 环境)# 简介# Meilisearch 是一个基于 rust 开发的,快速的、完全开源的轻量级搜索引擎。它的数据存储基于磁盘与内存映射,不受 RAM 限制。在一定数量级下,搜索速度不逊于 Elasticsearch。 下载# 官方服务端包下载地址:github.com/meili…

(四)小程序学习笔记——自定义组件

1、组件注册——usingComponents &#xff08;1&#xff09;全局注册&#xff1a;在app.json文件中配置 usingComponents进行注册&#xff0c;注册后可以在任意页面使用。 &#xff08;2&#xff09;局部注册&#xff0c;在页面的json文件中配置suingComponents进行注册&#…

对于button按钮引发的bug

主要原因就是今天在给button按钮添加一个点击事件的时候&#xff0c;并没有声明button的type类型&#xff0c;就一直发生点击按钮但事件并不触发的问题。 触发这种问题的原因就是: 按钮默认的 type 类型是 "submit"&#xff0c;而不是 "button"。当你不显式…

C语言基础—多线程基础

C语言基础—多线程基础 简介正文 简介 多线程是一种并发编程技术&#xff0c;允许程序同时执行多个任务。在C语言中&#xff0c;我们可以使用POSIX线程库&#xff08;pthread&#xff09;来实现多线程编程。 正文 在C语言中&#xff0c;创建线程的基本步骤如下&#xff1a; …

【前端】VUE项目创建

在所需文件夹中打开cmd命令行窗口&#xff0c;输入vue ui 进入web可视化界面选择创建新项目 根据需求依次完成下列选择&#xff0c;下列是参考配置&#xff0c;完成后点击创建项目即可 最终显示完成

(学习日记)2024.05.10:UCOSIII第六十四节:常用的结构体(os.h文件)第三部分

之前的章节都是针对某个或某些知识点进行的专项讲解&#xff0c;重点在功能和代码解释。 回到最初开始学μC/OS-III系统时&#xff0c;当时就定下了一个目标&#xff0c;不仅要读懂&#xff0c;还要读透&#xff0c;改造成更适合中国宝宝体质的使用方式。在学完野火的教程后&a…

搭建git私人仓库

环境准备&#xff1a; 服务端&#xff1a;centos7 客户端&#xff1a;win11 1、安装git sudo apt-get install git2、创建git用户 adduser git修改密码 passwd git查看是否添加成功 cd /home && ls -al3、导入公钥 # 1.切换到git账号 su git# 2.进入 git账户的主…

python virtualenv 创建虚拟环境指定python版本,pip 从指定地址下载某个包

一、安装 pip install virtualenv是python3 的话 换成 pip3 如果下载过慢可以从国内链接下载 如下从阿里云下载 pip3 install -i https://mirrors.aliyun.com/pypi/simple virtualenv二、创建指定python版本的虚拟环境 virtualenv venv --pythonpython3.12这里的venv 为创…

从OpenJDK源码看JAVA虚拟机的创建过程

这里写目录标题 关于Java跨平台能力的理解Java Virtual Machine是怎么创建的。1. Java Launcher2. JLI_Launch 入口3. JVM-Init4. 开启新线程并继续5. 调用JavaMain6. 初始化Java虚拟机&#xff0c;并执行Main方法java.c中的InitializeJVM 方法 7. JNI_CreateJavaVM8. 虚拟机创…

WPS的JS宏如何设置Word文档的表格的单元格文字重新编号

希望对Word文档中的表格进行统一处理&#xff0c;表格内的编号&#xff0c;有时候会出现紊乱&#xff0c;下一个表格的编号承接了上一个表格的编号&#xff0c;实际需要重新编号。 当表格比较多时&#xff0c;手动更改非常麻烦&#xff0c;而且更改一遍并不能完成&#xff0c;…

使用 XHbuilder 编辑器 uniapp开发 app 中使用手机本相机可直接拍摄照片进行上传,也可以选择相册进行上传

学习目标&#xff1a; 使用 XHbuilder 编辑器 uniapp开发 app 中使用手机本相机可直接拍摄照片进行上传&#xff0c;也可以选择相册进行上传 学习内容&#xff1a; 相关内容 上传图片上传时调用的相关方法配置的相关模块需要配置的相关权限 知识小结&#xff1a; 总结&#…

最大连续1的个数 ||| ---- 滑动窗口

题目链接 题目: 分析: 题目中说可以将最多k个0翻转成1, 如果我们真的这样算就会十分麻烦, 所以我们可以换一种思路: 找到一个最长的子数组, 最多有k个0解法一: 暴力解法: 找到所有的最多有k个0的子字符串, 返回最长的解法二: 找到最长的子数组, 我们可以想到"滑动窗口算…

【win10相关】更新后出现未连接到互联网的问题及解决

问题背景 在win10更新完系统之后&#xff0c;第二天电脑开机后&#xff0c;发现无法上网&#xff0c;尝试打开百度&#xff0c;但是出现以下图片&#xff1a; 经过检查&#xff0c;发现手机是可以上网的&#xff0c;说明网络本身并没有问题&#xff0c;对防火墙进行了一些设置…

C++/BOOST filesystem fs::directory_iterator一个滑稽的错误

错误来源于&#xff0c;用 fs::directory_iterator iter(folderPath), end; 然后for循环 for (; iter ! iter_end; iter) {} 最开始没问题&#xff0c;后来说加个进度条&#xff0c;统计一下所有文件数量&#xff0c;用了std::distance&#xff0c; int totalFiles std::…

XYCTF2024 部分w

RE 1. 聪明的信使 基础爆破 #include<stdio.h> #include<string.h> int main() {char enc[] "oujp{H0d_TwXf_Lahyc0_14_e3ah_Rvy0acwc!}";char flag[41] {0};int i, j;for (i 0; i < strlen(enc); i){for (j 33; j < 127; j){if ((j < 9…

Skill Check: Fundamentals of Large Language Models

Skill Check: Fundamentals of Large Language Models 完结&#xff01;

Vue项目中引入高德地图步骤详解,附示例代码

vue中如何使用高德地图&#xff0c;下面为您详解。 步骤一&#xff1a;安装高德地图的JavaScript API 在Vue项目的根目录下打开终端&#xff0c;执行以下命令安装高德地图的JavaScript API&#xff1a; npm install amap/amap-jsapi-loader --save 步骤二&#xff1a;创建地…

什么?你还不懂文件系统和软硬链接?

文章目录 序言认识磁盘磁盘在系统中的管理熟悉磁盘各个分区 软硬链接软链接硬链接 序言 首先熟悉一下一些专有名词(了解即可,但必须有一个概念认识) 固态:SSD,笔记本中常装的,台式机中也可以装,常见的对应接口M.2和SATA接口 磁盘:90年代常用的数据存储设备,或是现在企业级数据…

IPv4 NAT(含Cisco配置)

IPv4 NAT&#xff08;含Cisco配置&#xff09; IPv4私有空间地址 类RFC 1918 内部地址范围前缀A10.0.0.0 - 10.255.255.25510.0.0.0/8B172.16.0.0 - 172.31.255.255172.16.0.0/12C192.168.0.0 - 192.168.255.255192.168.0.0/16 这些私有地址可在企业或站点内使用&#xff0c…

学习Python的第三天

学习Python的第三天&#xff0c;我开始深入Python的基本语法和特性&#xff0c;并通过编写一些简单的代码来加深理解。以下是我今天学习的一些代码案例&#xff1a; 1. 函数定义与调用 # 定义一个函数&#xff0c;计算两个数的和 def add_numbers(a, b):return a b# 调用函数…