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; } /* // 滚动条的滑块 */ ...
随机推荐
- eval有时候也可以用，而且有奇效
eval,一个我曾经避之不及的函数,最近我对它产生了一点新的感触:eval有时候也可以用,有奇效. 一般在使用js进行开发时,是不建议使用eval这类函数的.在JavaScript中,eval可以计算 ...
- 字符串算法--$\mathcal{KMP，Trie}$树
\(\mathcal{KMP算法}\) 实际上,完全没必要从\(S\)的每一个字符开始,暴力穷举每一种情况,\(Knuth.Morris\)和\(Pratt\)对该算法进行了改进,称为KMP算法. 而 ...
- Linux线程同步必知，常用方法揭秘！
一.为什么要线程同步 在Linux 多线程编程中,线程同步是一个非常重要的问题.如果线程之间没有正确地同步,就会导致程序出现一些意外的问题,例如: 竞态条件(Race Condition):多个线程同 ...
- Thinkpad T14升级Windows11ver22h2失败问题解决小记
背景 手头的ThinkPad在近一年的时间里每次升级Windows 11的22h2版本每次都会报错,具体有以下几种情况: 更新过程中无问题,重启后黑屏更新过程中会卡在26%左右,然后蓝屏报KENERA ...
- 超详细！手把手教你用 JaCoCo 生成单测覆盖率报告！
我们都知道 Spock 是一个单测框架,其特点是语法简明.但当我们使用 Spock 写了一堆单元测试之后,如何生成对应的单测覆盖率报告呢?一般来说,我们会使用两个插件来一起完成单测覆盖率报告的生成,分 ...
- [Java JDK]ResultSet.next()
1 JDK [jdk1.5doc] Moves the cursor down one row from its current position. A ResultSet cursor is ini ...
- Ficow 的 AI 平台快速上手指南(ChatGPT, NewBing, ChatGLM-6B, cursor.so)
本文首发于 Ficow Shen's Blog,原文地址: Ficow 的 AI 平台快速上手指南(ChatGPT, NewBing, ChatGLM-6B, cursor.so). 内容概览 前言 ...
- tcp，udp tcp三次握手四次挥手，基于套接字进行简单通信
1.应用层: 应用层功能:规定应用程序的数据格式. 例:TCP协议可以为各种各样的程序传递数据,比如Email.WWW.FTP等等.那么,必须有不同协议规定电子邮件.网页.FTP数据的格式,这些应用程 ...
- Split to Be Slim: 论文复现
摘要:在本论文中揭示了这样一种现象:一层内的许多特征图共享相似但不相同的模式. 本文分享自华为云社区<Split to Be Slim: 论文复现>,作者: 李长安 . Split to ...
- StringBuilder类用法解析
一.StringBuilder说明 StringBuilder是一个可变的字符序列.这个类提供了一个与StringBuffer兼容的API,但不保证同步,即StringBuilder不是线程安全的,而 ...