使用ref属性获取组件实例添加scroll事件,table组件高度通过lineHeight属性修改,注意行内有padding:12px;叠加高度
<el-table :data="tableData" :header-cell-style="{ background: '#f2f2f2', color: '#333333', lineHeight: '25px' }"
:row-style="{ color: '#666666', lineHeight: '25px' }" height="462" border ref="tableDataScroll">
<el-table-column prop="id" label="学号" min-width="100" />
<el-table-column prop="name" label="姓名" min-width="100" />
<el-table-column prop="class" label="班级" min-width="100" />
<el-table-column prop="sex" label="性别" min-width="100">
<template slot-scope="scope">
<span>{
{ scope.row.sex === 0 ? '男' : '女' }}</span>
</template>
</el-table-column>
</el-table>
js代码:
<script>
export default {
data() {
return {
tableData: [...数据],
currentPage: 1,
listStatus: true
}
},
mounted() {
setTimeout(() => {
this.tableScroll()
}, 0);
},
methods: {
tableScroll() {
this.$refs.tableDataScroll.bodyWrapper.addEventListener('scroll', (res) => {
const height = res.target
const clientHeight = height.clientHeight
const scrollTop = height.scrollTop
const scrollHeight = height.scrollHeight
if (clientHeight + scrollTop >= scrollHeight - 80 && this.listStatus) {
this.currentPage++
this.getDate()
}
}, true)
},
getDate() {
let total = 40
let data = [
{
id: '1001',
name: '王五',
class: '12班',
sex: 1
},...数据
]
this.tableData.push(...data)
if (this.tableData.length >= total) { this.listStatus = false }
}
},
}
</script>
修改滚动条样式代码:
/deep/ .el-table__body-wrapper::-webkit-scrollbar{
width: 6px !important;
height: 6px !important;
}
/deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb{
background: #EAEAEA !important;
border-radius: 3px;
}
但是table表格留的是原滚动条的宽度,会有空隙
/deep/ .el-table colgroup col[name='gutter']{
width: 6px;
}
/deep/ .el-table__body{
width: 100% !important;
}
添加上述代码即可