1.修改el-table__fixed样式 .el-table{ .el-table__fixed{ height:auto!important; bottom:17px!important; } } 这种解决方法:就是设置bottom值,使得不盖住滚动条。缺点:不适用与含有合计的table,如果含有合计,合计也会上移。 2.修改el-table__body-wrapper样式的层级,随便设个层级就可 .el-table__body-w...
在开发过程中，el-table组件作为UI中的常客，其高度设置问题常让开发者头疼。Element框架贴心地提供了height和max-height两个属性来解决高度调整，但使用时会遇到一些陷阱。遇到的第一个问题是max-height的无效应用。在尝试设置max-height属性后，发现组件无法达到预期效果。通过代码检查，发现问题可能出在外部...
el-table中的el-table-column提供了一个fixed属性设置固定列,但是设置了之后发现表格的滚动条无法拖动了,通过F12定位到页面元素发现是滚动条被固定列生成的元素给覆盖了,于是想办法通过修改样式的方式解决问题。 <stylelang="scss"scoped>.el-table{.el-table__fixed { // 左固定列 height:auto !important;bottom...
方法1、在el-table上手动添加滚动条 1、在el-table上方添加一个div,div的宽度和表格的宽度相同。 <div ref="topScroll" class="top-scroll"> <div class="top-scroll-content" :style="{ width: topScrollWidth }"></div> </div> <el-table ref="tableRef" :data="list" v-loading.body="listLoad...
<el-table ref="tableRef" ……>……</el-table> <script>exportdefault{ data() {return{//2. 定义变量,是否需要表格重新渲染needDoLayout:true, } } created() {this.queryData(); }, methods: { queryData() {//查询数据代码 省略//3.第一次查询数据时,将表格重新渲染即可if(this.needDoLayout)...
el-table中的el-table-column提供了一个fixed属性设置固定列,但是设置了之后发现表格的滚动条无法拖动了,通过F12定位到页面元素发现是滚动条被固定列生成的元素给覆盖了,于是想办法通过修改样式的方式解决问题。 <stylelang="scss"scoped>.el-table{.el-table__fixed { // 左固定列 ...
1.当使用了合计功能把对el-table__body-wrapper进行超出隐藏,将滚动条加到合计区域el-table__footer-wrapper,此时通过监听合计区域的滚动事件来触发el-table__body-wrapper的滚动。 2.使用虚拟滚动条:为el-table添加虚拟滚动条。通过虚拟滚动条的滚动来触发el-table__footer-wrapper和el-table__body-wrapper的滚动...
场景:表格列数太多,为表格添加固定列,将序号和名称列固定在表格左侧,操作列固定在表格右侧,出现横向滚动条,可以通过拖动滚动条查看非固定列。 问题:横向滚动条在固定列下方的位置无法拖动。只有在非固定列的下方位置才可以拖动 问题原因:固定列将下方的滚动条盖住了,无法触发滚动条的滚动。
要启用 el-table 的滚动功能,你需要设置 el-table 的height 属性(对于垂直滚动)和/或 max-height 属性(同时控制最大高度和是否出现垂直滚动条),以及通过 width 属性或列定义中的 min-width 属性来控制列的宽度(对于水平滚动)。 示例代码 以下是一个简单的示例,展示了如何启用 el-table 的滚动功能: ...