elementUi+table实现表格数据滚动

引用vue和elementUI CDN

// 引用elementUI CDN

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

<!-- import JavaScript -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

// 引用VUE CDN

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

1.页面代码

<div id="app">

    <el-table ref="table" class="table2" height="350" :data="tableData">

        <el-table-column prop="data1" label="序号" align="center">

        </el-table-column>

        <el-table-column prop="data2" label="科室" align="center">

        </el-table-column>

    </el-table>

</div>

2.数据

new Vue({

    el: '#app',

    data: function () {

      return {

        tableData: [

                {

                    data1: "1",

                    data2: "外科手术室"

                },

                {

                    data1: "2",

                    data2: "内科手术室"

                },

                {

                    data1: "3",

                    data2: "骨关节科"

                },

                {

                    data1: "4",

                    data2: "麻醉一科"

                },

                {

                    data1: "5",

                    data2: "心内"

                },

                {

                    data1: "6",

                    data2: "运动医学科"

                },

                {

                    data1: "7",

                    data2: "骨关节科"

                },

                {

                    data1: "8",

                    data2: "运动医学科"

                },

                {

                    data1: "7",

                    data2: "脊柱外科"

                },

                {

                    data1: "9",

                    data2: "心血管内科一病区"

                },

                {

                    data1: "10",

                    data2: "心血管内科二病区"

                },

                {

                    data1: "11",

                    data2: "心血管外科"

                },

            ],

        }

    }

})

3.滚动逻辑

mounted() {

    // 拿到表格挂载后的真实DOM

    const table = this.$refs.table

    // 拿到表格中承载数据的div元素

    const divData = table.bodyWrapper

    // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)

    setInterval(() => {

        // 元素自增距离顶部1像素

        divData.scrollTop += 1

        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)

        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {

            // 重置table距离顶部距离

            divData.scrollTop = 0

        }

    }, 100)

}

完整代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <!-- import CSS -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>

    <div id="app">

        <el-table ref="table" class="table2" height="350" :data="tableData">

            <el-table-column prop="data1" label="序号" align="center">

            </el-table-column>

            <el-table-column prop="data2" label="科室" align="center">

            </el-table-column>

        </el-table>

    </div>

</body>

<!-- import Vue before Element -->

<script src="https://unpkg.com/vue@2/dist/vue.js"></script>

<!-- import JavaScript -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>

    new Vue({

        el: '#app',

        data: function () {

            return {

                tableData: [

                    {

                        data1: "1",

                        data2: "外科手术室"

                    },

                    {

                        data1: "2",

                        data2: "内科手术室"

                    },

                    {

                        data1: "3",

                        data2: "骨关节科"

                    },

                    {

                        data1: "4",

                        data2: "麻醉一科"

                    },

                    {

                        data1: "5",

                        data2: "心内"

                    },

                    {

                        data1: "6",

                        data2: "运动医学科"

                    },

                    {

                        data1: "7",

                        data2: "骨关节科"

                    },

                    {

                        data1: "8",

                        data2: "运动医学科"

                    },

                    {

                        data1: "7",

                        data2: "脊柱外科"

                    },

                    {

                        data1: "9",

                        data2: "心血管内科一病区"

                    },

                    {

                        data1: "10",

                        data2: "心血管内科二病区"

                    },

                    {

                        data1: "11",

                        data2: "心血管外科"

                    },

                ],

            }

        },

        mounted() {

            // 拿到表格挂载后的真实DOM

            const table = this.$refs.table

            // 拿到表格中承载数据的div元素

            const divData = table.bodyWrapper

            // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)

            setInterval(() => {

                // 元素自增距离顶部1像素

                divData.scrollTop += 1

                // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)

                if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {

                    // 重置table距离顶部距离

                    divData.scrollTop = 0

                }

            }, 100)

        }

    })

</script>

</html>

elementUi+table实现表格数据滚动的更多相关文章

  1. element-ui多层嵌套表格数据删除

    很多表格都要一个移除的功能,所谓移除,就是前端把表格的数据删除,普通的表格删除很简单,调用数据的删除方法就行.但是当表格是多层的嵌套类型时,就不能再使用普通的删除方法了.下面介绍一种自己在项目中用的方 ...

  2. element-ui table float类型数据排序失败

    背景:对于16.88这样的数据,点击表头排序无效,仍然是乱序 解决办法:自定义排序方法,:sortable="true" :sort-mothod="xxxx" ...

  3. Element-UI Table 实现筛选数据功能

    最近产品提出了一个筛选数据的功能,要求在表头里实现一个下拉框进行筛选. 首先, Element-ui 的官方文档,el-table-column 下有一个 filters , 用于数据的筛选和过滤, ...

  4. table表格数据无缝循环滚动

    分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox">              ...

  5. asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL

    代码: /// <summary> /// HTML Table表格数据(html)导出EXCEL /// </summary> /// <param name=&quo ...

  6. vue将指定区域的表格数据或element-ui中el-table的数据单笔或多笔批量导出excel

    公司在后台管理系统开发中用到了 vue+element-ui 组合的框架,但随着需求的越来越复杂,前端的工作难度也呈几何倍数递增,工作量随之增大.这不,在项目中增加一个将列表数据导出为excel的需求 ...

  7. element-ui中table表头表格错误问题解决

    我用的是element-ui v1.4.3 在iframe关闭和切换导航会引起有table的表格错位,解决办法: handleAdminNavTab: function(tab) { var admi ...

  8. 关于【vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据】的优化

    之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...

  9. 超全table功能Datatables使用的填坑之旅--1: 无法渲染表格数据: ajax调用了参数 : success

    问题:Datatables: 无法渲染表格数据 原因:datatables的ajax 传了"success":function(){},导致无法渲染数据. ajax 删掉" ...

  10. 去除element-ui table表格右侧滚动条的高度

    /* //element-ui table的去除右侧滚动条的样式 */ ::-webkit-scrollbar { width: 1px; height: 1px; } /* // 滚动条的滑块 */ ...

随机推荐

  1. 手机号码归属地 API 实现防止骚扰电话，看这一篇就够了（内附设计思路和代码）

     在当今时代,骚扰电话已经成为了很多人日常生活中的一个常见问题,严重影响了人们的工作和生活. 为了避免这种情况的发生,企业和机构可以采用手机号码归属地 API,以提供更好的电话服务,减少骚扰电话的出现 ...

  2. Teamcenter_NX集成开发：UF_UGMGR函数的使用

    最近工作中经常使用Teamcenter.NX集成开发的情况,因此在这里记录UF_UGMGR函数的使用.使用UF_UGMGR相关函数需要有Teamcenter使用经验,理解Teamcenter中文件夹. ...

  3. Mybatis Plus根据某字段特定值排序

    需求 背景:一个审核流程.审核人等级分为市级和省级,管理员升级字段adminlevel,字段含义:1省级,2市级.审核字段audit为int字段,字段含义:1待市级审核,2待省级审核,3通过审核. 需 ...

  4. MarkdownStudy01markdown用法

    一级标题 二级标题 三级标题 字体 Hello,Word! Hello,Word! Hello,Word! Hello,Word! 引用 好好学Java 分割线 图片 超链接 点击跳转 列表 A B ...

  5. jQ-DOM属性的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Rancher 系列文章-Rancher 升级

    概述 之前在 天翼云上用 4 台机器安装了一个 1 master(及 etcd) 3 node 的 K3S 集群,并在其上使用 Helm 安装了 Rancher 2.6.3 版本. 前几天发现 Ran ...

  7. 超详细！手把手教你用 JaCoCo 生成单测覆盖率报告！

    我们都知道 Spock 是一个单测框架,其特点是语法简明.但当我们使用 Spock 写了一堆单元测试之后,如何生成对应的单测覆盖率报告呢?一般来说,我们会使用两个插件来一起完成单测覆盖率报告的生成,分 ...

  8. [Linux]CPU架构/指令集：RISC / CISC | arm | amd | X86/i386 | aarch64

    1 前言 本文是解决在软件开发.软件交付过程中,常常需要找寻与服务器硬件的CPU架构适配的软件包时,开发者和交付者又时常摸不着头脑.[迷迷糊糊]地就下载了某个所谓"适配".&quo ...

  9. 活字格性能优化技巧（3）：如何巧用CDN提升含页面的访问速度

    本文由葡萄城技术团队于博客园原创并首发转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 上两篇中我们分享了如何利用数据库主键和表格设置默认不加载数据来提升应用 ...

  10. Django笔记二十三之case、when操作条件表达式搜索、更新等操作

    本文首发于公众号:Hunter后端 原文链接:Django笔记二十三之条件表达式搜索.更新等操作 这一篇笔记将介绍条件表达式,就是如何在 model 的使用中根据不同的条件筛选数据返回. 这个操作类似 ...