遇到这个问题的原因,估计是我外部包裹的div没有设置固定高度,而不设置固定高度的原因还是在于想适配不同大小的浏览器。所以使用calc(100% - 300px)无效,然后尝试了下面使用vh的写法: <el-table :data="tableData" max-height="calc(100vh - 300px)" style="width: 100%"> ... ... </el-table> 诶,...
一、问题分析 根据调试,发现该问题应该属于组件bug,表格主体中给 footer留的高度不够导致,重新设置即可。 二、解决方法 添加生命周期钩子 updated ,对 table 组件重新布局即可解决问题。具体如下: 1 2 3 4 5 6 7 8 <el-table show-summary border ref="table" :data="dataList" :height="tableHeight" :s...
在开发过程中，el-table组件作为UI中的常客，其高度设置问题常让开发者头疼。Element框架贴心地提供了height和max-height两个属性来解决高度调整，但使用时会遇到一些陷阱。遇到的第一个问题是max-height的无效应用。在尝试设置max-height属性后，发现组件无法达到预期效果。通过代码检查，发现问题可能出在外部...
<el-table ref="table":height="500":data="dataSource"show-summary/> </template> <script>exportdefault{ data() {return{ dataSource: [] } }, updated() {this.$nextTick(() =>{this.$refs.table.doLayout() }) } }</script> 在此更新方法中使用更新表格组件 updated() { this.$nextTick((...
打开F12审查元素,会发现el-table默认带有内边距padding。把这个padding置为0就可以使其变成最矮的高度了。去掉padding就会发现表格的高度就是表格中文字内容撑开的高度。这个的确是最矮的了,如果觉得过于矮了,可以通过上图中的一些属性再去设置高点。 原始图(审查元素) ...
el-table高度问题 el-table⾼度问题 1. 外层容器flex=1，el-table设置属性height="calc(100% - 60px)，有时⼀刷新页⾯表格⾼度⽆限增加，滚动条⼀直变短 试验过⼏次后发现是因为el-table的height超过了外层容器⾼度（因为容器⾥不仅有el-table，还有其他div来占⾼度）；只要减少el-table...
<el-table-column prop="key"label="键"> </el-table-column> <el-table-column prop="value"label="值"> </el-table-column> </el-table> </div> </el-collapse-item> </el-collapse> 解决⽅法：取消折叠⾯板动画 //折叠⾯板取消动画 .collapse-transition -webkit-transition: 0s height, ...
通过给table设置calss:table-fixed 再通过css选择器进行样式穿透 动态计算table的高度 .table-fixed{/deep/.el-table__body-wrapper{height:calc(100%-44px)!important;}} 这样也可以解决以上的问题,但同时也会存在其他问题,比如当你的某一个表头文字过多需要两行显示时,那么headerHieght 的高度就不再是44px,,...
如图 方法/步骤 1 打开一个vue文件后添加一个el-table组件，然后设置显示内容为4条数据。如图 2 在el-table标签上添加max-height属性，然后设置值为200，用于设置最大高度不超过200px。如图 3 保存vue文件后使用浏览器打开，这时候就可以看到el-table组件显示的高度小于200。如图 ...