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;
}
相关推荐
呼啦啦呼啦啦啦啦啦啦5 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
前端 贾公子8 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows
拾光拾趣录8 小时前
链表合并:双指针与递归
前端·javascript·算法
拼图2098 小时前
element-plus——图标推荐
javascript·vue.js·elementui
期待のcode8 小时前
图片上传实现
java·前端·javascript·数据库·servlet·交互
koooo~9 小时前
JavaScript中的Window对象
开发语言·javascript·ecmascript
安心不心安10 小时前
React hooks——useReducer
前端·javascript·react.js
像风一样自由202010 小时前
原生前端JavaScript/CSS与现代框架(Vue、React)的联系与区别(详细版)
前端·javascript·css
啃火龙果的兔子10 小时前
react19+nextjs+antd切换主题颜色
前端·javascript·react.js
_pengliang10 小时前
小程序按住说话
开发语言·javascript·小程序