elementUi+table实现表格数据滚动
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实现表格数据滚动的更多相关文章
- element-ui多层嵌套表格数据删除
很多表格都要一个移除的功能,所谓移除,就是前端把表格的数据删除,普通的表格删除很简单,调用数据的删除方法就行.但是当表格是多层的嵌套类型时,就不能再使用普通的删除方法了.下面介绍一种自己在项目中用的方 ...
- element-ui table float类型数据排序失败
背景:对于16.88这样的数据,点击表头排序无效,仍然是乱序 解决办法:自定义排序方法,:sortable="true" :sort-mothod="xxxx" ...
- Element-UI Table 实现筛选数据功能
最近产品提出了一个筛选数据的功能,要求在表头里实现一个下拉框进行筛选. 首先, Element-ui 的官方文档,el-table-column 下有一个 filters , 用于数据的筛选和过滤, ...
- table表格数据无缝循环滚动
分享一个好看的表格无缝滚动:(实战用起来很舒服) 直接copy代码到你的程序中: 1.HTML <div class="tablebox"> ...
- asp.net将内容导出到Excel，Table表格数据(html)导出EXCEL
代码: /// <summary> /// HTML Table表格数据(html)导出EXCEL /// </summary> /// <param name=&quo ...
- vue将指定区域的表格数据或element-ui中el-table的数据单笔或多笔批量导出excel
公司在后台管理系统开发中用到了 vue+element-ui 组合的框架,但随着需求的越来越复杂,前端的工作难度也呈几何倍数递增,工作量随之增大.这不,在项目中增加一个将列表数据导出为excel的需求 ...
- element-ui中table表头表格错误问题解决
我用的是element-ui v1.4.3 在iframe关闭和切换导航会引起有table的表格错位,解决办法: handleAdminNavTab: function(tab) { var admi ...
- 关于【vue + element-ui Table的数据多选，多页选择数据回显，分页记录保存选中的数据】的优化
之前写的[vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据]这篇博客.功能虽然实现了相对应的功能.但是用起来很不爽.所以进行了优化. 备注:最近可能没时 ...
- 超全table功能Datatables使用的填坑之旅--1: 无法渲染表格数据: ajax调用了参数 : success
问题:Datatables: 无法渲染表格数据 原因:datatables的ajax 传了"success":function(){},导致无法渲染数据. ajax 删掉" ...
- 去除element-ui table表格右侧滚动条的高度
/* //element-ui table的去除右侧滚动条的样式 */ ::-webkit-scrollbar { width: 1px; height: 1px; } /* // 滚动条的滑块 */ ...
随机推荐
- JMM内存模型
● 说说JVM的主要组成部分以及作用? 类加载器.运行时数据区.执行引擎.本地库接口 类加载器子系统 它主要功能是处理类的动态加载,还有链接,并且在第一次引用类时进行初始化. Loading - 加载 ...
- 【ACM算法竞赛日常训练】DAY4题解与分析【树】【子序列】| 组合数学 | 动态规划
DAY4共2题: 树(组合数学) 子序列(dp,数学) 作者:Eriktse 简介:19岁,211计算机在读,现役ACM银牌选手力争以通俗易懂的方式讲解算法!️欢迎关注我,一起交流C++/Python ...
- odoo 开发入门教程系列-准备一些操作(Action)？
准备一些操作(Action)? 到目前为止,我们主要通过声明字段和视图来构建模块.在任何真实的业务场景中,我们都希望将一些业务逻辑链接到操作按钮.在我们的房地产示例中,我们希望能够: 取消或将房产设置 ...
- Mybatis 获取自增主键 useGeneratedKeys与keyProperty 解答
Mybatis 获取自增主键 今天开发的时候遇到一个疑惑,业务场景是这样的, 但是百度好久没有找到合适的解答,于是自己向同事了解,感觉还不错,因此写上了这个文章 有一个表A和一个表B A就是一个主表, ...
- 图与网络分析—R实现（三）
最小生成树 (Minimum Spanning Tree) 应该大家都不陌生,Spanning 有跨越的意思,生成树一般来说每个节点都能访问到别的节点,是一个连通树.所以,一般考虑无向图里去造生成树. ...
- Docker入门实践笔记-Dockerfile
镜像是一个打包文件,其中包含了应用程序及其运行所依赖的环境,例如文件系统.环境变量.配置参数等等 联合文件系统 容器镜像内部并不是一个平坦的结构,而是由许多的镜像层组成,每层都是只读不可修改修改的一组 ...
- 如何在现有项目中使用`Masa MiniApi`?
首先我们现有创建一个空的WebApi的项目模板,这个项目模板和MasaFramework本身没有任何关联,我们本博客只是使用的MasaFramework的MiniApi的包 创建Asp.NET Cor ...
- Java的对象克隆
本节我们会讨论 Cloneable 接口,这个接口指示一个类提供了一个安全的 clone() 方法. Object 类提供的 clone() 方法是 "浅拷贝",并没有克隆对象中引 ...
- “露天煤矿现场调研和交流案例分享”在CSDN发表，两次审核未通过，判定：全篇涉及广告
我在博客园发布了:露天煤矿现场调研和交流案例分享.后台分享到了CSDN,结果判定为:全篇涉及广告.我要是真能写出来全篇涉及广告的文章,也算我能力比较强,就算是让ChatGPT可能也写不出来吧. 这种坐 ...
- 3.2 构造器、this、包机制、访问修饰符、封装
构造器 构造器:在实例化的一个对象的时候会给对象赋予初始值,因此我们可以通过修改构造器,来改变对象的初始值,构造器是完成对象的初始化,并不是创建对象 我们也可以创建多个构造器实现不同的初始化,即构造器 ...