文章目录
- 前言
- 一、vue-seamless-scroll是什么？
- 二、使用步骤
- 1.引入JS库
- 2.完整代码
- 实现效果
前言
el-table表格滚动可以通过定义两个table实现，第一个table展示标题，第二个table展示滚动内容。把内容放在vue-seamless-scroll组件中即可。
一、vue-seamless-scroll是什么？
vue-seamless-scroll是一个为Vue.js设计的轻量级无缝滚动组件，它能实现元素列表在达到边界时平滑循环滚动的效果。支持自定义滚动方向、速度等，适用于制作动态新闻栏、图片轮播等场景。
二、使用步骤
1.引入JS库
代码如下：
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入ElementUI组件必须先引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入 滚动插件 -->
<script src="https://unpkg.com/vue-seamless-scroll/dist/vue-seamless-scroll.min.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格滚动</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入ElementUI组件必须先引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!-- 引入 滚动插件 -->
<script src="https://unpkg.com/vue-seamless-scroll/dist/vue-seamless-scroll.min.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
/* 滚动表格 */
.scroll_table {margin: 15px;display: flex;}
.scroll_table_s1{display: inline-block; width: 100%}
/*隐藏第一个table内容*/
.title_table .el-table__body-wrapper {display: none;}
.seamless-warp {height: 200px;overflow: hidden;}
/*隐藏第二个table表头*/
.table_scroll .el-table__header-wrapper {display: none;}
</style>
</head>
<body>
<div id="app">
<!--?el-table使用vue-seamless-scroll实现自动滚动-->
<div class="scroll_table">
<div class="scroll_table_s1">
<el-table class="title_table" size="mini" stripe style="width: 100%" border header-align="center">
<el-table-column v-for="(item,index) in columns" :key="index+'i'" :label="item.label" :prop="item.prop" min-width="120"/>
</el-table>
<vue-seamless-scroll :data="tableList" class="seamless-warp" style="width: 100%" :class-option="scrollClassOption">
<el-table :data="tableList" v-if="tableList.length > 0" class="table_scroll" stripe style="width: 100%" border header-align="center" min-width="120">
<el-table-column v-for="(item,index) in columns" :key="index+'i'" :label="item.label" :prop="item.prop"/>
</el-table>
</vue-seamless-scroll>
</div>
</div>
</div>
<script type="text/javascript">
let _this = this;
const vm = new Vue({
// 配置选项(option)
el: '#app',
data: {
columns: [
{ prop: 'id', label: '序号', sort: true },
{ prop: 'name', label: '姓名', sort: true },
{ prop: 'date', label: '日期', sort: true },
{ prop: 'address', label: '地址', sort: true },
],
tableList: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
id: 3,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
id: 4,
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
]
},
mounted() {
},
computed: {
scrollClassOption() {
return {
step: 0.5, // 数值越大速度滚动越快 0.8
limitMoveNum: 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)
}
}
},
methods: {
}
})
</script>
</body>
</html>
实现效果
