el-table表格通过vue-seamless-scroll实现表格滚动(html + Vue + Element-UI)

最新推荐文章于 2024-07-12 15:14:43 发布

临时工-冯宝宝

最新推荐文章于 2024-07-12 15:14:43 发布

阅读量658

点赞数 7

文章标签： vue.js html elementui

本文链接：https://blog.csdn.net/weixin_42597632/article/details/140041358

版权

文章目录

前言
一、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>

实现效果

在这里插入图片描述

临时工-冯宝宝

关注

7
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
el-table表格通过vue-seamless-scroll实现表格滚动(html + Vue + Element-UI)

el-table表格滚动可以通过定义两个table实现，第一个table展示标题，第二个table展示滚动内容。把内容放在vue-seamless-scroll组件中即可。
复制链接

扫一扫