html+table+默认样式,原生table实现轮询+css修改默认滚动条样式

最近做项目(vue系列)遇到两个需求，这里做一个记录，分享给大家。

原生Table列表实现轮询

需求：

当table列表数量较少时不轮询，超过一定高度才轮询；

鼠标移入暂停轮询，移出继续轮询

首先，原型图长下面这样：

右下角有个分页，用的是elementUI的分页组件，改了下样式，主体就是一个原生table

轮询有好几种实现方式，网上搜一搜很多，我这里使用js的方式实现，大概的思路就是：通过控制margin-top，比如margin-top=-1px,margin-top=-2px;margin-top=-3px;...,当这个值大于行高时，说明这条数据已经滚动完毕了，这时恢复margin-top=0,并且将它插入到tbody底部，从而实现轮询。直接上代码：

HTML

设备类型设备大类设备编号设备位置任务延时设备状态任务完成进度任务开始时间任务结束时间任务时长

class="tab-scroll"

ref="scroll"

@mouseenter="activeEve(false)"

@mouseleave="activeEve(true)"

>

{ {si.name || '-'}}{ {si.type || '-'}}

@click="handleClick(si)"

:class="{'isDisabled':(si.name !== '混凝土天花打磨') || si.sysState !== '3'}"

>{ {si.deviceCode || '-'}}

{ {si.posistion || '-'}}{ {Number(si.delayedTime)+'ms'}}{ {si.delayedTime || '-'}}

class="sysState"

:class="{'yellow': si.sysState == '2', 'green': si.sysState == '3'}"

>{ {deviceStateArr[si.sysState] || '-'}}

{ {si.progress || '-'}}{ {si.workStartTime || '-'}}{