ElementUI表格el-table表头固定自适应高度解决方案

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

        el-table的height属性可以方便地实现表格固定，但是这个值该设置为多少以适配屏幕大小呢？设置过小，则可能出现可视区域内有空白位置，但是表格内却出现滚动条；设置过大，则在一些小屏幕设备上浏览时，页面本身和表格内部都可能会出现滚动条。两种情况体验都是极差的，为了解决这个问题，我们需要动态地计算页面空白区域的高度，然后设置到height属性，即根据页面大小，动态计算height属性。

ElementUI表格el-table表头固定自适应高度终极解决方案：

https://wintc.top/article/54

木马啊
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
12-30
在开发中，需要表格控件根据浏览器高度进行调整，固定表头，且然后多余的出滚动条，官方给出的： 只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。 然后直接上template代码： ...
vue element 中的table动态渲染实现（动态表头）
12-13
通过在vue中使用element的table表格，实现数据动态渲染，并且动态渲染表头。通过在父组件中引入子组件表格，然后向子组件传递表格数据和表头数据。 子组件table中template模板 <el-table :data="this.table...
element-ui表格el-table固定表头，统一控制行高
Mark的博客
03-11 6313
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"> &
element表格固定高度
不同场景下的水平居中
07-16 2191
需求描述：表格内容多，不使用分页，只在表格内容区域滚动，去掉滚动条，去掉滚动条 复现及解决方法： 固定表格高度 .el-table { height: calc(100vh - 630px); } 出现滚动条： 去掉滚动条 // 隐藏el-table的滚动条 (表格固定高度时，会出现滚动条) /deep/.el-table .el-table__body-wrapper::-webkit-scrollbar { width: 0px; /* 宽度为0隐藏 */ } 出现问题： 1）右
Element ui ＜el-table＞表格高度自适应
最新发布
weixin_56796650的博客
05-10 664
element ui搭配vue实现表格el-table高度自适应，可以自定义留出的距离
el table 固定表头和首行_element table固定表头，表的高度自适应解决方法
weixin_39757040的博客
12-22 1293
主要是通过在mounted生命周期中，改变tableHeight的值，来让表格的高度自适应。标签：第一种JS处理方式：export default {data(){return {tableHeight: 50,tableData: []}},mounted:function(){setTimeout(() => {this.tableHeight = window.innerHeight ...
el-table固定表头（设置height）出现内容过多时不能滚动问题
qq_42192641的博客
11-17 2190
解决：加一个div并设置其高度和overflow。主要原因是el-table没有div包裹。
el-table的自定义行高设置
qq_43894292的博客
11-09 4050
el-table的自定义行高设置
【JavaScript源代码】el-table表头根据内容自适应完美解决表头错位和固定列错位.docx
12-28
el-table表头根据内容自适应完美解决表头错位和固定列错位 　将代码复制到指令中即可使用。通过指令方式进行调用。（使用方式 <el-table v-tableFit></el-table>） 　通过计算文字的宽度进行表头设置，其他内容无法...
解决layui数据表格table的横向滚动条显示问题
12-11
ps：这个问题fly社区给出的解释是：table 列宽自适应出现横向滚动条的几率一般是比较小的，主要原因是 table 的渲染有时会在浏览器纵向滚动条出现之前渲染完毕，这时 table 容器会被强制减少滚动条宽度的差（一般是 ...
ElementUI表格el-table自适应高度（表头表尾固定不动）
从兄的博客
11-13 1882
div class="mt-10" :style="{'height':tableHeight}"> vue绑定变量。使用JS动态获取窗口高度。
element-ui 表格el-table高度不是一个固定值时固定表头
lingliu0824的博客
01-05 5542
当height不是一个固定值时，如期望表格可以填充完页面剩余空间，并且固定表头时，可以通过给height属性赋值字符串形式实现。**1.使用一个单独的标签包裹el-table组件，父级组件使用flex纵向布局,父级的高度需要确定（通过固定px或者百分比或者其父级也是纵向flex布局，其设置flex:1来确定高度）/* 可以根据需要设置,也可以是百分比或者在父级flex布局中通过flex:1来确定高度 */height可以为数字或者字符串，当为一个数字时表示固定的高度，也可以为百分比等字符串。
flex布局下el-table表格高度自适应、表格头部固定
JCAL123的博客
01-03 639
flex布局下el-table表格高度自适应、表格头部固定
VUE + Element UI el-table fixed固定列高度问题
LEON_RAY
12-08 5471
<el-table class="table-fixed"></el-table> .table-fixed{ /deep/ .el-table__fixed-right { height: 100% !important; //设置高优先，以覆盖内联样式 } /deep/ .el-table__fixed { height: 100% !important; //设置高优先，以覆盖内联样式 } } 原文：element-ui ta...
[element-ui] 表格el-table表头固定自适应高度解决方案
qq_14993591的博客
04-02 3704
flex布局 <body> <div id="app" class="flex-c"> <div class="header flex-s">头部导航</div> <div class="content flex-a flex"> <div class="left flex-s">左部菜单</div> <div class="ri.
vue+el-table 根据屏幕大小动态设置height属性以固定表头
热门推荐
qq_42204033的博客
09-13 2万+
el-table需要固定表头时只要在标签里加上height属性就可以了，但是怎样根据屏幕大小自动调整height属性呢？ 解决办法：vue加载时计算下需要给table设置的height &lt;el-table ref="table" :data="info" :span-method="colspanMethod" :height="tableHeight"&gt; &lt;el-...
vue项目中动态控制table高度
weixin_45757442的博客
10-15 931
vue项目中动态控制table高度 給table加上如下属性 :max-height="maxHeight" data中定义最大高度 maxHeight:'' 在钩子函数中改变最大高度 mounted(){ this.$nextTick(()=>{ this.maxHeight = document.body.offsetHeight - this.$refs.tabel.$el.getBoundingClientRect().top - 70 }) }, ...
element-UI description描述列表固定宽度
coldriversnow的专栏
06-15 1万+
description描述列表
日常开发记录-el-table 固定列下横向滚动条无法拖动的问题解决方案
machine_vision123的博客
08-25 1362
原因：层级问题，左侧固定列层级高，滚动条层级低，提升一下滚动条层级即可 注意要在全局样式中定义类 fixed-scrool-error样式 .fixed-scroll-error { .el-table--scrollable-x .el-table__body-wrapper { z-index: 2; } } 运用：直接在有问题的表格最外层 标签中使用 fixed-s...
设置vue中的el-table表头自适应宽度
04-27
要设置Vue中的`el-table`表头自适应宽度，可以使用`fit`属性和`width`属性。 使用`fit`属性可以让表格自动调整宽度以适应容器，如下所示： ```html <el-table :data="tableData" :fit="true"> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 使用`width`属性可以设置表头的宽度，如下所示： ```html <el-table :data="tableData"> <el-table-column prop="name" label="姓名" width="100"></el-table-column> <el-table-column prop="age" label="年龄" width="100"></el-table-column> <el-table-column prop="address" label="地址" width="200"></el-table-column> </el-table> ``` 同时使用`fit`属性和`width`属性可以让表格自适应容器并设置表头的宽度，如下所示： ```html <el-table :data="tableData" :fit="true"> <el-table-column prop="name" label="姓名" width="100"></el-table-column> <el-table-column prop="age" label="年龄" width="100"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> ``` 这样设置后，表格会自适应容器的宽度，并且姓名和年龄列的宽度固定为100px，地址列的宽度自适应。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值