在开发过程中，el-table组件作为UI中的常客，其高度设置问题常让开发者头疼。Element框架贴心地提供了height和max-height两个属性来解决高度调整，但使用时会遇到一些陷阱。遇到的第一个问题是max-height的无效应用。在尝试设置max-height属性后，发现组件无法达到预期效果。通过代码检查，发现问题可能出在外部...
如果想让展示,则可以用样式加上overflow-y: auto 全部代码如下 <template><el-tablesize="small":data="tableData":max-height="tableHeight"style="width: 100%; overflow-y: auto"></el-table></template><script>export default{ data(){ return{ tableHeight: 'calc(100vh - 400px)', } } }</s...
解决办法:手动地再对 表格内容部分 和 fixed部分 最大高度进行赋值 代码: //html 部分<el-table stripe v-loading="loading"borderclass="page-table":data="databaseList"max-height="calc( 100vh - 130px )"@selection-change="handleSelectionChange"> </el-table>//scss 部分::v-deep .page-table{ ...
}//解决固定列覆盖滚动条let fixed_left = table.querySelector('.el-table .el-table__fixed') let fixed_right= table.querySelector('.el-table .el-table__fixed-right')if(fixed_left) { fixed_left.style.height= 'calc(100% - 8px)'}if(fixed_right) { fixed_right.style.height= 'calc(1...
// 这个方法是当el-table设置max-height时,el-scroll height:100%失效,导致el-scroll-wrap的margin-right失效,所以给el-scroll设置height为max-height的高度 bodyScrollHeight() { const { headerHeight = 0, footerHeight = 0} = this.layout; if (this.maxHeight) { ...
//el-table通过colgroup标签设置html宽度 const colgroup = table.querySelector("colgroup"); const colDefs = [...colgroup.querySelectorAll("col")]; //忽略 设置了宽度 序号 多选框 的列 //判断gutter是否已存在 const gutter = colgroup.querySelector(`col[name=gutter]`) ...
这个方法需要在表格外层设置一个div,原理是将表格的高度设置成外层div的高度,所以外层的div需要使用calc来设置高度,然后给表格设置:height="tableH"的属性 <div class="table-wrapper" ref="tableWrapper" v-loading="loading"> <el-table :data="tableData" stripe style="width: 100%" :height="tableH"> ...
}//解决固定列覆盖滚动条letfixed_left = table.querySelector('.el-table .el-table__fixed')letfixed_right = table.querySelector('.el-table .el-table__fixed-right')if(fixed_left) { fixed_left.style.height='calc(100% - 8px)'}if(fixed_right) { ...
PAGE PAGE 1 el-table表头根据内容自适应完美解决表头错位和固定列错位 将代码复制到指令中即可使用。通过指令方式进行调用。(使用方式 el-table v-tableFit/el-table) 通过计算文字的宽度进行表头设置,其他内容无法计算。 5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间越长。 尽量...
[x] 支持高度自适应 (v-height-adaptive) 安装 npm install @cell-x/el-table-sticky 注册指令 全局注册指令: importelTableStickyfrom'@cell-x/el-table-sticky'Vue.use(elTableSticky)// 或者Vue.use(elTableSticky,{StickyHeader:{// 吸顶偏移量,可以是 CSS 支持的距离值,如 `0px`、`10%`、`calc(...