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

最新推荐文章于 2024-05-15 11:07:50 发布
原创 最新推荐文章于 2024-05-15 11:07:50 发布 · 704 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js #elementui

这篇博客探讨了在动态设置table高度时，遇到浏览器缩放导致table宽度无限拉长的常见问题。作者提供了一个解决方案，即通过给table的父元素添加定位CSS属性来避免这种情况。此方法有助于保持页面布局的稳定性。

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

vue+element弹窗可拖拽拉伸和弹窗内table高度自适应
李墨瞳的博客
12-10 3742
vue+element的弹窗，自定义指令实现弹窗可拖拽拉伸。解决因为拉伸事件导致的无法选中弹窗里表单文字的问题。添加了边界判断条件，不允许拖到可视范围之外了。添加了弹窗如果有表格，对表格进行自适应的功能
自己造轮子之如何用HTML+JS搭建表头/列固定Table
随时准备转行
08-21 3613
手肝HTML+JS的表头/列固定Table组件
【记录】element Plus table设置了height=100%时，当数据为空时，table高会出现无限变大的情况
陈铭杰的博客
02-28 1273
当table设置了height100%，而tableData又是空的时候，会出现height无限自动增大。造成此问题的原因，应该是table高100%没有绝对定义相对那个元素的高。正常情况是height会固定不变了，只有tableData为空时才会出现。
vue+element el-table拉动每列的宽度，并保存到cookie里
qq_42907330的博客
06-18 1941
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 9997
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 1776
今天在火狐浏览器下演示自己的vue项目，发现试用的element-ui中的table表格在伸缩布局中flex:1属性下存在表格无线拉伸的现象。被人鄙视了一把，心里哪个滋味呀，你懂的。。。 话不多说，上现象 老弟你这是要去哪里，现在疫情这么严重，不让出门不知道吗？ 查询资料后，发现伸缩布局在火狐浏览器下存在兼容性问题，而在谷歌浏览器下是可以正常显示的。 解决方法 1.在flex:1的元...
解决 el-table 不停无限拉伸的问题，数据重新渲染无限伸长
diwj的专栏
04-29 6870
解决 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刷新时表头长度拉长
04-23
在 Vue3 和 Element-Plus 中，`el-table` 组件刷新后表头长度发生变化的问题通常是由动态列显示隐藏 (`v-if`) 或者未正确设置 `key` 属性引起的。以下是针对此问题的具体分析和解决方案： #### 1. **动态列的关键...
在vue2中合并单元格后，再次筛选数据后，页面出现合并列的宽度会被拉长，导致数据错位问题
最新发布
10-31
在element-ui的表格中，当我们使用合并单元格（通过`span-method`方法）后，如果再进行数据筛选（即改变表格数据），可能会引起表格布局错乱，特别是合并列的宽度异常拉长，导致数据错位。 解决方案思路： 1. 确保...
el-table宽度无限延长问题处理
Cocoon_Xu的博客
05-15 3286
本以为理所应当就好了，实际并没彻底解决问题，推敲后发现 table的宽度100%，应该是一个具体的数值，所以我把注意力放到了包裹table的容器里，由于上层div容器需要自适应屏幕宽度，所以容器的样式做了以下处理。今天遇到一个奇怪现象，使用element-ui处理表格里，当表格里数据为空，视图里的表格宽度在不断拉长，查找原因看到 table有个行内样式width在不断变化，如图。开始我以为是ele-ui官方插件的一个bug，然后在百度上查了一下相关问题，给el-table处理了样式。
[element-ui] el-table在flex布局中，高度不断增加的问题
qq_14993591的博客
11-21 2481
el-table的父元素不能是flex：1的元素，需要在外面再加一层元素，并且父元素设置成absolute，祖父元素设置成relative即可。
element ui tab表格无限拉伸问题解决方案
danke的博客
07-25 741
【代码】element ui tab表格无限拉伸问题解决方案。
el-table 宽度100%无限延伸问题解决方法
CodingmanNAN的博客
04-19 5199
使用 elementUI Table 组件，实现宽度自适应方案之一
flex布局子元素el-table宽度无限增加解决办法
JCAL123的博客
05-04 1931
左侧固定宽度，右侧自适应宽度**，只需要给el-table的外层(可以是父级，也可以是爷爷级)css添加`min-width:0;`即可
动态设置页面表格高度
zengdaoqiang的博客
03-27 295
/ 监听页面窗口缩放时设置高度。
element UI中flex布局下el-table宽度自适应在IE下出现一直加载宽度的bug解决
u013994400的博客
03-01 870
element-ui 表格列会动态持续增加
element-ui的table在flex布局下宽度一直增大的问题，解决了！！（亲测有效果）
全栈小菜鸟
10-31 2572
el-table的父元素不能是flex：1的元素，需要在外面再加一层元素，并且父元素设置成absolute，祖父元素设置成relative即可。今天开发博客后台界面时遇到了这个问题，百思不得其解！
element ui table tooltip设置宽度
09-12
Element UI 的 Table 组件中的 tooltip（提示框）默认是没有固定宽度的，它的大小会根据内容自动调整。如果你想要设置 tooltip 的宽度，可以使用自定义组件或者通过 CSS 进行控制。 1. **使用自定义组件**：你可以创建一个具有固定宽度的自定义 tooltip，并将它应用到 Element UI 的 `tooltip` 属性上。例如： ```html <el-table-column label="列名" prop="property"> <template slot-scope="scope"> <span :title="scope.row.tooltipWithFixedWidth"> {{ scope.row.content }} </span> </template> </el-table-column> ``` 然后在样式表中设置 `tooltipWithFixedWidth` 的 width: ```css .el-tooltip { width: 100px; /* 自定义你的宽度值 */ } ``` 2. **CSS 直接修改**：如果不想使用自定义组件，可以在全局样式表或者单独的 scoped 样式中直接设置 tooltip 的样式，比如： ```css .el-tooltip.is-dark { width: 100px; } ``` 这里的 `.is-dark` 可能需要替换为实际的 tooltip 类名，可以根据 Element UI 的文档查找正确的类名。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值