ElementUI表格el-table自适应高度(表头表尾固定不动)

ElementUI表格el-table自适应高度(表头表尾固定不动),内容只在中间滚动,效果如图:

实现代码

<div class="mt-10" :style="{'height':tableHeight}"><div class="operation-bar"><el-button :icon="Plus" @click="allSave()" v-if="isEdit == 1">保存</el-button><el-button @click="exportTable()">导出Excel</el-button></div><el-table :data="data" border style="width: 100%;font-size: 12px;height:90%;" v-loading="loading" @cell-click="cellClick" :cell-class-name="AddClass"><el-table-column  type="index" width="40" label="序号" fixed="left"></el-table-column><el-table-column prop="SalaryMonth" label="发放年月" width="95" fixed="left"></el-table-column><el-table-column prop="Departmentname" label="部门" width="150" fixed="left"></el-table-column><el-table-column prop="WorkCompanyName" label="劳务公司" width="150" fixed="left"></el-table-column><el-table-column prop="UserName" label="姓名" width="80" fixed="left"></el-table-column><el-table-column prop="CertificateName" label="员工编号" width="80" fixed="left"></el-table-column><el-table-column prop="PostTitle" label="证件号码" width="170" fixed="left"></el-table-column><el-table-column :prop="FillSetID" :label="item.FillSetName" width="100" v-for="(item ,i) in setdata" align="center"><template #default="scope"><el-inputv-model="scope.row[item.FillSetID]"@blur="removeClass(scope.row[item.FillSetID], scope.$index, scope.row)"type="number"v-if="isEdit == 1"/><span >{{ scope.row[item.FillSetID] }}</span></template></el-table-column><el-table-column label="备注"><template #default="scope"><el-inputv-model="scope.row.Remark"@blur="removeClass(scope.row.Remark, scope.$index, scope.row)"type="text"v-if="isEdit == 1"/><span >{{ scope.row.Remark }}</span></template></el-table-column></el-table><el-pagination background layout="total, prev, pager, next, jumper, sizes" :total="total" v-model:current-page="page" v-model:page-size="pageSize" class="pagination" @current-change="pageChange" /></div>

使用JS动态获取窗口高度

data(){return{tableHeight: window.innerHeight + 'px'}
}
<div class="mt-10" :style="{'height':tableHeight}"> vue绑定变量

需要给el-table  加上高度样式 

<el-table :data="data" border style="width: 100%;font-size: 12px;height:90%;"

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

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

相关文章

VScode+python开发,多个解释器切换问题

内容&#xff1a;主要VScode使用多个解释器 环境准备 VScode编辑器&#xff0c;两个版本python解释器 python3.7.2 python3.11.6 问题&#xff1a; 目前我们的电脑安装了python3.7.2、python3.11.6两个解释器&#xff0c;在vscode编辑器中&#xff0c;无法切换解释器使用如…

【蓝桥杯软件赛 零基础备赛20周】第3周——填空题

报名明年4月蓝桥杯软件赛的同学们&#xff0c;如果你是大一零基础&#xff0c;目前懵懂中&#xff0c;不知该怎么办&#xff0c;可以看看本博客系列&#xff1a;备赛20周合集 20周的完整安排请点击&#xff1a;20周计划 文章目录 00. 2023年第14届参赛数据0. 上一周答疑1. 填空…

RequestContextHolder详解

最近遇到的问题是在service获取request和response,正常来说在service层是没有request的,然而直接从controlller传过来的话解决方法太粗暴,后来发现了SpringMVC提供的RequestContextHolder遂去分析一番,并借此对SpringMVC的结构深入了解一下,后面会再发文章详细分析源码 1.Reque…

anaconda中安装pytorch和TensorFlow环境并在不同环境中安装kernel

❤️觉得内容不错的话&#xff0c;欢迎点赞收藏加关注&#x1f60a;&#x1f60a;&#x1f60a;&#xff0c;后续会继续输入更多优质内容❤️ &#x1f449;有问题欢迎大家加关注私戳或者评论&#xff08;包括但不限于NLP算法相关&#xff0c;linux学习相关&#xff0c;读研读博…

单链表的实现

CSDN主页&#xff1a;醋溜马桶圈_C语言进阶,初始C语言,数据结构-CSDN博客 Gitee主页&#xff1a;mnxcc (mnxcc) - Gitee.com 专栏&#xff1a;数据结构_醋溜马桶圈的博客-CSDN博客 目录 1.认识单链表 2.创建单链表 3.单链表的操作 3.1打印单链表 3.2开辟新空间 3.3尾插 3.4头插…

深入探讨Linux中的文本文件查看命令

目录 前言1 cat命令2 less命令3 more命令4 head命令5 tail命令6 总结 前言 在Linux系统中&#xff0c;文本文件是日常工作中不可或缺的一部分&#xff0c;无论是配置文件、日志文件还是代码文件&#xff0c;都需要用到文本文件查看命令。在本文中&#xff0c;我们将深入研究一…

AI创作系统ChatGPT源码+AI绘画系统+支持OpenAI DALL-E3文生图,可直接对话文生图

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。新增支…

桶装水订水小程序app,线上预约订水更便捷

桶装水订水小程序app&#xff0c;线上预约订水更便捷。设置好地址&#xff0c;一键订水&#xff0c;工作人员送水到家。还能配送新鲜果蔬&#xff0c;绿色健康有保证。送水软件手机版&#xff0c;提供各种品牌桶装水&#xff0c;在线发起订水服务&#xff0c;由服务人员送水到家…

QT windows与linux之间sokcet通信中文乱码问题解决方法

QT windows与linux之间sokcet通信中文乱码问题解决方法 linux发送与接收都转码utf-8: tcpClient ->write( send_msg.toUtf8());//解决乱码&#xff0c;发送转码 接收&#xff1a; QByteArray buffer tcpClient->readAll(); if(!buffer.isEmpty()) { // ui->plain…

双十一买高画质投影仪,当贝F6还是极米H6?

如果你想购买一台4K画质的投影仪,那么在各大平台搜索“双十一最值得买的4K投影仪”时,一定会注意到当贝F6和极米H6这两个型号投影仪。个人认为当贝F6和极米H6都分别是当贝和极米两个品牌非常具有性价比的4K投影仪。那么到底哪一台更适合你。 首先放一张参数对比图,方便参数控研…

登上CMMLU性能评测榜单第一 四大维度解码夸克自研大模型

11月14日&#xff0c;拥有千亿参数的夸克自研大模型正式发布&#xff0c;立刻占据CMMLU榜单第一名。夸克大模型将应用于通用搜索、医疗健康、教育学习、职场办公等多个场景。性能方面&#xff0c;其整体水平已经超过GPT-3.5&#xff0c;其中在写作、考试等部分场景中可以超过GP…

OpenCV实现手势虚拟拖拽

前言&#xff1a; Hello大家好&#xff0c;我是Dream。 今天来学习一下如何使用OpenCV实现手势虚拟拖拽&#xff0c;欢迎大家一起前来探讨学习~ 一、主要步骤及库的功能介绍 1.主要步骤 要实现本次实验&#xff0c;主要步骤如下&#xff1a; 导入OpenCV库。通过OpenCV读取摄…

做决策、定战略、带团队:顶级高手常用的16个思维模型

01 做决策 1.沃伦巴菲特的双目标清单系统&#xff08;Two-List System&#xff09; 弗林特当了巴菲特的私人飞行员十年之久&#xff0c;还曾为美国四任总统开过飞机&#xff0c;但他在事业上依然有更多追求。有一次&#xff0c;他和巴菲特在探讨他的职业生涯目标时&#xff0…

容器化nacos部署并实现服务发现(gradle)

1.如何容器化部署mysql 2. 如何容器化部署nacos 为不暴露我的服务器地址&#xff0c;本文全部使用localhost来代替服务器地址&#xff0c;所有的localhost都应该调整为你自己的服务器地址。 为不暴露我的服务器地址&#xff0c;本文全部使用localhost来代替服务器地址&#x…

Libra R-CNN: Towards Balanced Learning for Object Detection(2019.4)

文章目录 AbstractIntroduction引入问题1&#xff09; Sample level imbalance2) Feature level imbalance3) Objective level imbalance进行解决贡献 Related Work&#xff08;他人的work&#xff0c;捎带与我们的对比&#xff09;Model architectures for object detection&a…

突发!奥特曼宣布暂停ChatGPT Plus新用户注册!

大新闻&#xff01;就在刚刚&#xff01; OpenAI的CEO Sam Altman宣布暂停ChatGPT Plus 新用户注册&#xff01; Sam Altman对此解释道&#xff1a; 由于OpenAI开发日后ChatGPT使用量的激增超出了我们的承受能力&#xff0c;我们希望确保每个人都有良好的体验。 您仍然可以在a…

msvcp120.dll下载_msvcp120.dll文件丢失解决[dll系统文件修复]

msvcp120.dll是Microsoft Visual C库中的一个重要组件&#xff0c;属于Microsoft Visual C 2005 Redistributable Package。它提供了许多用于执行C程序所需的函数。Visual C是一款流行的集成开发环境&#xff08;IDE&#xff09;&#xff0c;广泛应用于游戏、视频和图形处理等领…

keepalived+haproxy配置集群和负载均衡

1、简介 1.1. Keepalived Keepalived 是一个基于VRRP协议来实现的LVS服务高可用方案,可以利用其来避免单点故障。一个LVS服务会有2台服务器运行Keepalived,一台为主服务器(MASTER),一台为备份服务器(BACKUP),但是对外表现为一个虚拟IP,主服务器会发送特定的消息给备…

【PyQt小知识 - 2】:QTextEdit内容的更新和获取、隐藏或显示滚动条、光标插入文本、文本自适应移动

文章目录 QTextEdit更新和获取内容隐藏或显示滚动条光标插入文本文本自适应移动 QTextEdit 更新和获取内容 更新&#xff1a;QTextEdit().setText(text) 或 QTextEdit().setPlainText(text) 获取&#xff1a;QTextEdit().toPlainText() setText()和setPlainText()的区别&…