表格改成轮播表格效果

表格改成轮播表格效果

//使用表格组件
<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 设置为负值

1. margin-left,margin-right:

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

2. margin-top:

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

3. margin-bottom:

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

css 属性 style.transition

• transition 设置过渡效果

参考

• margin 为负值
• 轮播图效果