element-ui表格滚动效果,el-table滚动条样式重置

news2025/1/11 0:06:34

项目首页需要展示一个表格滚动区域,特此来记录一下

HTML

<div class="table-box" @mouseenter="mouseenter" @mouseleave="mouseleave">
	<el-table 
		:data="tableList" 
		border 
		height="400px" 
		v-loading="tableLoading">
		
		<el-table-column prop="id" label="编号">
			<template slot-scope="scope">
				<el-link type="primary" @click="openNewTab(scope.row)">
					{{scope.row.id}}
				</el-link>
			</template>
		</el-table-column>
		
		<el-table-column prop="name" label="名称" show-overflow-toolltip></el-table-column>
		
		<el-table-column prop="desc" label="描述" show-overflow-toolltip></el-table-column>
		
		<el-table-column prop="createTime" label="创建时间" show-overflow-toolltip>
		</el-table-column>
		
		<el-table-column prop="createBy" label="创建人" show-overflow-toolltip>
		</el-table-column>
	</el-table>
</div>

JS

data(){
	return {
		tableLoading : false,
		timer: null,
		tableList: []
	}
},
watch: {
	currentData: {
		handler(val){
			this.clearTimer()
			if(val){
				this.getList()
			}
		}
	}
},
methods: {
	clearTimer(){
		if(this.timer) clearInterval(this.timer);
		this.timer = null;
		//重复渲染数据时,先清空,将滚动条置顶,防止出现bug
		this.tableList = [];
		if(document.getElementsByClassName('el-table__body-wrapper')[0]){
			document.getElementsByClassName('el-table__body-wrapper')[0].scrollTop = 0;
		}
	},
	async getList(){
		this.tableLoading = true;
		let params = {
			page: {
				current: 1,
				size: 100
			},
			vo: {
				currentData: this.currentData
			}
		}
		const res = await installServer.getDetailList(params);
		this.tableLoading = false;
		if(res.success){
			this.tableList = res.data.resords || [];
			this.$nextTick(()=>{
                 if(this.dataList.length) this.handleScroll()
             })
		}
	},
	
	handleScroll(){
		this.$nextTick(()=>{
			const EL = document.getElementsByClassName('el-table__body-wrapper')[0];
			const innerEL = document.getElementsByClassName('el-table__body')[0];
			const clientHeight = EL.clientHeight;//容器高度
			const innerHeight = innerEL.clientHeight;//内部table高度
			//内部搞不大于容器高度,需要滚动
			if(innerHeight > clientHeight ){
				let scrollTop = EL.scrollTop;
				this.timer = setInterval(()=>{
					if(scrollTop < innerHeight  - clientHeight ){
						scrollTop += parseFloat((1 / window.devicePixelRatio).toFixed(2)) + 0.01;
					}else {
						scrollTop = 0;
					}
					EL.scrollTop = scrollTop;
				}, 50)
			}
		})
	},
	mouseenter(){
		if(this.timer) clearInterval(this.timer);
		this.timer = null;
	},
	mouseleave(){
		this.handleScroll()
	}
}

CSS(修改滚动条样式)

.el-table__body-wrapper {
	&::-webkit-scrollbar {
		width: 6px !important;
		height: 6px !important;
	}
	&::-webkit-scrollbar-thumb {
		background-color: #ccc;
		border-radius: 3px;
	}
	&::-webkit-scrollbar-track {
		background-color: transparent !important;
	}
}
/* element ui为原生滚动条预留宽度17px, 重置滚动条样式后会距离右边有空白  */
.el-table__body-wrapper .el-table__body {
	width: 100% !important;
}
.el-tablecolgroup col[name='gutter'] {
    width: 6px !important;/*这个是table-header距离右边的距离,设置为滚动条宽*/
}
.el-table__header-wrapper .el-table__header tr th {
    background-color: #5197E6 !important;
    color: #fff;
    border-color: #5ca7fd;
}

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1275051.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023_Spark_实验二十四:Kafka集群环境搭建

Kafka集群环境搭建 一、环境说明 二、安装步骤 一、环境说明 目前的Kafka版本还是需要借助zookeeper来存储cluster、brokers、consumer等相关元信息&#xff0c;在当前版本即 在本案例中&#xff0c;我们采用了外部的zookeeper&#xff0c;即搭建了三节点的集群zookeeper环境…

Python Scrapy分布式爬虫

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 在当今信息爆炸的时代&#xff0c;获取大规模数据对于许多应用至关重要。而分布式爬虫作为一种强大的工具&#xff0c;在处理大量数据采集和高效爬取方面展现了卓越的能力。 本文将深入探讨分布式爬虫的实际应用…

最新Graphviz python安装教程及使用

文章目录 Graphviz 安装python安装graphviz库 Graphviz 安装 Graphviz是一个独立的软件&#xff0c;在用python的pip下载之前&#xff0c;需要先下载软件。 网址&#xff1a;https://graphviz.org/download/ 找到合适的版本进行下载安装。记住自己的安装位置&#xff0c;完…

如何通过数据文化加速企业管理的转型升级?

#01 企业管理 更需要“转型升级” 中国企业管理在某种程度上来看&#xff0c;受到中国传统文化、社会价值观及现代化趋势等多方面影响的结果&#xff0c;比如说&#xff0c;中国传统文化强调长期思考和计划&#xff0c;这在企业管理中体现为对长期业务发展和可持续的关注。但…

小白备战蓝桥杯:Java常用API

一、什么是API 就是别人写好的一些类&#xff0c;给咱们程序员直接拿去调用即可解决问题的 我们之前接触过的Scanner和Random都是API 但java中提供的API很多&#xff0c;我们没有必要去学习所有的API&#xff0c;只需要知道一些常用的API&#xff0c;再借助帮助文档去使用AP…

蓝桥杯每日一题2023.12.1

题目描述 蓝桥杯大赛历届真题 - C 语言 B 组 - 蓝桥云课 (lanqiao.cn) 题目分析 对于此题目而言思路较为重要&#xff0c;实际可以转化为求两个数字对应的操作&#xff0c;输出最前面的数字即可 #include<bits/stdc.h> using namespace std; int main() {for(int i 1…

【前缀和]LeetCode1862:向下取整数对和

本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 作者推荐 动态规划LeetCode2552&#xff1a;优化了6版的1324模式 题目 给你一个整数数组 nums &#xff0c;请你返回所有下标对 0 < i, j < nums.length 的 …

steam搬砖项目怎么赚钱?附详细拆解教程

互联网上的赚钱项目如林&#xff0c;为何他人能斩获成果&#xff0c;你却只能望洋兴叹&#xff1f;归根结底&#xff0c;还是因为你的心态过于急功近利。今天&#xff0c;我要为你揭示的Steam实体项目&#xff0c;是专门为热门竞技游戏CS:GO量身打造的。CS:GO&#xff0c;这款风…

自动机器学习AutoML

自动机器学习AutoML AutoMLAuto-SklearnAutoKerasAutoGluonGoogle AutoMLAzure自动机器学习 AutoML 模型的选择和超参数的调节等等任务对于机器学习算法的开发者来说是一件繁琐的工作&#xff0c;为了使得机器可以自动地设计模型并调优&#xff0c;自动机器学习AutoML便应运而…

打破语言障碍:跨境电商中的多语言营销策略

随着全球市场的不断扩大&#xff0c;跨境电商成为企业拓展国际业务的重要途径。然而&#xff0c;语言障碍往往成为企业在跨境电商中面临的挑战之一。为了打破这一障碍&#xff0c;实现全球市场的可持续发展&#xff0c;多语言营销策略变得至关重要。 多语言市场的挑战 在跨境电…

春秋云境:CVE-2022-32991(sql注入)

靶标介绍&#xff1a; 该CMS的welcome.php中存在SQL注入攻击。 获取登录地址 http://eci-2zeb0096que0556y47vq.cloudeci1.ichunqiu.com:80 登录注册 注册成功登录进入注册接口 参数接口一 发现接口参数q http://eci-2zeb0096que0556y47vq.cloudeci1.ichunqiu.com/welcome.p…

使用visual Studio MFC 平台实现对灰度图添加椒盐噪声,并进行均值滤波与中值滤波

平滑处理–滤波 本文使用visual Studio MFC 平台实现对灰度图添加椒盐噪声&#xff0c;并进行均值滤波与中值滤波 关于其他MFC单文档工程可参考 01-Visual Studio 使用MFC 单文档工程绘制单一颜色直线和绘制渐变颜色的直线 02-visual Studio MFC 绘制单一颜色三角形、渐变颜色边…

【openssl】Window系统如何编译openssl

本文主要记录如何编译出windows版本的openss的lib库 1.下载openssl&#xff0c;获得openssl-master.zip。 a.可以通过github&#xff08;网址在下方&#xff09;上下载最新的代码、今天是2023.12.1我用的master版本&#xff0c;下载之后恭喜大侠获得《openssl-master.zip》 …

iPhone苹果手机如何将词令网页添加到苹果iPhone手机桌面快捷打开?

iPhone苹果手机如何将词令网页添加到苹果iPhone手机桌面快捷打开&#xff1f; 1、在iPhone苹果手机上找到「Safari浏览器」,并点击打开&#xff1b; 2、打开Safari浏览器后&#xff0c;输入词令官方网站地址&#xff1a;ciling.cn ; 3、打开词令官网后&#xff0c;点击Safari…

特殊二叉树——堆

&#x1f308;一、堆的基本概念 1.堆&#xff1a;非线性结构&#xff0c;是完全二叉树 2.堆分为大堆和小堆。 大堆&#xff1a;树中任意一个父亲都大于等于孩子&#xff0c;根节点值大于等于其所有子孙节点的值。 小堆&#xff1a;树中任意一个父亲都小于等于孩子&#xff0c;…

IO / day01 作业。

1.使用fgets统计一个文件的行号 //使用fgets统计一个文件的行号#include <string.h> #include <stdlib.h> #include <stdio.h>int main(int argc, const char *argv[]) {if(argc<2) //获取文件名{printf("input error\n!");printf("usage…

Flutter页面刷新失败?看看是不是这个原因

文章目录 问题描述解决办法在控件A中定义回调函数在页面中使用控件A 原因分析回顾问题原因分析 setState使用注意事项上下文正确性异步更新避免深层嵌套避免频繁调用避免在 build 方法中调用避免在 dispose 方法中调用 问题描述 我用flutter开发了一个页面&#xff0c;页面上有…

苍穹外卖——删除购物车信息

1. 删除购物车中一个商品 1.1 产品原型 1.2 接口设计 1.3 数据模型 shopping_cart表&#xff1a; -- auto-generated definition create table shopping_cart (id bigint auto_increment comment 主键primary key,name varchar(32) null comment 商品名称…

上门服务系统|东郊到家软件提供高效服务的科技支柱

预约上门服务系统的崛起改变了传统服务行业的格局。用户不再需要亲自前往实体店面&#xff0c;而是通过几次点击就能享受到各类服务。这背后离不开预约上门服务系统的智能化和高效性&#xff0c;而源码正是这个系统的灵魂所在。下面小编就给大家介绍下上门服务系统开发优势。 1…

windows 如何卸载证书

1、windows r 2、输入 certmgr.msc 3、进入证书管理&#xff0c;选择个人 4、选择个人---找到要删除的证书&#xff0c;删除 就可以了。