<el-table ref="tableRef" :data="list" v-loading.body="listLoading"> </el-table> 1. 2. 3. 4. 5. 6. 给两个div添加样式,里面的div一定要设置高度,不设置的话滚动条出不来 .top-scroll { width: 100%; overflow-x: auto; } .top-scroll-content { /* 高度不设置的话滚动条出不来 */ ...
通过浏览器中调试,发现将.el-table__body-wrapper的overflow属性隐藏再显示,横向滚动条就不会出现了,应该是重新添加overflow: auto;使得浏览器自身重新计算了 table 的宽度,所以宽度足够的情况下不需要显示横向滚动条; 具体做法: <!-- template --> <el-table ref="configurationTable" border :data="data" :he...
1、我们先提出一个设想,在element中,table是由很多个el-table-column构成的,那么我们可不可以通过循环el-table-column构造一个table? 2、要循环el-table-column,那么我们就需要一个由多个列组成的集合,他有3个字段,分别是列名、列显示文本和列宽,如下 tableCols1: [ { name: "date", label: "日期", width:...
在Element-UI中,Table组件是一个非常有用且强大的组件,可以实现对数据表格的展示、排序、过滤等功能。其中,Table组件还支持固定列的功能,即将某一列或多列固定在表格的左侧或右侧,使得用户在横向滚动表格时,固定的列始终可见,方便用户查看。 然而,使用Table组件的固定列功能后,可能会遇到一个问题——滚动条的显示。
在使用Elemet UI时,常用的el-table组件的固定列显示不正常: a.固定列最后一行显示不正常,最后一行横向只显示一部分。 b.用横向滚动条滚动表格时,固定列跟着一起滚动。 解决方法 a.解决问题a时百度挺管用,很多人都遇到这个问题,于是按照别人的答案,修改固定列的高度。
【element-plus】Table表格横向滚动条显示不正确解决办法 滚动条bug展示如下: 造成bug原因排查: 由于对Table表格进行了二次封装,传递props属性时,传递了align属性,代码实现如下图: 解决办法 删除align属性,滚动条样式正常回显 在二次封装组件时,需要保证组件属性的输入和透出,尽量避免不必要的bug...
背景:使用Element UI table,内容超过一屏,且出现横向滚动条时,如果想看右边的列,需要先把竖向滚动条拉到下面,然后拖动横向滚动条到右边,再把竖向滚动条拉上去,非常不方便。 建议:表格内容超过一屏时,横向滚动条固定在窗口底部,向下拖动竖向滚动条,表格底部出现在视口内时,横向滚动条复位到表格底部。 这个方案应该能...
Element UI table组件中的滚动条无效问题 技术标签:Vue项目bug修复javascript前端vue.jselementui 目录 项目场景: 问题描述: 原因分析: 解决方案: 项目场景: 在最近的项目中接触了下拉框与表格数据联动的需求: 通过点击select下拉框节点触发列表渲染,页面初始化时默认选中下拉框中第一个节点并渲染数据。 问题描述: ...
1.横向滚动条且左侧列固定时,滚动条的可操作区域被遮挡,必须点击空白处才可实现拖动,更改样式解决: /deep/#outputTable .el-table__fixed { .el-table { .el-table__fixed { height:auto !important; bottom:17px !important; } } } /deep/#outputTable .el-table__body-wrapper { ...