vue2的写法
import vueSeamlessScroll from "vue-seamless-scroll";
components: { vueSeamlessScroll },
//section 换成div标签也可以
<section style="height: 220px; overflow: hidden">
<!--增加一个表头-->
<el-table class="hidden-tbody" style="width: 100%">
<el-table-column
prop="userName"
label="姓名/IP"
align="center"
></el-table-column>
<el-table-column
prop="eventType"
label="风险类型"
align="center"
:formatter="eventType"
></el-table-column>
<el-table-column
prop="fxLevel"
label="风险等级"
align="center"
:formatter="statuevenType"
></el-table-column>
<el-table-column
prop="fxDesc"
label="风险描述"
show-overflow-tooltip
align="center"
></el-table-column>
<el-table-column
prop="createTime"
label="风险时间"
show-overflow-tooltip
align="center"
></el-table-column>
</el-table>
<!--滚动的列表-->
<vue-seamless-scroll :data="tableList" class="auto-scorll-table" :class-option="classOption">
<el-table
:data="tableList"
class="custom-table-2 hidden-thead mytable_header_no"
style="width: 100%"
hover
>
<el-table-column
prop="userName"
label="姓名"
align="center"
></el-table-column>
<el-table-column
prop="eventType"
label="风险类型"
align="center"
:formatter="eventType"
></el-table-column>
<el-table-column
prop="fxLevel"
label="风险等级"
align="center"
:formatter="statuevenType"
></el-table-column>
<el-table-column
prop="fxDesc"
label="风险描述"
show-overflow-tooltip
align="center"
></el-table-column>
<el-table-column
prop="createTime"
label="风险时间"
show-overflow-tooltip
align="center"
></el-table-column>
</el-table>
</vue-seamless-scroll>
</section>
vue2添加如下设置clsaa-option 直接在table上加入step也行但是最后一个切换到第一个显示的时候会抖动
computed: {
classOption() {
return {
step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 10, // 开始无缝滚动的数据量 this.tableList.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)
};
},
},
//滚动table样式
.hidden-tbody.el-table {
height: 34px;
box-sizing: border-box;
tbody {
//隐藏上面表格的tbody
display: none;
overflow: hidden;
}
}
.auto-scorll-table {
height: calc(100% - 34px);
overflow: hidden;
}
.hidden-thead::v-deep.el-table {
border: none; //防止边框重叠
thead {
//隐藏下面表格的thead
display: none;
overflow: hidden;
}
}
.mytable_header .el-table__empty-block {
display: none;
}
.mytable_header_no .has-gutter {
display: none;
}
vue3写法
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
<!-- 表头的表格 -->
<el-table
style="width: 100%"
v-loading="loading"
:data="tableList"
v-tableScrolling
class="headerTable"
>
<el-table-column
prop="eventName"
label="事件名称"
align="center"
show-overflow-tooltip
/>
<el-table-column
prop="eventLevel"
label="风险等级"
width="80px"
align="center"
>
<template #default="scope">
<dict-tag
effect="dark"
:options="risk_level"
:value="scope.row.eventLevel"
/>
{{ scope.row.eventLevel }}
</template>
</el-table-column>
<el-table-column
prop="deviceName"
label="资产名称"
align="center"
show-overflow-tooltip
/>
<el-table-column
prop="userName"
label="上报人员"
width="80px"
align="center"
/>
<el-table-column
prop="eventDateTime"
label="风险时间"
width="200px"
align="center"
/>
</el-table>
<vue3-seamless-scroll class="seamless-warp" :list="tableList" :step="0.3" style="width: 100%" hover>
<!-- 主体的表格 -->
<el-table
style="width: 100%"
v-loading="loading"
:data="tableList"
v-tableScrolling
height="305"
class="bodyTable"
>
<el-table-column
prop="eventName"
label="事件名称"
align="center"
show-overflow-tooltip
/>
<el-table-column
prop="eventLevel"
label="风险等级"
width="80px"
align="center"
>
<template #default="scope">
<dict-tag
effect="dark"
:options="risk_level"
:value="scope.row.eventLevel"
/>
{{ scope.row.eventLevel }}
</template>
</el-table-column>
<el-table-column
prop="deviceName"
label="资产名称"
align="center"
show-overflow-tooltip
/>
<el-table-column
prop="userName"
label="上报人员"
width="80px"
align="center"
/>
<el-table-column
prop="eventDateTime"
label="风险时间"
width="200px"
align="center"
/>
</el-table>
</vue3-seamless-scroll>
