element table 动态设置高度，宽度无限拉长

最新推荐文章于 2024-05-15 11:07:50 发布
最新推荐文章于 2024-05-15 11:07:50 发布
阅读量653 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： vue 文章标签： 前端 vue.js elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Autumn_yun/article/details/127866302
这篇博客探讨了在动态设置table高度时，遇到浏览器缩放导致table宽度无限拉长的常见问题。作者提供了一个解决方案，即通过给table的父元素添加定位CSS属性来避免这种情况。此方法有助于保持页面布局的稳定性。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

问题描述:动态设置table高度，缩小或放大浏览器页面，table的宽度会无限拉长
解决方法:
在这里插入图片描述
style给父元素添加定位css

vue+element弹窗可拖拽拉伸和弹窗内table高度自适应
李墨瞳的博客
12-10 3688
vue+element的弹窗，自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件，不允许拖到可视范围之外了。添加了弹窗如果有表格，对表格进行自适应的功能
Element UI的表格table列的宽度自适应设置
热门推荐
腾讯全栈-ITCJF
03-23 9万+
不要设置 width="110px" <el-table-column prop="login_id" align="center" label="工号"> </el-table-column> <el-table-column prop="login_id" width="110px" align="center" label="工号...
vue+element el-table拉动每列的宽度，并保存到cookie里
qq_42907330的博客
06-18 1907
1.在表格上写@header-dragend=“surverWidth” 2.表头造成数组 surverWidth(newWidth, oldWidth, column, event){ setTimeout(() => { // console.log(newWidth, oldWidth, column, event) var applyTableColWidths = [] var applyTable = document.getElementById(‘applyTable’) var
element-ui 表格组件设置最大高度后 宽度无限拉长问题
xiexie16888的博客
05-14 9875
table表格中的属性是可添加的所以需要给table添加一个滚动条 所以就做了如下操作： .el-table { width: 100%; >>> .el-table__body-wrapper { max-height: 300px; } } 更改过后就出现了表格宽度无限拉长的情况； 检查后发现造成这样的原因有两个： 一个是由于父级元素为flex布局， 另一个问题是没有给table表格添加一个高度 只是给他的子级组件.el-table__body-wrapper添
浏览器兼容性专题一 在火狐浏览器下父级为flex:1的布局中el-table无限被拉伸
车联网开发的博客
03-31 1747
今天在火狐浏览器下演示自己的vue项目，发现试用的element-ui中的table表格在伸缩布局中flex:1属性下存在表格无线拉伸的现象。被人鄙视了一把，心里哪个滋味呀，你懂的。。。 话不多说，上现象 老弟你这是要去哪里，现在疫情这么严重，不让出门不知道吗？ 查询资料后，发现伸缩布局在火狐浏览器下存在兼容性问题，而在谷歌浏览器下是可以正常显示的。 解决方法 1.在flex:1的元...
解决 el-table 不停无限拉伸的问题，数据重新渲染无限伸长
diwj的专栏
04-29 6690
解决 el-table 不停无限拉伸的问题 1.找了很多解决办法不管用，最终解决办法如下 （1）设置表格的max-height // An highlighted block <el-table border :data="tableData" max-height="500px"> `` （2）设置完发现虽然没问题，但是浏览器缩放依然存在无限拉伸的问题，这时需要做自适应 ```javascript ::v-deep .el-table{ width: 100%; .el-
el-table 横向无限拉长怎么回事
07-27
el-table 是 Element UI 提供的表格组件，它的横向无限拉长功能可以通过设置宽度为 "auto" 来实现。具体的步骤如下： 1. 在 el-table 中的 <el-table-column> 标签中，设置固定的列宽度，例如：width="100px"。 2. ...
实现el-table-column列宽根据内容自适应且无数据时自动撑开表头
megamind0430的博客
04-23 5809
使用element-ui在移动端进行数据展示时，表头都是根据设定width和min-width来撑开的。但有时单条数据的内容会很多，不希望每个表格的高度不一致，所以有了希望根据表格数据最长的长度来设置表头宽度的需求。 这里是利用了一个插件ExTableColumn，具体操作方法： 通过继承实现el-table-column列宽根据内容自适应 大神写的插件，用npm下载到项目中，根据里边的步骤配置，是可用的。 但使用的时候遇到了一些问题，记录一下。 1.表格没有任何变化，但是表格里面的数据内容超出了边.
el-table刷新时表头长度拉长
最新发布
04-23
在 Vue3 和 Element-Plus 中，`el-table` 组件刷新后表头长度发生变化的问题通常是由动态列显示隐藏 (`v-if`) 或者未正确设置 `key` 属性引起的。以下是针对此问题的具体分析和解决方案： #### 1. **动态列的关键...
[element-ui] el-table在flex布局中，高度不断增加的问题
qq_14993591的博客
11-21 2299
el-table的父元素不能是flex：1的元素，需要在外面再加一层元素，并且父元素设置成absolute，祖父元素设置成relative即可。
el-table宽度无限延长问题处理
Cocoon_Xu的博客
05-15 2847
本以为理所应当就好了，实际并没彻底解决问题，推敲后发现 table的宽度100%，应该是一个具体的数值，所以我把注意力放到了包裹table的容器里，由于上层div容器需要自适应屏幕宽度，所以容器的样式做了以下处理。今天遇到一个奇怪现象，使用element-ui处理表格里，当表格里数据为空，视图里的表格宽度在不断拉长，查找原因看到 table有个行内样式width在不断变化，如图。开始我以为是ele-ui官方插件的一个bug，然后在百度上查了一下相关问题，给el-table处理了样式。
element ui tab表格无限拉伸问题解决方案
danke的博客
07-25 706
【代码】element ui tab表格无限拉伸问题解决方案。
el-table 宽度100%无限延伸问题解决方法
CodingmanNAN的博客
04-19 4926
使用 elementUI Table 组件，实现宽度自适应方案之一
flex布局子元素el-table宽度无限增加解决办法
JCAL123的博客
05-04 1841
左侧固定宽度，右侧自适应宽度**，只需要给el-table的外层(可以是父级，也可以是爷爷级)css添加`min-width:0;`即可
动态设置页面表格高度
zengdaoqiang的博客
03-27 268
/ 监听页面窗口缩放时设置高度。
element UI中flex布局下el-table宽度自适应在IE下出现一直加载宽度的bug解决
u013994400的博客
03-01 844
element-ui 表格列会动态持续增加
element-ui的table在flex布局下宽度一直增大的问题，解决了！！（亲测有效果）
全栈小菜鸟
10-31 2521
el-table的父元素不能是flex：1的元素，需要在外面再加一层元素，并且父元素设置成absolute，祖父元素设置成relative即可。今天开发博客后台界面时遇到了这个问题，百思不得其解！
浏览器拉伸覆盖html页面,table自动拉伸在chrome与IE中的兼容性问题解决
weixin_31282885的博客
06-05 463
最近在做浏览器兼容，有个table自动拉伸的问题一直困扰着我，这个问题今天终于告一段落了，这篇文章我是极力推荐的，如果碰到这个问题的朋友，我相信你一定会感激我的，如果文章对你有帮助，请留言支持，也可以进行交流。table这个html中的元素很多人是不推荐用的，因为table有时候不好控制，一些内容自动非配td宽度以及内容撑开，边的问题有时候很让人头疼，如果你有此类问题，欢迎与我交流，俗话说，横排用...
dwz中的table
weixin_34349320的博客
07-26 396
为什么80%的码农都做不了架构师？>>> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值