1. 理解el-table左右滑动需求 当表格的列数较多,或者某些列的宽度较大时,整个表格的宽度可能会超出其容器的宽度。这时,我们需要通过水平滚动条来查看表格中隐藏的部分。 2. 查找el-table组件文档关于滚动的部分 在Element UI(一个基于Vue.js的前端UI框架,其中包含了el-table组件)的官方文档中,有关于表格滚动的说...
if (e.which !== 1) return const divData = odiv.querySelector('.el-table .el-table__body-wrapper') if (mouseFlag && divData) { // 设置水平方向的元素的位置 divData.scrollLeft -= (-mouseOffset + (mouseOffset = e.clientX)) } } // 解决有些时候,在鼠标松开的时候,元素仍然可以拖动;...
在table-column列数据过多会出现横向滚动条,编辑表单后,会对table组件进行重新渲染同时横向滚动条会回到最左侧,希望控制滚动条保持在最右侧 方法: refs[‘tableList’]上有一个bodyWrapper里面有scrollLeft 属性,可以设置表格左滑动的距离为整个表格的宽度,而表格的宽度在refs[‘tableList’].bodyWidth,替换字符串和变...
在使用el-table的时候,在数据多的情况下滚动表格会看不到表头是什么,可以使用高度自适应,这是对表格高度的限制同时会出现滚动条,这样用户体验不好,所以考虑不设置高度通过表头吸顶来实现。 思路 网上也有一些解决方案写了一大堆代码。很麻烦。(os:我没成功过) 我研究了el-table的dom结构,发现其实只需要少量简单的...
el-table表格设置滚动条 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。如果表格只有一条数据...
方法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...
实现效果:表格自动滚动,鼠标移入暂停,移出滚动。<div class='' style='height: 260px;width:560px' @mouseout='mouseout' @mouseover='mouseover'> <el-table :data='tableData' :height='240'要有一个固定高度 style='width: 100%' > <el-table-column align='center' label='序号' type="index" ...
解决el-table数据过多且有左右滚动条在最下方 上图为解决后的方案图, 出现原因: 数据过多时出现Y轴滚动条,并有X左右滚动条的情况, 如果在el-table标签写css样式出现Y轴滚动条的情况下,X轴滚动条在最下面,需要把Y轴拖到最下面才能看到。 可以在el-table上面用max-height解决...
el-table自定义滚动条大小后出现错位 #程序员 - 程序员小山与Bug于20211206发布在抖音,已经收获了144.9万个喜欢,来抖音,记录美好生活!
// 设置滚动位置 if(this.scrollLeft) { letid ='#perTable_'+this.randomNum const el = document.querySelector(id) setTimeout(() => { try{ $(el).find('.el-table__header-wrapper')[0].scrollLeft = scroll[0] $(el).find('.el-table__body-wrapper')[0].scrollLeft = scroll[1] ...