笔记：iview 当table没有数据的时候 table宽度无限增加

最新推荐文章于 2024-04-01 17:46:58 发布
最新推荐文章于 2024-04-01 17:46:58 发布
阅读量696 收藏 1
点赞数 1
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sky8880/article/details/122662821
版权

1.这个问题其实很简单就是没有绝对的宽度限制加上拥有自适应的机制才会导致这种结果。

解决：

1.查看你的css里面是否有这样的机制。

比如我导致的问题就是：

修改前：👇

 修改后：👇

 其实就是 把flex：1换成一个相对固定的机制

skyseey
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现el-table-column列宽根据内容自适应且无数据时自动撑开表头
megamind0430的博客
04-23 5292
使用element-ui在移动端进行数据展示时，表头都是根据设定width和min-width来撑开的。但有时单条数据的内容会很多，不希望每个表格的高度不一致，所以有了希望根据表格数据最长的长度来设置表头宽度的需求。 这里是利用了一个插件ExTableColumn，具体操作方法： 通过继承实现el-table-column列宽根据内容自适应 大神写的插件，用npm下载到项目中，根据里边的步骤配置，是可用的。 但使用的时候遇到了一些问题，记录一下。 1.表格没有任何变化，但是表格里面的数据内容超出了边.
iview3.0.1版本中 Table组件在flex布局下面宽度会自动无限增加的问题
gaojing1023的博客
06-18 2080
项目中页面布局如下 出现这种情况的原因可能是组件本身的bug解决办法: 1.不用flex布局 2. 使用flex布局，给container-panle一个宽度 width: calc(‘100% - MemberTop的宽度’)
iview中tabs嵌套table，table无限延长问题
jeremygeng的博客
11-12 1970
iview中tabs嵌套table，table无限延长问题 之前在做项目的时候，使用的是Vue + iview框架；项目中有个需求，就是 需要在tab切换中，嵌套一个表格； 后来布局完成之后，一看效果，好家伙，这表格怎么还玩了个无限宽度呢？ 后来经过一番探索之后，发现原来是tab的动画效果导致的，只要把tab组件的 animate属性设置成false就可以了； 原因： 使用动画后，是基于trans...
【ant-design】Table 在 Flex 布局情况下, 无限加宽的问题
hzxOnlineOk的博客
01-12 723
https://github.com/ant-design/ant-design/issues/10902
前端笔记，table标签中td宽度不受控制的坑
小小鱼儿小小林的博客
07-21 2489
问题发现 在table标签中，td的宽度设置好后，是没有用的，因为table是一个整体，他的td宽度是由其中一个最长td宽度决定的， 原因是浏览器默认情况下，如果有一个单词很长，导致一行剩下的空间放不下，则浏览器会把这个单词挪到下一行去。但是如果新行还是放不下，则会溢出，就会变成下面的样子， 如图所示 问题解决 这时候只要在table标签上加 word-wrap: break...
iview和elementUi表格宽度或高度无限拉伸变大的三种解决方案
rongyi2233的博客
08-22 2562
flex布局，表格宽度无限变宽。
解决iView Table组件宽度只变大不变小的问题
01-18
打开开发者工具其实你可以发现iView给table标签的宽度加上了一个明确的宽度值，而且在父元素变小的时候这个值并没有相应地变小，所以才会导致的iView Table组件只会变大不会变小。 那么我们就可以根据这个原因才决定...
iview table高度动态设置方法
08-27
其中，iView Table 是一个非常常用的组件，用于显示表格数据。然而，在使用 iView Table 组件时，固定高度的设置可能会导致在不同分辨率的屏幕上显示不完全。这篇文章将为大家分享一个 iview Table 高度动态设置方法...
iview的table组件自带的过滤器实现
12-10
iview的table组件自带的过滤器实现 iview框架的table组件自带的过滤器的使用方法： [removed] export default { data () { return { columns: [ { title: 'Name', key: 'name' }, //过滤器 //通过给 ...
iview 表格 暂无数据 展示缺省页
细节怪的博客
09-06 890
项目需求为：进入页面，初始加载数据（初始数据为空）时不展示缺省页，等调用接口，获取不到数据以后再展示缺省页图片。
怎么让iview表格有动态行动态列?
bydfguifd的博客
01-08 268
iview表格使用动态行动态列
el-table 宽度100%无限延伸问题解决方法
CodingmanNAN的博客
04-19 3643
使用 elementUI Table 组件，实现宽度自适应方案之一
elementUI中el-table表格在flex布局下出现表格宽度一直在增大变化的问题解决方案(100%解决！！！)
嘿嘿
09-06 7609
解决方案： 在table外层包一层div元素，设置css宽度继承自父级宽度，添加代码：position:absolute; width:100%;一般上级元素就设置这flex布局flex:1;加入一行代码：position:relative; 示例截图： 注意： 如果遇到flex布局中使用 el-table 时高度也出现撑开的问题时，解决思路同上，重点在于表格 el-table 外面父元素不能直接是设置有 flex:1;属性的元素，必须在表格外面在套一层父级元素，并设置绝对定位posit..
el-table宽度无限变大问题
Gpointy的博客
04-14 2491
自己搭建了一个Layout，整体结构如下：Layout.vue。
浏览器页面缩放导致弹性布局页面无限扩张的问题(overflow的妙用)
最新发布
Summer_Uncle的博客
04-01 516
根据原型设计和需求文档,搭建如图项目框架(vite+vue3+js),主要页面使用弹性布局搭建.但是在反复缩放页面的情况下,main盒子出现越来越宽的情况,缩放次数越多,main盒子越宽,导致出现滚动条和页面被无限拉伸.
html横向无限宽,html横向
weixin_39611769的博客
07-09 182
html横向 内容精选换一换return0;}图三：影响力计算图四：横向累加图五：横向累加结果图六：纵向累加图七：纵向累加结果更高级的用法暂时用不到，记录一个地址，有空再看。参考资料http://imoz.jp/algorithms/imos_method.html来自：博客main.go 快速开始Html转pdf基础转换http://127.0.0.1:8080/convert/html2pdf...
html 给一个无限宽,html – CSS div与其内容一样宽
weixin_29980355的博客
06-15 283
我还是一个CSS新手.多年来,我使用嵌套表管理我的布局,我知道所有的CSS人都会告诉我是邪恶的.我已经用CSS多年了,但从一开始我一直无法按照我想要的方式控制我的布局.简而言之,我想要的是< div>那只会和它的内容一样宽.我不想设置它的大小.我希望它的内容与动态创建的内容一样宽泛.一个表完美地完成了.使用< div>它似乎总是像我想要的那样做.没有我想要的“溢出”选项.典...
element UI中flex布局下el-table宽度自适应在IE下出现一直加载宽度的bug解决
u013994400的博客
03-01 587
element-ui 表格列会动态持续增加
iview 动态table 列宽度
08-09
iview是一款基于Vue.js的UI组件库，其中包含了丰富的组件，其中包括动态table组件。对于iview的动态table组件来说，设置列宽度有两种方式。 第一种方式是通过在columns字段中设置width属性来设置列宽度。例如： ``` columns: [ { title: '姓名', key: 'name', width: 100 // 设置姓名列的宽度为100px }, { title: '年龄', key: 'age', width: 80 // 设置年龄列的宽度为80px }, // 其他列... ] ``` 第二种方式是通过自定义列的slot插槽来设置列宽度。通过这种方式，可以灵活地自定义列的内容和样式。例如： ``` <template> <Table :columns="columns"> <template slot-scope="{ row }" slot="name"> <div style="width: 100px;">{{ row.name }}</div> </template> <template slot-scope="{ row }" slot="age"> <div style="width: 80px;">{{ row.age }}</div> </template> </Table> </template> <script> export default { data() { return { columns: [ { title: '姓名', key: 'name', }, { title: '年龄', key: 'age', }, // 其他列... ] } } } </script> ``` 通过以上两种方式，可以灵活地设置iview动态table组件中的列宽度。根据需求选择适合的方式来设置表格列的宽度，以便展示合适的数据内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值