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

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

HTML

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

javascript 复制代码
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(修改滚动条样式)

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;
}
相关推荐
夕水3 分钟前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
会飞的鱼先生17 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
前端大白话1 小时前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
一千柯橘1 小时前
Nestjs 解决 request entity too large
javascript·后端
举个栗子dhy2 小时前
如何处理动态地址栏参数,以及Object.entries() 、Object.fromEntries()和URLSearchParams.entries()使用
javascript
宁静_致远2 小时前
React Native 技术栈:基于 macOS 开发平台的 iOS 应用开发指南
前端·javascript·react native
H5开发新纪元2 小时前
VS Code 插件开发实战:代码截图工具
javascript·visual studio code
DevUI团队2 小时前
超越input!基于contentediable实现github全局搜索组件:从光标定位到输入事件的全链路设计
前端·javascript
天天扭码2 小时前
前端必备技能 | 使用rem实现移动页面响应式
前端·javascript·css
Momoyouta2 小时前
draggable拖拽列表与虚拟列表结合实例
前端·javascript