<template>
<div class="main">
<el-table class="tableData" ref="table" @cell-mouse-enter="stopScroll"
@cell-mouse-leave="startScroll" :data="tableData" max-height="440px" style="width: 100%">
<el-table-column prop="ranking" label="名次" align="center" width="80"></el-table-column>
<el-table-column prop="depName" label="名称" align="center" show-overflow-tooltip>
</el-table-column>
<el-table-column prop="score" label="积分" align="center" width="120"></el-table-column>
</el-table>
</div>``
</template>
<script>
export default {
data () {
return {
tableData: [
{ ranking: '1', depName: '电放费', score: 100 },
{ ranking: '2', depName: '电放费', score: 100 },
{ ranking: '3', depName: '电放费', score: 100 },
{ ranking: '4', depName: '电放费', score: 100 },
{ ranking: '5', depName: '电放费', score: 100 },
{ ranking: '6', depName: '电放费', score: 100 },
{ ranking: '7', depName: '电放费', score: 100 },
{ ranking: '8', depName: '电放费', score: 100 },
{ ranking: '9', depName: '电放费', score: 100 },
{ ranking: '10', depName: '电放费', score: 100 },
{ ranking: '11', depName: '电放费', score: 100 },
{ ranking: '12', depName: '电放费', score: 100 },
{ ranking: '13', depName: '电放费', score: 100 },
{ ranking: '14', depName: '电放费', score: 100 },
{ ranking: '15', depName: '电放费', score: 100 },
{ ranking: '16', depName: '电放费', score: 100 },
{ ranking: '17', depName: '电放费', score: 100 },
{ ranking: '18', depName: '电放费', score: 100 },
{ ranking: '19', depName: '电放费', score: 100 },
{ ranking: '20', depName: '电放费', score: 100 }
],
}
},
mounted () {
this.paly()
},
methods: {
stopScroll () {
clearInterval(this.scrollTime)
},
startScroll () {
this.paly()
},
paly () {
const table = this.$refs.table
const divData = table.bodyWrapper
this.scrollTime = setInterval(() => {
divData.scrollTop += 3
if (divData.clientHeight + divData.scrollTop === divData.scrollHeight) {
divData.scrollTop = 0
}
}, 200)
},
}
}
</script>
<style lang="scss" scoped>
.main {
position: relative;
.tableData {
font-size: 14px;
}
}
.el-table::before {
left: 0;
bottom: 0;
width: 100%;
height: 0px;
}
.el-table--scrollable-y {
/deep/.el-table__body-wrapper::-webkit-scrollbar {
width: 4px;
}
/deep/.gutter {
width: 4px !important;
}
}
.el-table--scrollable-y {
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
background-color: #d8d8d8ff;
border-radius: 7px;
}
}
/*定义滚动条的轨道颜色、内阴影及圆角*/
.el-table--scrollable-y {
/deep/.el-table__body-wrapper::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 3px;
}
}
</style>
最简单的el-table无线滚动组件+隐藏/修改滚动条样式
最新推荐文章于 2024-05-01 00:58:44 发布