element el-table组件实现列表自动滚动

最新推荐文章于 2025-10-21 16:53:38 发布

原创

最新推荐文章于 2025-10-21 16:53:38 发布 · 4.6k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

本文介绍了如何结合Element UI的el-table组件和vue-seamless-scroll插件，来创建一个自动滚动的列表效果。通过安装并引入vue-seamless-scroll，可以实现列表内容的无缝滚动，提升用户体验。

效果图：

需要配合vue-seamless-scroll插件

安装命令行执行:

npm install vue-seamless-scroll --save

然后在main.js文件里面引入使用：

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

代码：

<template>
  <div class="min">
    <div style="display: inline-block">
      <el-table :data="tableData" style="width: 460px" class="top">
        <el-table-column prop="title" label="内容" width="280">
        </el-table-column>
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
      </el-table>
      <vue-seamless-scroll
        :data="tableData"
        class="seamless-warp"
        style=