excel如何制作轮播图（表格改成轮播表格效果）

表格改成轮播表格效果

//使用表格组件 <el-table ref="waitTable" :data="waitApproData"> <el-table-column label="标准集" prop="sortName"></el-table-column> </el-table>

重点（js 设置部分）

//为表格添加事件 let isScroll = true; nextTick(() => { let div: HTMLElement | null = document.querySelector(".el-table"); console.log("div", div); if (div) { div.style.height = "330px"; div.addEventListener("mouseenter", function() { isScroll = false; }); div.addEventListener("mouseleave", function() { isScroll = true; }); let t = document.querySelector(".el-table__body") as HTMLElement; if (t) { setInterval(() => { if (isScroll) { var data = waitApproData.value[0]; setTimeout(() => { waitApproData.value.push(data); t.style.transition = "all .5s"; t.style.marginTop = "-41px"; }, 500); setTimeout(() => { waitApproData.value.splice(0, 1); t.style.transition = "all 0s ease 0s"; t.style.marginTop = "0"; }, 1000); } }, 2500); } } });

设置 margin-top 变化是为了每条数据都产生一次位移效果  
  
  
  
  
  
  
  ，模拟向上滑动效果 
  
  
  
  
  
  
  
，如果只设置一次就只会第一条数据产生位移效果

涉及到的知识点

margin 设置为负值 margin-left,margin-right: 没设置宽度时


 


 


 


 


 


 


 

，宽度增加 有设置宽度时 
 
 
 
 
 
 
 ，产生位移效果 margin-top: 不管是否设置高度  
   
   
   
   
   
   
   
，都不会增加高度

 

 

 

 

 

 

 
，而是会产生向上的位移 margin-bottom: 不会位移
 

 

 

 

 

 

 

 ，高度减少               ，使该元素的后一个元素产生位移效果 css 属性 style.transition transition 设置过渡效果

参考

margin 为负值 轮播图效果