el-table组件的固定表头和高度自适应问题

最新推荐文章于 2024-05-29 14:59:22 发布
最新推荐文章于 2024-05-29 14:59:22 发布
阅读量4.5k 收藏 6
点赞数 2
分类专栏： vue 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Suk__/article/details/124069754
版权

首先上问题图:

除了高度超出和没有内部滚动条之外,表头也没有固定直接滚动上去了,我想要的效果是表头固定只有数据滚动,table外面的layout盒子也不滚动,只是表格内容区滚动,并且表格高度刚好和分页条触底,整个表格都在首屏

目标效果图:

解决方法:

首先高度问题我们可以在el-table外面套一层盒子,高度用calc减去其它的高度给到这个盒子,然后el-table上加上一个props: height="100%" 即可

 

至于固定表头的做法就是写了height这个props就会自动固定,官方原话:

  

williamyi74
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
el-table添加固定高度height后高度自适应
Gpointy的博客
10-27 1954
新建目录src/directive/el-table。
el-table高度适配问题
程序猿GTC
05-22 1963
当多个tabs时，如果table高度，依赖性其父组件的高度，只有第一个tabs高度为实际值，其他tabs的高度为0，但mounted时，已经赋值给table,会导致其他tabs的table显示不出来。2 在tabs的子组件设置一个属性，外层的高度获取到后，通过属性传给子组件，子组件显示时，直接计算一下（减去其他部分的高度，一般就是底部查询或操作高度，底部分页高度）el-table不能自适应高度，必须给定具体的值，才能显示正常，同时在数据条数超过其高度时，table出现滚动条，而不是整个页面出现滚动条。
element el-table 设置行高 和表头高度
最新发布
小韩要快乐！
05-29 1854
第二种方式el-element-ui的方法。第一种方式 使用css。
element表格固定高度
不同场景下的水平居中
07-16 2222
需求描述：表格内容多，不使用分页，只在表格内容区域滚动，去掉滚动条，去掉滚动条 复现及解决方法： 固定表格高度 .el-table { height: calc(100vh - 630px); } 出现滚动条： 去掉滚动条 // 隐藏el-table的滚动条 (表格固定高度时，会出现滚动条) /deep/.el-table .el-table__body-wrapper::-webkit-scrollbar { width: 0px; /* 宽度为0隐藏 */ } 出现问题： 1）右
el-table显示滚动条，但表头固定（解决方法）
weixin_38345306的博客
03-07 5862
el-table显示滚动条，但表头固定（解决方法）
el-table调整表头行高
balbalaijk的博客
07-25 1925
el-table样式布局调整
element-ui表格el-table固定表头，统一控制行高
Mark的博客
03-11 6377
log: 1.固定表头增加height 2.表格数据内容太大导致行高不统一，如下代码处理行高统一为40px 组件： <el-table class="tableClass" :data="formData.result" border height='350' width='500'> <el-table-column v-for="key in formData.listkey" :key="key" :prop="key" :label="key"> &
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
10-17
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法，非常具有实用价值，需要的朋友可以参考下
【JavaScript源代码】el-table表头根据内容自适应完美解决表头错位和固定列错位.docx
12-28
总结来说，这个解决方案通过自定义Vue指令实现了`el-table`的列宽自适应，根据单元格内容动态计算宽度，有效地解决了表头错位和固定列错位的问题。使用时只需在`el-table`标签上添加`v-tableFit`指令，即可自动调整...
vue element 中的table动态渲染实现（动态表头）
12-13
通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.tableData" height="400px" max-height="400px" size="small" row-class-name=...
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
10-16
- **表头样式**：为了让表头固定，需要对`thead`和`tbody tr`应用`display: table`和`table-layout: fixed`。这使得列宽度根据其内容自动扩展，即使在滚动时也能保持对齐。 ```css table thead, tbody tr { ...
element el-table 高度自适应
热门推荐
weixin_45753961的博客
03-26 2万+
element el-table 高度自适应 解决el-table的高度不能适应不同电脑的分辨率，也不能跟随浏览器的高度变化而变化的问题 效果： 前言 在这台电脑开发时设置了el-table的高度为500px，但是在小电脑，就看不到table后面几条数据了，浏览器高度缩小后，也看不到table后面几条数据。怎么让el-table的高度可以跟随变化呢？这篇文章的重点就是这个了。 一、解决思路 利用以下几点解决： 1.el-table的max-height属性 2.css的calc算法 3.dom的clie
el table 固定表头和首行_element table固定表头，表的高度自适应解决方法
weixin_39757040的博客
12-22 1304
主要是通过在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应。标签：第一种JS处理方式：export default {data(){return {tableHeight: 50,tableData: []}},mounted:function(){setTimeout(() => {this.tableHeight = window.innerHeight ...
ElementUI表格el-table表头固定自适应高度解决方案
HDD_lf的博客
01-17 3295
el-table header固定body高度自适应并滚动 elementui官方给出的header固定body滚动方案仅需给height属性赋值，但当我们遇到并不能写死height的情况，或许你会抛弃height，通过css使整个表格高度自适应并滚动，但表头也会被滚上去，就很不优雅。这时你可能会想到通过:show-header="false"隐藏表头并在上方另写一表通过配置css仅显示该表的表头，曲线救国，实现表头固定表体高度自适应并滚动（实际上，这是我 灵机一动 想到的，也确实这么做了，也不是不行，就是
element 表格头部设置高
小布丁儿的博客
04-27 2141
<el-table :header-cell-style="{ textAlign: 'center', height: '80px',}" > <el-table-column></el-table-column> <el-table-column></el-table-column> </el-table&..
el-table固定表头（设置height）出现内容过多时不能滚动问题
qq_42192641的博客
11-17 2276
解决：加一个div并设置其高度和overflow。主要原因是el-table没有div包裹。
ElementUI表格el-table自适应高度（表头表尾固定不动）
从兄的博客
11-13 1914
div class="mt-10" :style="{'height':tableHeight}"> vue绑定变量。使用JS动态获取窗口高度。
el-table设置高度自适应，动态设置height
zyynb的博客
02-23 1万+
vue+el-table设置高度自适应，动态设置height
第十二篇：element ui table表格表头固定，下边表格滑动
maliyao4233的博客
07-14 2146
注意：我说的这个方法适用于如果下边多一行是计算结果。如果正常的表格滚动就不用这么麻烦。问题：表格固定，但是滑动的时候表头也动的解决办法。给顶部标题导航加个定位就好了。
ant design 自适应高度表格_element Table组件固定表头且高度自适应
05-30
要实现Ant Design自适应高度的表格并且固定表头，可以使用Element UI的Table组件。具体实现步骤如下： 1. 引入Element UI库和样式文件： ``` import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) ``` 2. 在模板中使用Table组件，并设置表格高度和固定表头： ``` <template> <div> <el-table :data="tableData" style="width: 100%; height: 100%;" :height="tableHeight" :max-height="maxHeight" v-loading="loading" border stripe highlight-current-row ref="table" > <el-table-column prop="name" label="Name" fixed width="200" ></el-table-column> <el-table-column prop="age" label="Age" width="200" ></el-table-column> <el-table-column prop="address" label="Address" ></el-table-column> </el-table> </div> </template> ``` 其中，`:height`绑定表格高度，`:max-height`绑定表格最大高度，`fixed`设置列固定，`width`设置列宽度。 3. 在组件中计算表格高度： ``` <script> export default { data() { return { tableData: [], loading: true, tableHeight: 0, maxHeight: 0 } }, methods: { // 获取表格数据 getData() { // ... }, // 计算表格高度 setTableHeight() { const tableEl = this.$refs.table.$el const tableHeaderEl = tableEl.querySelector('.el-table__header-wrapper') const tableFooterEl = tableEl.querySelector('.el-table__footer-wrapper') const tableBodyEl = tableEl.querySelector('.el-table__body-wrapper') const tableHeight = tableEl.offsetHeight - (tableHeaderEl ? tableHeaderEl.offsetHeight : 0) - (tableFooterEl ? tableFooterEl.offsetHeight : 0) - (tableBodyEl ? tableBodyEl.offsetHeight : 0) this.tableHeight = tableHeight this.maxHeight = tableHeight } }, mounted() { this.getData() this.$nextTick(() => { this.setTableHeight() }) } } </script> ``` 在mounted钩子函数中，先获取表格数据，然后使用$nextTick方法在DOM渲染完毕后计算表格高度，最后将计算结果绑定到表格的`height`和`max-height`属性上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值