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; } /* // 滚动条的滑块 */ ...
随机推荐
- 第四部分：Spdlog日志库的核心组件分析-logger
Spdlog是一个快速且可扩展的C++日志库,它支持多线程和异步日志记录.在本文中,我们将分析Spdlog日志库的核心代码,探究其实现原理和代码结构. Spdlog的基本架构 上一篇文章介绍了spdl ...
- ChatGPT搭建AI网站实战
1.概述 ChatGPT是一款基于GPT-3.5架构的大型语言模型,它能够进行自然语言处理和生成对话等任务.作为一款智能化的聊天机器人,ChatGPT有着广泛的应用场景,如在线客服.智能助手.个性化推 ...
- freeswitch媒体协商的优先级方案
概述 freeswitch是一款简单好用的VOIP开源软交换平台. 不同的媒体格式各有优缺点,实际环境中的应用要根据线路和客户的实际需求确定. 本文中介绍一种较为通用的媒体配置方案,可以适配大部分场景 ...
- AWS IAM介绍
前言 AWS是世界上最大的云服务提供商,它提供了很多组件供消费者使用,其中进行访问控制的组件叫做IAM(Identity and Access Management), 用来进行身份验证和对AWS资源 ...
- day08 元组字典集合
day08 元组 集合 字典 元组 """ 小括号括起来,内部存放多个元素,元组之间逗号隔开,元素不可改变,元素类型不能是任意的, """ ...
- ArcGIS Pro发布地图服务（影像、矢量）
做GIS一般都是用ArcMap发布影像或者矢量服务,由于ArcGIS后续不在更新ArcMap,改用ArcGIS Pro,本文对ArcGIS Pro发布服务进行说明. 本文示例使用(因为portal的授 ...
- ArcGIS Desktop发布地形高程服务（DEM/DSM）
在做ArcGIS三维时,地形服务的发布与普通地图服务的发布不一样,需要发布成ImageServer,切片格式选择LERC. 本文示例使用软件: ArcGIS Desktop10.3.1 注:ArcGI ...
- 【解决方法】windows连接域时报错：An Active Directory Domain Controller(AD DC) for the domain“chinaskills.com“....
目录-快速跳转 问题描述 原因分析: 解决方案: 附言: 问题描述 操作环境与场景: 在 VM 内 windos 2019 在连接到域时,提示报错: An Active Directory Domai ...
- 刺激！ChatGPT给我虚构了一本书？
ChatGPT很强大,可以帮我们处理很多问题,但这些问题的答案的正确性您是否有考证过呢? 昨晚,DD就收到了一个有趣的反馈: 提问:有什么关于数据权限设计的资料推荐吗? ChatGPT居然介绍了一本根 ...
- Apache hudi 核心功能点分析
Hudi 文中部分代码对应 0.14.0 版本 发展背景 初始的需求是Uber公司会有很多记录级别的更新场景,Hudi 在Uber 内部主要的一个场景,就是乘客打车下单和司机接单的匹配,乘客和司机分别 ...