显示效果
官方文档:
安装 | vue-seamless-scroll (chenxuan0000.github.io)
代码如下
<template>
<div class="scroll_table">
<div style="display: inline-block; width: 100%">
<vue-seamless-scroll
ref="a"
:data="tableList"
class="seamless-warp"
style="width: 100%"
:class-option="classOption"
>
<el-table id="top"
:show-header="false"
:data="tableList"
class="table_scroll">
<el-table-column
v-for="(item,index) in columns"
:key="index+'i'"
:label="item.label"
:prop="item.prop"
/>
</el-table>
</vue-seamless-scroll>
<el-button @click="start">开始</el-button>
<el-button @click="stop">暂停</el-button>
</div>
</div>
</template>
<script>
export default {
name: "ScrollTable",
data () {
return {
columns: [
{ prop: 'name', label: '姓名', minWidth: '100', sort: true },
{ prop: 'date', label: '日期', minWidth: '180', sort: true },
{ prop: 'age', label: '年龄', minWidth: '180', sort: true },
{ prop: 'status', label: '状态', minWidth: '180', sort: true },
{ prop: 'address', label: '地址', minWidth: '220', sort: true }
],
tableList: [
{
id: '1',
date: '2019-09-25',
name: '张三',
status: '待处理',
age: 18,
address: '广东省广州市天河区'
},
{
id: '2',
date: '2019-09-26',
name: '李四',
age: 19,
status: '已处理',
address: '广州市天河区'
},
{
id: '3',
date: '2019-09-27',
name: '王五',
age: 20,
status: '已完成',
address: '广东省广州市天河区3'
},
{
id: '3',
date: '2019-09-27',
name: '赵六',
age: 20,
status: '已完成',
address: '广东省广州市天河区3'
}
]
}
},
computed: {
classOption () {
return {
step: 2, // 数值越大速度滚动越快
limitMoveNum: this.tableList.length,
// 开始无缝滚动的数据量,须小于等于 当前数据的长度,若大于的话滚动无法生效
hoverStop: false, // 是否开启鼠标悬停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)
}
}
},
mounted() {
console.log(this.$refs.a)
},
methods: {
start() {
this.$refs.a._startMove()
},
stop() {
this.$refs.a._stopMove()
}
},
}
</script>
<style lang="scss" scoped>
.scroll_table {
margin: 15px;
display: flex;
::v-deep .table .el-table__body-wrapper {
display: none;
}
.seamless-warp {
height: 200px;
overflow: hidden;
::v-deep .table_scroll .el-table__header-wrapper {
display: none;
}
}
}
</style>