1、方法 methods: {scroll(){ let el= document.querySelector('.el-table__body-wrapper') el.addClassName='anim'setTimeout(()=>{//console.log(this.items[0])this.tableData.push(this.tableData[0]);//将数组的第一个元素添加到数组的this.tableData.shift();//删除数组的第一个元素},2000) ...
1. 确定el-table内容需要滚动的方式 首先,你需要确定你的表格内容是需要水平滚动、垂直滚动,还是两者都需要。 2. 在el-table标签中添加相应的滚动属性 水平滚动:当表格列宽超出容器宽度时,可以通过设置 max-width 或width 属性在列上,并在 el-table 上添加 scroll-x="true" 来实现水平滚动。 垂直滚动:当表格行...
},// 计算位置calcPosition () {constlast =this.data.length-1// 计算内容总高度constwrapHeight =this.getOffsetTop(last) +this.getSize(last)// 计算当前滚动位置需要撑起的高度constoffsetTop =this.getOffsetTop(this.start)// 设置dom位置constclassNames = ['.el-table__body-wrapper','.el-table_...
const selectWrap = el.querySelector('.el-table__body-wrapper'); function handleScroll(event) { let sign = 50; // 距离底部的高度 const currentScrollTop = this.scrollTop; let direction = 'down'; if (currentScrollTop > this.lastScrollTop) { // console.log('向下滚动'); direction = '...
第一步: 获取到当前滚动加载的el-table表格节点 注意的是 如果存在多个表格,用ref获取dom节点,需要指定为第一个, 并且是当前dom节点下的bodyWrapper...
有一个需求,当el-table的宽度超出浏览器宽度时,虽然el_table底部会出现滚动条,但是每次需要先滚动到底部,才能使用el-table的滚动体,很是麻烦。因此当el_table的宽度超出屏幕宽度时,要在可视范围底部添加一个横向的滚动条,在网上找了四篇不同方法,全都试了一遍,四个方法的原文地址以及效果图我都贴出来了,看个人...
实现效果:表格自动滚动,鼠标移入暂停,移出滚动。<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表格滚动可以通过定义两个table实现,第一个table展示标题,第二个table展示滚动内容。把内容放在vue-seamless-scroll组件中即可。 一、vue-seamless-scroll是什么? vue-seamless-scroll是一个为Vue.js设计的轻量级无缝滚动组件,它能实现元素列表在达到边界时平滑循环滚动的效果。支持自定义滚动方向、速度等,适用于...
一.el-table表头固定,表格内容滚动 <style lang="less" scoped> /deep/.el-table__header-wrapper { position: sticky; width: 100%; top:0px;z-index: 2000; } </style> <el-tab-pane label="登录日志" name="1"> <el-table v-loading="listLoading" :data="loginLogData" style="height:480px...