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; } /* // 滚动条的滑块 */ ...
随机推荐
- 如何用Python对股票数据进行LSTM神经网络和XGboost机器学习预测分析（附源码和详细步骤），学会的小伙伴们说不定就成为炒股专家一夜暴富了
前言 最近调研了一下我做的项目受欢迎程度,大数据分析方向竟然排第一,尤其是这两年受疫情影响,大家都非常担心自家公司裁员或倒闭,都想着有没有其他副业搞搞或者炒炒股.投资点理财产品,未雨绸缪,所以不少小伙 ...
- python实现远程桌面
项目旨在让大家理解远控软件的原理,通过远控桌面可以实现远程控制我们的电脑,更好更方便的管理电脑.文末将给出初始版的完整代码,需要使用到的其他工具也会有所说明.最终实现的效果就是只要用户点击了客户端的程 ...
- Laplace分布算子开发经验分享
摘要:Laplace 用于 Laplace 分布的概率统计与随机采样. 本文分享自华为云社区<Laplace分布算子开发经验分享>,作者:李长安. 1.任务解析 详细描述: Laplace ...
- [Linux]mysql错误总结-ERROR 1067 (42000): Invalid default value for TIMESTAMP
MySQL的TIMESTAMP类型的默认值设置无效. 0 使用环境描述 Linux CentOS 7.8.2003 x86/64bit MySQL: 5.7.24 (mysql --version / ...
- SpringBoot线程池和Java线程池的实现原理
使用默认的线程池 方式一:通过@Async注解调用 public class AsyncTest { @Async public void async(String name) throws Inte ...
- odoo wizard界面显示带复选框列表及勾选数据获取
实践环境 Odoo 14.0-20221212 (Community Edition) 需求描述 如下图(非实际项目界面截图,仅用于介绍本文主题),打开记录详情页(form视图),点击某个按钮(图中的 ...
- Swift Codable协议实战：快速、简单、高效地完成JSON和Model转换！
前言 Codable 是 Swift 4.0 引入的一种协议,它是一个组合协议,由 Decodable 和 Encodable 两个协议组成.它的作用是将模型对象转换为 JSON 或者是其它的数据格式 ...
- es6 新增 set 和 map数据结构以及应用场景
https://www.cnblogs.com/sexintercourse/p/12269580.html Set数据容器,这是一个能够存储无重复值的有序列表. 1. 创建集合 set let se ...
- [C++提高编程] 3.5 stack容器
文章目录 3.5 stack容器 3.5.1 stack 基本概念 3.5.2 stack 常用接口 3.5 stack容器 3.5.1 stack 基本概念 概念:stack是一种先进后出(Firs ...
- Driver8833电机驱动模块的使用（STM32为主控）
一.硬件 STM32C8T6.STLINK下载器 Driver8833:TI公司的DRV8833是双桥马达驱动器解决方案,包括有两个H桥驱动器,可驱动两个DC电刷马达,或一个步进马达, 螺线管和其它电 ...