以下是一些方法和步骤,用于实现el-table高度的强制重新计算: 1. 理解el-table组件及其高度计算机制 el-table组件默认会根据其容器的高度自动调整内容的高度,并在需要时显示滚动条。但是,如果容器的尺寸在组件渲染后发生变化,el-table不会自动重新计算其高度。 2. 查找el-table强制重新计算高度的方法或属性 Element ...
<el-table ref="myTable" :data="tableData" :height="tableData.length ? tableHeight : 150" 没有数据的时候也要给个高度,显示表头,和表格为空的显示文本 这个高度是计算属性computed来实现的,我没有单独写setget方法,所以并不能直接 this.tableHeight = 0 这个在请求列表为空的时候需要设置,所以我直接在...
otherHeight:35;//底部高度或布局不同多出来的其他高度returnallHeight-top-paging-Number(height);//返回表格最大高度,35为底部默认padding高度}// tab切换时触发表格高度重新计算resetHeightForTab(){constel=document.querySelector('.list-content')consth=el.offsetHeight el.style.height=h-5+'px'//1像素...
原因:el-table组件会根据传入的 max-height 计算表格内容部分 和 fixed部分的最大高度,以此来生成滚动条和产生滚动效果,当传入的 max-height 为一个计算的高度时无法自动地完成计算 解决办法:手动地再对 表格内容部分 和 fixed部分 最大高度进行赋值 代码: //html 部分<el-table stripe v-loading="loading"borde...
前提:在项目中做动态表格,有时表格内容会错位,有时表格高度计算错误 原因:在获得数据之后DOM不重新渲染了,即DOM渲染发生在获取数据之前 解决方法:获取数据之后再让表格重新渲染,在el-table的 Table Methods中有一个方法 在请求获得数据后,立刻获取更新后的DOM ...
[Component] [table-v2] el-table-v2组件,当同时使用 estimatedRowHeight 和 fixed 的时候,fixed的那一列高度计算有误,使用estimatedRowHeight * length显示,导致高度不够 #16446 Open yezhibiao opened this issue Apr 10, 2024· 0 comments Open [Component] [table-v2] el-table-v2组件,当同时使用 ...
再通过css选择器进行样式穿透 动态计算table的高度 .table-fixed{/deep/.el-table__body-wrapper{height:calc(100%-44px)!important;}} 这样也可以解决以上的问题,但同时也会存在其他问题,比如当你的某一个表头文字过多需要两行显示时,那么headerHieght 的高度就不再是44px,,这样就会造成底下最后一条或者多条数...
踩的坑是写成 :key="Math.random()",导致出现table抖动问题 el-table设置最大高度 <el-table ref="tableRef" :data="data" :max-height="tableHeight"></el-table> <script> export default { data() { return { tableHeight: 0 } }, mounted() { this.$nextTick(() => { this.tableHeight ...
* v-zcCalcTableHeight , 专门用来在el-table上根据tableData的行数,动态开启纵向滚动的指令。 * 主要作用: * 1. 避免行数过多导致分页组件会浮在表格上 * 2. 避免行数不足时,表格内有底部有冗余的空间, * *注:需要组件存在 calcTableHeight 属性(属性名可自定义),同时在el-table表格组件添加: ...