const divData = odiv.querySelector('.el-table .el-table__body-wrapper') if (mouseFlag && divData) { // 设置水平方向的元素的位置 divData.scrollLeft -= (-mouseOffset + (mouseOffset = e.clientX)) } } // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动; odiv.ondragstart = (e) => ...
在table-column列数据过多会出现横向滚动条,编辑表单后,会对table组件进行重新渲染同时横向滚动条会回到最左侧,希望控制滚动条保持在最右侧 方法: refs[‘tableList’]上有一个bodyWrapper里面有scrollLeft 属性,可以设置表格左滑动的距离为整个表格的宽度,而表格的宽度在refs[‘tableList’].bodyWidth,替换字符串和变...
el-table超出一定高度设置滚动条两种方法,设置height和max-height都可出现滚动条。 1、给table设置height属性为250,表格固定有300px这么高。 <el-table:data="tableData"height="250"border style="width: 100%"> 2、给他变了设置max-height为300,表格数据超出250。如果表格只有一条数据,且高度没有超过300.表格...
方法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的时候,在数据多的情况下滚动表格会看不到表头是什么,可以使用高度自适应,这是对表格高度的限制同时会出现滚动条,这样用户体验不好,所以考虑不设置高度...
解决el-table数据过多且有左右滚动条在最下方 上图为解决后的方案图, 出现原因: 数据过多时出现Y轴滚动条,并有X左右滚动条的情况, 如果在el-table标签写css样式出现Y轴滚动条的情况下,X轴滚动条在最下面,需要把Y轴拖到最下面才能看到。 可以在el-table上面用max-height解决...
el-table 会自动显示滚动条,允许用户滚动查看隐藏的内容。滚动条分为水平滚动条和垂直滚动条,分别对应表格宽度和高度超出容器时的场景。 2. 提供如何在el-table中启用滚动条的方法 在el-table 中,滚动条通常是自动启用的,无需额外配置即可使用。但是,你可以通过设置 el-table 的height 属性(控制垂直滚动条)和列...
el-table 左右有列固定时,fixed为left和right时,行未对齐解决办法 * 产生原因: el-table底部有滚动条,固定列底部没有滚动条 * 解决办法: 在el-table的表格中设置padding-bottom的内边距跟滚动条等高 .el-table__body-wrapper { &::-webkit-scrollbar { // 滚动条高 解决行未对齐 height: 18px; } } ...
当el-table的数据条数过多的时候,我们就要固定el-table的表头,从而实现竖向滚动的效果,不过默认的滚动条样式不太好看,所以我们可以修改一下滚动条的样式。其实很简单,css加上样式设置即可。 修改前的滚动条样式 修改语句 // 设置滚动条的宽度 /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10...
.el-table__body-wrapper::-webkit-scrollbar-track { border-radius: 4px; background-color: #f5f5f5; } </style> ``` 上述样式代码中,`::-webkit-scrollbar`选择器用于设置滚动条的宽度,`::-webkit-scrollbar-thumb`用于设置滚动条的轨迹(滑块)的样式,`::-webkit-scrollbar-track`用于设置滚动条的背...