table{width:100%;表格布局：固定；border-collapse:collapse;}th,td{line-height:35px;颜色：#ffffff；文本对齐：居中；分词：保留所有；/*不换行*/white-space:nowrap;/*不换行*/overflow:hidden;/*内容超出广度时间隐藏超出部分的内容*/text-overflow:ellipsis;/*对于IE*/}.scroll-box{width:100%;高度：100%；溢出：隐藏；位置：相对；}.tab-scroll{表格布局：固定；字体大小：16px；位置：绝对；左：0；顶部：0；边框顶部：无；左填充：60px；.isDisabled{指针事件：无；游标：不允许；}.yellow{颜色：#dada09;}.green{颜色：#04ba19;}}.left-button{位置：绝对；左：4px；填充：24px14px；顶部：50%；转换：翻译（0，-50%）；宽度：46px；高度：221px；颜色：#fff;文本对齐：居中；行高：26px；字体大小：18px；z-指数：100；边框：纯色1px#31467d；左边框：无；颜色：#65c6e7;}.show{背景：url('../../../assets/dashboard/icon_packup.png');宽度：12px；高度：14px；变换：旋转（180度）；显示：内联块；背景大小：包含；}.hide{背景：url（'../../../assets/dashboard/icon_packup.png'）;宽度：12px；高度：14px；显示：内联块；背景大小：包含；}.deviceInfoBox{表格布局：固定；字体大小：16px；颜色：#fff；宽度：100%；z-指数：50；文本对齐：居中；过渡：500ms全部缓入；th{颜色：#65c6e7;空白：nowrap；}td{颜色：#ffffff；空白：nowrap；}.yellow{颜色：#dada09;}.green{颜色：#04ba19;}}.flex-row-center{显示：flex;弹性方向：行；对齐项目：居中；}.flex-row{显示：flex；flex-direction:行;}.flex-col-center{显示:flex;弹性方向：列；证明内容：中心；}.network-container{高度：100%；溢出：自动；最小宽度：38.4rem；背景：url('./imgs/img_bg.png')不重复；背景大小：100%100%；字体大小：50px；显示：弹性；弹性方向：列；高度：100%；宽度：100%；>div{宽度：100%；}.network-center{位置：相对；保证金：0.2rem0.4rem00.4rem；宽度：计算（100%-0.8rem）；最小高度：9.64rem；弹性：1；溢出：隐藏；＆：之前{内容：'';显示：块；高度：0.5rem；宽度：0.5rem；位置：绝对；背景：url('./imgs/img_map_bg_01.png')不重复；背景大小：100%100%；左：3px；顶部：3px；z-指数：99；}img{位置：绝对；背景大小：100%100%；高度：0.5rem；宽度：0.5rem；z-指数：99；}>img:nth-child(1){右：3px；顶部：3px；}>img:nth-child(2){右：3px；底部：2px；}&:after{内容：'';高度：0.5rem；宽度：0.5rem；位置：绝对；背景：url('./imgs/img_map_bg_03.png')不重复；背景大小：100%100%；底部：2px；左：3px；z-指数：99；}.network-center-content{border:solid0.02rem#31467d;宽度：计算（100%-0.12rem）；高度：100%；保证金：0.06rem；溢出：隐藏；左填充：60px；}.page-bar{位置：绝对；右：0；底部：0；右边距：10px；底部边距：10px；/deep/.el-pagination.is-background.btn-prev,/deep/.el-pagination.is-background.btn-next,/deep/.el-pagination.is-background.el-pagerli{背景-颜色：#04162a；边框：纯色1px#31467d；颜色：#2bfaff；边距：03px；}/deep/.el-pagination.is-background.el-pagerli:not(.disabled).active{背景色:#43d5d7;}}}}最近遇到一个项目（vue系列）的两个需求，在此记录一下，分享给大家。原生Table列表实现轮询需求：当table列表数量少时，不进行轮询，只有当高度超过一定高度时才进行；鼠标移入暂停轮询，移出继续轮询。首先原型图是这样的：右下角有一个页面，使用了elementUI的分页组件，改变了样式。主体是本机表轮询。top，比如margin-top=-1px，margin-top=-2px；margin-top=-3px;...，当这个值大于行高时，说明这条数据已经被滚动了，然后恢复margin-top=0，插入到tbody底部，实现轮询.直接上传代码：HTML设备类型设备类别设备编号设备位置任务延迟设备状态任务完成进度任务开始时间任务结束时间任务时长
{{si.name||'-'}}{{si.type||'-'}}{{si.deviceCode||'-'}}{{si.posistion||'-'}}{{Number(si.delayedTime)+'ms'}}{{si.delayedTime||'-'}}<tdclass="sysState":class="{'yellow':si.sysState=='2','green':si.sysState=='3'}">{{deviceStateArr[si.sysState]||'-'}}{{si.progress||'-'}}{{si.workStartTime||'-'}} | {{si.workEndTime||'-'}} | {{si.duration}} |
