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; } /* // 滚动条的滑块 */ ...
随机推荐
- 【故障公告】数据库服务器 CPU 近 100% 造成全站故障，雪上加霜难上加难的三月
数据库服务器 CPU 近 100% 问题几乎每年都要发生一次,上次发生在去年1月31日,每次都是通过主备切换或者重启实例解决,数据库服务用的是阿里云 RDS SQL Server 2016 标准版. ...
- 地图：leaflet基本使用
leaflet:一个开源并且对移动端友好的交互式地图 JavaScript 库 中文文档:https://leafletjs.cn/reference.html 官网(英文):https://icli ...
- 部署：windows7下mysql8.0.18部署安装
一.前期准备(windows7+mysql-8.0.18-winx64) 1.下载地址:https://dev.mysql.com/downloads/ 2.选择直接下载不登录账号,下载的压缩包大概两 ...
- Nuxtjs实现服务端渲染和静态化站点
本文将介绍如何使用Nuxtjs对vue项目进行ssr和静态化处理. Nuxtjs简单介绍 首先,我们简单了解下Nuxtjs框架,Nuxt.js是一个基于Vue的通用框架,主要用于解决Vue项目的服务端 ...
- The first week match's mistake-2
旋转排列 (https://www.luogu.com.cn/problem/B3688) 解读一下题目: 要求从给定的数组拿出最后一个数字后 看看变化后的数组的最后一个数字是否是要求的数字 想到用栈 ...
- Go/Python RPC使用
Remote Procedure Call 简单RPC调用 server实现 // 注册接口 type HelloService struct{} func (s *HelloService) Hel ...
- 从不均匀性角度浅析AB实验
作者:京东零售 路卫强 本篇的目的是从三个不均匀性的角度,对AB实验进行一个认知的普及,最终着重讲述AB实验的一个普遍的问题,即实验准确度问题. 一.AB实验场景 在首页中,我们是用红色基调还是绿色基 ...
- 「学习笔记」tarjan求最近公共祖先
Tarjan 算法是一种 离线算法,需要使用并查集记录某个结点的祖先结点. 并没有传说中的那么快. 过程 将询问都记录下来,将它们建成正向边和反向边. 在 dfs 的过程中,给走过的节点打上标记,同时 ...
- 2022-11-18：给定一个数组arr，表示连续n天的股价，数组下标表示第几天 指标X：任意两天的股价之和 - 此两天间隔的天数 比如 第3天，价格是10 第9天，价格是30 那么第3天和第9天的指
2022-11-18:给定一个数组arr,表示连续n天的股价,数组下标表示第几天 指标X:任意两天的股价之和 - 此两天间隔的天数 比如 第3天,价格是10 第9天,价格是30 那么第3天和第9天的指 ...
- 2020-09-18：LRU手撸，说下时间复杂度和空间复杂度。
福哥答案2020-09-18: 方法:哈希表 + 双向链表.时间复杂度:对于 put 和 get 都是 O(1).空间复杂度:O(capacity),因为哈希表和双向链表最多存储 capacity+1 ...