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

news2024/10/6 12:19:20

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-input
                v-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-input
                v-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.coloradmin.cn/o/1204824.html

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

相关文章

15年之后再回低价的双十一,几分像从前?

文 | 螳螂观察 作者 | 易不二 今年双十一&#xff0c;全网铺天盖地的“低价”字眼&#xff0c;让人有种时空错乱的感觉。 犹记得&#xff0c;2009年双十一也是以一刀直砍到5折的低价&#xff0c;推开了一扇新世界的大门。在那个车马邮件还有网速都很慢的年月&#xff0c;人们…

深入理解强化学习——马尔可夫决策过程:随机过程和马尔可夫性质

分类目录&#xff1a;《深入理解强化学习》总目录 下图介绍了强化学习里面智能体与环境之间的交互&#xff0c;智能体得到环境的状态后&#xff0c;它会采取动作&#xff0c;并把这个采取的动作返还给环境。环境得到智能体的动作后&#xff0c;它会进入下一个状态&#xff0c;把…

【Transformer从零开始代码实现 pytoch版】(三)Decoder编码器组件:多头自注意力+多头注意力+全连接层+规范化层

解码器组件 解码器部分&#xff1a; 由N个解码器层堆叠而成每个解码器层由三个子层连接结构组成第一个子层连接结构包括一个多头自注意力子层和规范化层以及一个残差连接第二个子层连接结构包括一个多头注意力子层和规范化层以及一个残差连接第三个子层连接结构包括一个前馈全…

牛客网上收藏题目总结及重写(C语言)(3)

每日一言 如果预计中的不幸没有发生的话&#xff0c;我们就会收获意外的喜悦。 --人生的智慧 题目BC84 错因&#xff1a;忘记要使用小数除法 代码 #include <stdio.h> int main() {int i 0;int n 0;scanf("%d",&n);double sum 0;for(i1;i<n;i){su…

分享一些有趣的MATLAB提示音(代码可直接复制)

先做一个声明&#xff1a;文章是由我的个人公众号中的推送直接复制粘贴而来&#xff0c;因此对智能优化算法感兴趣的朋友&#xff0c;可关注我的个人公众号&#xff1a;启发式算法讨论。我会不定期在公众号里分享不同的智能优化算法&#xff0c;经典的&#xff0c;或者是近几年…

联想笔记本Fn + A可以全选,Ctrl失效

问题&#xff1a;联想笔记本Fn A可以全选&#xff0c;ctrl失效。 原因&#xff1a;BIOS启用了Fn键和Ctrl键互换。 解决操作&#xff1a; 1.开机时一直按F2&#xff0c;进入BIOS 2.点击More Settings > 2.选取Configuration 3.将Fool Proof Fn Ctrl 设定变更为Disabled 4.按…

【算法与数据结构】491、LeetCode递增子序列

文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;本题和【算法与数据结构】78、90、LeetCode子集I&#xff0c; II中90.子集II问题有些类似&#xff0c;…

(四)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB

一、七种算法&#xff08;DBO、LO、SWO、COA、LSO、KOA、GRO&#xff09;简介 1、蜣螂优化算法DBO 蜣螂优化算法&#xff08;Dung beetle optimizer&#xff0c;DBO&#xff09;由Jiankai Xue和Bo Shen于2022年提出&#xff0c;该算法主要受蜣螂的滚球、跳舞、觅食、偷窃和繁殖…

Outlook如何精准搜索邮件

说明&#xff1a; 使用Outlook默认的搜索时&#xff0c;会出来很多无关的信息&#xff0c;对搜索邮件带来很大的不便&#xff0c;下面介绍一个使用精准搜索的方法。 操作指引&#xff1a; 1、在outlook左上角&#xff0c;进行如下操作&#xff0c;打开“其他命令” 2、打开快…

UBoot

uboot是什么&#xff1f; 嵌入式linux系统启动过程 嵌入式系统上电后先执行uboot、然后uboot负责初始化DDR&#xff0c;初始化Flash&#xff0c;然后将OS从Flash中读取到DDR中&#xff0c;然后启动OS&#xff08;OS启动后uboot就无用了&#xff09;uboot是什么&#xff0c;ubo…

【Java】集合(二)Set

1.Set接口基本介绍 无序:存取顺序不一致不重复:可以去除重复无索引:没有带索引的方法&#xff0c;所以不能使用普通for循环遍历&#xff0c;也不能通过索引来获取元素 2.Set集合的实现类 HashSet:无序、不重复、无索引LinkedHashSet: 有序、不重复、无索引TreeSet: 可排序、不…

3、Linux库的生成和使用(核心代码是程序员不可公开的小秘密)

目录 Linux库的概念 Linux 静态库 Linux 静态库作用 Linux 静态库的创建 1. 将.c文件生成.o文件 ​编辑 2. 将所有的.o文件归档为一个静态库.a文件 Linux 静态库的使用 Linux 动态库&#xff1a; Linux 动态库作用 Linux 动态库的创建 生成.so动态库文件 ​编辑 …

推荐一份适合所有人做的副业,尤其是程序员。

我建议每个人都去尝试一下网上接单&#xff0c;这是一个门槛低、类型多样的方式&#xff0c;尤其适合程序员&#xff01; 在接单平台上&#xff0c;你可以看到各种类型的兼职。以freelancer为例&#xff0c;你可以在这里找到技术、设计、写作等类型的兼职&#xff0c;只要发挥…

广告算法资料汇总【建设中】

业内大佬 阿里妈妈技术 张俊林 王喆 萧瑟 朱小强 综合 付海军&#xff1a;基于互联网广告发展演变和思考&#xff08;附视频讲解PPT&#xff09; 广告算法工程师入门_广告与算法的博客-CSDN博客 广告算法学习笔记 20万、50万、100万的算法工程师&#xff0c;到底有什么区别…

EtherCAT转Modbus网关的 EtherCAT从站配置案例

兴达易控EtherCAT转Modbus网关&#xff08;XD-MDEC20 &#xff09;是一款具备ETHERCAT从站功能的通讯网关&#xff0c;其主要作用是将ETHERCAT网络和MODBUS-RTU网络连接起来。该网关可作为ETHERCAT总线中的从站使用&#xff0c;同时也能够连接到MODBUS-RTU总线中&#xff0c;作…

upload-labs关卡4(黑名单点空格绕过或htaccess绕过)通关思路

文章目录 前言一、回顾上一关知识点二、靶场第四关方法一通关思路1.看源码2、点空格绕过 三、靶场第四关方法二通关思路1、htaccess文件是什么2、通过上传htaccess文件进行绕过1、使用前提2、上传htaccess文件&#xff0c;然后再上传phpinfo的jpg文件 总结 前言 此文章只用于学…

轻量封装WebGPU渲染系统示例<29>- 深度模糊DepthBlur(源码)

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/DepthBlur.ts 当前示例运行效果: 此示例基于此渲染系统实现&#xff0c;当前示例TypeScript源码如下: const blurRTTTex0 { diffuse: { uuid: "rtt0", …

数据结构-堆排序及其复杂度计算

目录 1.堆排序 1.1 向上调整建堆 1.2 向下调整建堆 2. 两种建堆方式的时间复杂度比较 2.1 向下调整建堆的时间复杂度 2.2 向上调整建堆的时间复杂度 Topk问题 上节内容&#xff0c;我们讲了堆的实现&#xff0c;同时还包含了向上调整法和向下调整法&#xff0c;最后我们…

为什么要安装田间气象站?

随着农业科技的发展&#xff0c;越来越多的农民朋友开始关注如何利用科技手段来提高农业生产效益。其中&#xff0c;安装田间气象站成为了许多农民朋友的选择之一&#xff0c;为什么会有这种情况呢&#xff1f;安装田间气象站会带来哪些优势呢&#xff1f; 一、了解气候变化 气…

Vue3问题:如何实现页面引导提示?

前端功能问题系列文章&#xff0c;点击上方合集↑ 序言 大家好&#xff0c;我是大澈&#xff01; 本文约1700字&#xff0c;整篇阅读大约需要3分钟。 本文主要内容分三部分&#xff0c;第一部分是需求分析&#xff0c;第二部分是实现步骤&#xff0c;第三部分是问题详解。 …