表格改成轮播表格效果

表格改成轮播表格效果

//使用表格组件 <el-table ref="waitTable" :data="waitApproData" style="margin-top: 10px">   <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 设置为负值

1. margin-left,margin-right:

• 没设置宽度时，宽度增加
• 有设置宽度时，产生位移效果

2. margin-top:

• 不管是否设置高度，都不会增加高度，而是会产生向上的位移

3. margin-bottom:

• 不会位移，高度减少，使该元素的后一个元素产生位移效果

css 属性 style.transition

• transition 设置过渡效果

参考

• margin 为负值
• 轮播图效果