原因:官网组件,动态加入数据并不会再次初始化。当缩放窗口就会初始化布局。动态加入数据加上css布局,这就导致了bug,滚动条错位。 注意点:必须要表格的数据获取到,并赋值给table绑定的数据tableData之后,再执行表格的doLayout方法才会生效。这里使用await就是为了确保queryData()结束之后才重新布局表格。 2022/11/20 实...
方法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...
造成bug原因排查: 由于对Table表格进行了二次封装,传递props属性时,传递了align属性,代码实现如下图: 解决办法 删除align属性,滚动条样式正常回显 在二次封装组件时,需要保证组件属性的输入和透出,尽量避免不必要的bug
elementplus的table横向滚动条使用 在使用Element Plus的table组件时,如果表格内容过多导致页面出现横向滚动条,可以通过设置table组件的属性scroll-x来实现横向滚动。具体做法是,在table标签中添加属性scroll-x="true"即可。 除此之外,还可以通过剪切滚动条到table元素实现吸底。如果需要设置el-table的横向滚动条一直显示...
问题描述 当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。 解决办法 法一: 做法:修改el-table__fixed样式。 效果:就是设置bottom值,使得不盖住...
场景设定:当表格列数过多时,添加固定列功能,将序号和名称列锁定在左侧,操作列锁定在右侧,此时会自动出现横向滚动条以供浏览非固定列信息。问题描述:然而,问题在于横向滚动条在固定列的下方位置无法使用。滚动条只能在非固定列部分下方操作,无法触及固定列区域。问题分析:这是由于固定列遮挡了下方的...
通过消除横向滚动条,可解决以上问题。 通过网络查询的解决方案如下: 方案一:尝试在渲染后修改数据让table重绘 在配置化组件的updated钩子更新columns数据(中间需做一层转换,禁止直接修改props),但table貌似不会将数据进行双向绑定,所以table没有出现改变,也就不会触发第二次宽度计算。
场景:表格列数太多,为表格添加固定列,将序号和名称列固定在表格左侧,操作列固定在表格右侧,出现横向滚动条,可以通过拖动滚动条查看非固定列。 问题:横向滚动条在固定列下方的位置无法拖动。只有在非固定列的下方位置才可以拖动 问题原因:固定列将下方的滚动条盖住了,无法触发滚动条的滚动。
但是,我觉得用可变列表格的方式可以更灵活、省事。 不仅是这种情况,在所有的需要表格的列的数量不固定的情景中都可以用,比如数据列表模板什么的。 怎么实现可变列表格?或者说具体思路是怎么样的? 1、我们先提出一个设想,在element中,table是由很多个el-table-column构成的,那么我们可不可以通过循环el-table-column...