table表格自动循环滚动
实现效果：
自动循环滚动
功能点：
1. 当表格内容超出时，自动滚动，滚动到最后一条之后在从头滚动。
2. 鼠标移入表格中，停止滚动；移出后，继续滚动。
1.vue-seamless-scroll依赖的使用（不太推荐）
<vue-seamless-scroll :data="detailData" :class-option="classOptionThree" class="warp">
<table style="width:100%; height:90%" cellspacing="0" cellpadding="0">
......
</table>
</vue-seamless-scroll>局部引入或全局引入后，用组件包住要滚动的表格，并将表格数据传进去。
参数：detailData是表格数据数组，classOptionThree是滚动的参数，
computed: {
classOptionThree() {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
};
},
},这个实现效果是表头也会跟着滚动，要想表头不滚动很简单，利用两个表格组件，
1. 需要滚动的表格去掉表头，用vueSeamlessScroll 组件包着，
2. 将另一个表格放在vueSeamlessScroll 组件外边，只显示表格标题。
这个组件有个缺陷：数据更新的时候，dom却不会更新。为了解决这个问题，可以利用v-if的强制刷新。在数据有更新时先将upDateFlag设为false,过100毫秒再设为true。
<vue-seamless-scroll v-if='upDataFlag' :data="detailData" :class-option="classOptionThree" class="warp">
<table style="width:100%; height:90%" cellspacing="0" cellpadding="0">
......
</table>
</vue-seamless-scroll>
this.upDataFlag=false
setTimeout(()=>{
this.upDataFlag=true
},100)看似很完美，但是坑在业务场景了，数据刷新频率在10秒左右，也就意味着在业务场景中只会看到前几条数据，因为每次数据更新，都会从头滚动。
2.使用scrollTop属性（比较推荐这个）
<template>
<div class="infoBoxLeft">
<div class="tableBox">
<div class="table-header">
<div class="header-name" style="width: 1.32rem; text-align: center">
时间
</div>
<div class="header-name" style="width: 1.32rem; text-align: center">
企业名称
</div>
<div class="header-name" style="width: 1.32rem; text-align: center">
业务类型
</div>
<div class="header-name" style="width: 1.32rem; text-align: center">
金额（万元）
</div>
</div>
<el-table
ref="dealTable"
:data="tableList"
highlight-current-row
@mouseenter.native="stopScroll"
@mouseleave.native="startScorll"
height="100%"
:header-cell-style="{
color: 'rgba(15, 54, 153, 1)',
fontSize: '0.15rem',
}"
style="color: #131314; font-size: 0.14rem"
>
<el-table-column prop="dealTime" label="" align="center" show-overflow-tooltip/>
<el-table-column
prop="mount"
label=""
align="center"
show-overflow-tooltip
/>
<el-table-column
prop="quarter"
label=""
align="center"
show-overflow-tooltip
/>
<el-table-column
prop="mount"
label=""
align="center"
show-overflow-tooltip
/>
</el-table>
</div>
</div>
</template>
<script>
import { statisticalApplicationField, getDealInfo } from "./middleapi.js";
export default {
components: { },
data() {
return {
tableList: [],
rolltimer: null
};
},
watch: {},
created() {
this.getDealDynamic();
},
mounted() {
//要放在mounted里面数据加载完成后
this.tableScroll(false);
},
methods: {
//获取成交动态信息
getDealDynamic() {
getDealInfo().then(res => {
if (res.data.status) {
this.tableList = res.data.data.dealList;
}
});
},
//表格滚动开始
startScorll() {
this.tableScroll(false);
},
stopScroll() {
this.tableScroll(true);
},
tableScroll(stop) {
if (stop) {
clearInterval(this.rolltimer);
return;
}
const table = this.$refs.dealTable;
const divData = table.bodyWrapper;
this.rolltimer = setInterval(() => {
divData.scrollTop += 1;
if (
divData.clientHeight + divData.scrollTop + 1 >
divData.scrollHeight
) {
if (table.tableData.length > 5) {
divData.scrollTop = 0;
}
}
}, 50);
}
//表格滚动结束
}
};
</script>
<style lang="less" scoped>
@font-face {
font-family: "SourceHansCN";
src: url("~@/assets/font/SourceHanSansCN-Regular.otf");
}
.infoBoxLeft {
padding: 0.1rem 0;
.tableBox {
width: 535px;
height: 330px;
position: relative;
.table-header {
width: 535px;
height: 48px;
position: absolute;
z-index: 1000;
display: flex;
flex-direction: row;
line-height: 48px;
.header-name {
//font-family:Microsoft YaHei;
color: #44dcff;
font-size: 14px;
font-family: "sHans", "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: rgb(60, 171, 231);
//border-radius:4px !important;
box-shadow: 0px 2px 20px rgba(15, 95, 223, 0.4) !important;
color: #ffffff !important;
}
/deep/.el-table__header-wrapper {
height: 0.48rem;
}
/deep/.el-table .cell {
color: #dee8ff;
font-size: 14px;
font-family: "sHans", "Helvetica Neue", Helvetica, "PingFang SC",
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
background-color: transparent;
}
/deep/ .el-table tr,
/deep/ .el-table th.el-table__cell,
/deep/ .el-table,
/deep/ .el-table__expanded-cell {
background-color: transparent !important;
}
/deep/ .el-table::before {
background-color: transparent !important;
}
/deep/ .el-table .el-table__cell {
padding: 0.08rem 0;
}
/deep/ .el-table td.el-table__cell,
/deep/ .el-table th.el-table__cell.is-leaf {
border: 0;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
display: block;
width: 2px !important; /*滚动条宽度*/
height: 2px !important; /*滚动条高度*/
}
/*定义滚动条轨道 内阴影+圆角*/
/deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
box-shadow: 0px 1px 3px #eff0f3 inset; /*滚动条的背景区域的内阴影*/
// border-radius: 10px; /*滚动条的背景区域的圆角*/
background-color: #f7f7f8 !important; /*滚动条的背景颜色*/
}
/*定义滑块 内阴影+圆角*/
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
box-shadow: 0px 1px 3px #8da2ef inset; /*滚动条的内阴影*/
border-radius: 4px; /*滚动条的圆角*/
background-color: #5d7ae6 !important; /*滚动条的背景颜色*/
border: 1px solid #6688e5 !important;
}
/deep/ .el-table__body-wrapper {
.el-table__body {
width: 100% !important;
}
}
/deep/ .el-table th.el-table__cell {
//background-color: rgb(180, 218, 239);
}
//标题加下划线
/deep/.el-table__header-wrapper,
.el-table__footer-wrapper {
border-bottom: none;
}
}
}
</style>
这里el-table里的el-table-column加with这个属性在后有一些浏览器会不适配，为了避免适配问题就不设置with这个属性了，加一个show-overflow-tooltip属性就可以。