elementui表格没有撑满外层容器，中间有列空白

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

场景再现

在这里插入图片描述

代码

在这里插入图片描述
所有el-table-column都给了固定的width，但从页面上来看，整个table的宽度要大于所有列的宽度，而右侧的操作列给了固定fixed="right"使中间多出来了空白列。

比如：一共有5列，每一列都给了固定宽100px，总和宽为500px，而页面上table的宽未700px，这样就会产生200px的空白。

解决方法

留一列不给宽度，或者给一个最小宽度min-width：使之获取到所有剩余宽度。
我把订单号的width="150"删掉后的效果：

在这里插入图片描述

NOyesNONO_
关注
专栏目录
element-ui Table自适应
Beamon__的博客
04-10 8980
场景描述： 在一个宽高自适应的容器内引入Table组件，容器的宽度和高度不定，需要Table的宽和高随容器大小变化而变化，容器过小时，表格出现滚动条； 解决思路： element-ui的Table组件默认宽度100%，主要解决高度问题，在组件的api说明里，有一个height属性，描述如下： 这一属性的主要作用为设置Table的高度，超出此高度Table会显示滚动条，结合我们的需求，只...
element ui 表格动态列显示空白bug 修复方法
10-18
今天小编就为大家分享一篇element ui 表格动态列显示空白bug 修复方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
ElementUI中的el-table解决宽度问题 - 根据内容自动撑开
最新发布
觉醒法师的专栏
07-03 6329
在使用element-ui中，会发现表格组件el-table在未指定宽度情况下，会自动计算并给表格宽度赋值。但实际开发中，有时需要根据内容实际长度自动撑开显示，由内容的多少而决定表格的宽度，而不是默认宽度为100%。在默认情况下表格宽度为100%显示，并且列项未指定宽度情况下，剩余部分会平均分配宽度，本案例实际需求是由内容自动撑开显示。componentUpdated
elementUI中table组件会出现空白部分
weixin_52309490的博客
06-24 2002
先上图: 造成原因:width全部都写死了，(注释:不要全部都写死width，没写width的会自动分配宽度) 那时候我只有一台录音机也没有电脑 也不敢奢求说唱会让自己的生活变好
el-card里面添加el-table表格无法撑开
段王爷的博客
01-18 2471
在进行页面布局分块后，在el-card卡片里添加el-table后，表格数据无法撑开，只能显示一行且自动带上了滚动条，展示效果十分不理想。通过F12检查发现，.el-card__body该属性的限制导致无法撑开。
elementui踩坑之table组件宽度自适应导致右边空白
weixin_46106673的博客
07-05 2014
在使用elementui中table组件时，设置el-table宽度为100%，当表格列数过少时，右边区域出现空白区域，导致页面展示不美观，因此需要设置最右边的列（el-table-column）的最小宽度，注意不是width，而是min-width。同时其他列不要设置min-width，否则会导致内容只会显示在最开始加载的宽度范围内，一旦通过拖拽来加大列宽，内容显示区域不变。
element table width全部都写死了 出现空白列
weixin_44996006的博客
05-17 310
element table width全部都写死了 出现空白列
Element-UI快速入门
热门推荐
专注于Java领域开发 关注我 带你玩转Java
03-09 9万+
什么是Element UI 这篇文章会告诉你 带你快速入门 学会Element UI
java入职学习六之前端UI（element-ui,ant-design-vue）
Yzq12312的博客
12-12 841
一、element-ui 1.简介 element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 其设计原则为： 一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念； 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 反馈 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作； 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。 效率
2021年最新Web前端面试题精选大全及答案
m0_54861649的博客
03-07 1933
目录 HTML、CSS相关 Javascript相关 三者的异同 Vue相关 55.Vue路由懒加载（按需加载路由） React相关 react 生命周期函数 ******为什么虚拟 dom 会提高性能?(必考) (组件的)状态(state)和属性(props)之间有何不同 shouldComponentUpdate 是做什么的 react diff 原理 何为受控组件 调用 super(props) 的目的是什么 React 中构建组件的方式 小程序相关的 其他 企业中的项目流程 奇葩问题 HTML、C
前端面试八股文（超详细）
m0_67403076的博客
06-21 1万+
Promise 是一种为了避免回调地狱的异步解决方案 2. Promise 是一种状态机： pending（进行中）、fulfilled（已成功）和rejected（已失败） 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。回调地狱回调函数中嵌套回调函数的情况就叫做回调地狱。 回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。Promise是最早由社区提出和实现的一种解决异步编程的方案，比其他传统的解决方案（回调函数和事件）更合理和
table 中，如何使得单元格的内容不换行，单元格不被撑开，显示不下的时候在结尾处显示“...”
06-01
NULL 博文链接：https://rainbow702.iteye.com/blog/2219848
element-ui中el-tree的父元素设置好宽度后不能被子内容撑开的问题
weixin_30545285的博客
11-20 3168
设置完父级的宽度之后，el-tree将不能被撑开，一旦子树的内容太长就显示不出来了； 原因分析： 因为.el-tree-node__content的 display默认的是flex，所以下边的div内容撑不起来，而且.el-tree-node__children的overflow属性是hedden，所以下边的内容一多就自动隐藏了； 解决方法： .el-tree{ ...
el-table右侧有一块空白，为进度条，影响观看
weixin_67849181的博客
03-09 651
给table设置了进度条，只有少量数据的时候很影响观感，感觉table没有盛满。
element-ui table 表格头多出一列
baihua__shu的博客
04-14 7430
问题：el-table 组件 表头右侧多出一列空白 原因： 所有 el-table-column 都设了宽度，当内容超出高度滚动条出现，表头多出一列滚动条上方的占位 解决： 将 th.gutter 隐藏 th.gutter { display: initial; } /* vue 使用 scoped 需要 /deep/ 深度作用 */ div /deep/ th.gutter { display: initial; } 或将 th.gutter ...
antdesignvue表格使用fixed出现空白列——已解决
King的博客
03-06 1971
【代码】antdesignvue表格使用fixed出现空白列——已解决。
element-plus表格列空白问题解决方案
张大娃创业笔记
08-04 2273
element-plus表格列空白问题解决方案element-plus搭建表格出现多余空白原因以及解决方案 element-plus搭建表格出现多余空白 首先来看下图，我们使用表格组件并且设置操作栏fixed浮动在右边的时候可能会出现空白部分 原因以及解决方案 原因是table组件没有固定宽度的父元素包裹，以至于table设置width=100%后组件内部无法准确计算浮动的位置，解决办法就是再写一个标签来包裹table组件，设置以下固定宽度或者这只flex:1,如下图是我的解决代码： ...
解决宽屏下el-table表头错位无法占满宽度100%的问题
随风丶逆风的博客
11-11 4522
问题 在宽屏情况下el-table出现表头错位且无法占满宽度100%的问题： 解决方案 在通用样式文件下，添加如下样式： .el-table th.gutter { display: table-cell !important; } .el-table colgroup.gutter { display: table-cell !important; } 原理 使用display: table-cell可以让标签元素以表格单元格的形式呈现，类似于td标签，此时元素对宽度高度敏感，对margin
vue2 - 详细实现elementUI el-table 将表格布局自适应撑满页面高度（布局优化）
前端充电宝
03-01 3318
vue2详细实现elementUI el-table 将表格布局自适应撑满页面高度
WPF如何不设置border宽高但填满外层容器
07-12
可以使用WPF中的布局容器来实现不设置边框宽高但填满外层容器的效果。常用的布局容器有Grid、DockPanel和StackPanel。 1. 使用Grid布局容器： ```xaml <Grid> <Button Background="Red" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" /> </Grid> ``` 在上面的示例中，我们将一个Button放置在Grid容器中，并将按钮的HorizontalAlignment和VerticalAlignment属性都设置为Stretch，这样按钮就会填满Grid容器的所有可用空间。 2. 使用DockPanel布局容器： ```xaml <DockPanel> <Button Background="Red" DockPanel.Dock="Top" /> </DockPanel> ``` 在这个示例中，我们将按钮放置在DockPanel容器中，并将按钮的DockPanel.Dock属性设置为Top，这样按钮就会填满DockPanel容器的顶部位置。 3. 使用StackPanel布局容器： ```xaml <StackPanel> <Button Background="Red" HorizontalAlignment="Stretch" /> </StackPanel> ``` 在这个示例中，我们将按钮放置在StackPanel容器中，并将按钮的HorizontalAlignment属性设置为Stretch，这样按钮就会填满StackPanel容器的横向空间。 以上是三种常用的布局容器实现不设置边框宽高但填满外层容器的方法。你可以根据自己的实际需求选择合适的布局容器来实现所需效果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值