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;
}
相关推荐
梅子酱~7 分钟前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
你的人类朋友11 分钟前
JS严格模式,启动!
javascript·后端·node.js
Carlos_sam21 分钟前
OpenLayers:如何控制Overlay的层级?
前端·javascript
z_mazin1 小时前
JavaScript逆向魔法:Chrome开发者工具探秘之旅
javascript·chrome·爬虫
绿草在线1 小时前
Mock.js虚拟接口
开发语言·javascript·ecmascript
时光追逐者2 小时前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
hz.ts2 小时前
Angular 国际化
javascript·ecmascript·angular.js
6武72 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
千鼎数字孪生-可视化2 小时前
3D模型给可视化大屏带来了哪些创新,都涉及到哪些技术栈。
ui·3d·信息可视化·数据分析
夏天想2 小时前
vant4+vue3上传一个pdf文件并实现pdf的预览。使用插件pdf.js
开发语言·javascript·pdf·vant