表格改成轮播表格效果
表格改成轮播表格效果//使用表格组件
<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;
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 为负值
[*]轮播图效果
来源:https://www.cnblogs.com/littleH/p/17130046.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]