通过浏览器中调试,发现将.el-table__body-wrapper的overflow属性隐藏再显示,横向滚动条就不会出现了,应该是重新添加overflow: auto;使得浏览器自身重新计算了table的宽度,所以宽度足够的情况下不需要显示横向滚动条; 具体做法: <!--template--><el-table ref="configurationTable"border:data="data":height="height...
这里涉及到两个Dom元素,类名分别为el-table__body-wrapper、el-table__body通过观察发现横向滚动条在于el-table__body-wrapper上,el-table__body则是实际的列表内容,当el-table__body宽度超出el-table__body-wrapper时就会出现横向滚动条。 因此只需要动态的修改el-table__body-wrapper的height即可实现想要的效果。
默认的table组件当表格过长时,下方会出现横向的滚动条,便于用户对表格进行左右滑动。考虑到页面美观问题,滚动条设置的很窄,导致用户使用时不方便进行左右滑动。 现要求,去除表格下方滚动条,用户可直接拖拽表格实现左右滑动功能。 表格设置固定表头和列,实践证明并不影响此功能。 思路 鼠标点击进行拖拽,首先想到鼠标的点...
因为表格的列数多,所以table必然会出现横向滚动条。当行数过多时,出现纵向滚动条,操作时,就需要先滚动到表格底部,然后进行左右的拉动,这样是用户操作很不方便。 应对方案 当数据过多,table的X轴滚动条不在可视区域时,给table的父级容器添加一个滚动条perfectScrollbar,然后将perfectScrollbar的scroll值赋值给table...
通过消除横向滚动条,可解决以上问题。 通过网络查询的解决方案如下: 方案一:尝试在渲染后修改数据让table重绘 在配置化组件的updated钩子更新columns数据(中间需做一层转换,禁止直接修改props),但table貌似不会将数据进行双向绑定,所以table没有出现改变,也就不会触发第二次宽度计算。
项目前端使用vue框架,页面使用element-ui进行页面快速搭建。默认的table组件当表格过长时,下方会出现横向的滚动条,便于用户对表格进行左右滑动。考虑到页面美观问题,滚动条设置的很窄,导致用户使用时不方便进行左右滑动。 现要求,去除表格下方滚动条,用户可直接拖拽表格实现左右滑动功能。
</el-table> 通过设置表格的宽度,可以让表格在超出容器宽度时出现横向滚动条。 2. 固定表头 通过设置表格的固定表头属性,可以让表头固定在表格顶部,表格内容部分出现横向滚动条,具体代码如下: <el-table :data="tableData" style="width: 800px" height="300"> <el-table-column prop="date" label="日期" ...
简介: ElementUI el-table 设置固定列,横向滚动条在固定列的位置上无法滚动的问题 问题描述 当我们使用element table,有时我们需要部分的列固定,我们就给列添加了 fxied属性,但是这时候你会发现table的横向滚动条很难拖动,查找原因你会发现原来是固定的列把滚动条给挡住了,只有超出固定的部分滚动条才可以拖动。
// 解决有合计行时,横向滚动条在左侧、右侧固定列中无法选中问题.el-table__fixed,.el-table__fixed-right{pointer-events:none;>*{pointer-events:all;}} 问题代码,感兴趣的可以自己试下 <!-- element ui 样式demo --><template><divclass="main-content"><divclass="my-title">固定列</div><divclass...