直接使用官网的无限滚动组件会发现它只对ul、div等元素有用,但是加在table自身上就会出现“页面刚打开就一直请求,直到数据请求完毕”的bug。
官网无限滚动方法:
<template>
<div class="infinite-list-wrapper" style="overflow:auto">
<ul
class="list"
v-infinite-scroll="load"
infinite-scroll-disabled="disabled">
<li v-for="i in count" class="list-item">{{ i }}</li>
</ul>
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>
</div>
</template>
<script>
export default {
data () {
return {
count: 10,
loading: false
}
},
computed: {
noMore () {
return this.count >= 20
},
disabled () {
return this.loading || this.noMore
}
},
methods: {
load () {
this.loading = true
setTimeout(() => {
this.count += 2
this.loading = false
}, 2000)
}
}
}
</script>
项目中做出的修改
在项目中我采用的是在table外层嵌套一个<div>盒子,并将触发滚动的机制放在外层<div>盒子上,相当于把整个<table >作为滚动项;
但这又会造成滚动条滚动后,表头也跟着滚动的bug,那就直接将表头隐藏,自己在<div>外层用ul和li写一个“伪表头”。
<div>
// 用ul,li自己写一个伪表头
<ul class="table_header">
<li v-for="item in columns" :key="item.key">
{{item.title}}
</li>
</ul>
<div
style="max-height:783px;overflow:auto"
infinite-scroll-distance='100' <!-- 触发加载的距离阈值,单位为"px" -->
infinite-scroll-immediate="false" <!-- 是否立即执行加载方法,默认为"true" -->
:infinite-scroll-disabled="disabled" <!-- 数据加载完毕,禁止再次发起请求 -->
v-infinite-scroll="handleReachBottom" <!-- 滚动条触底,加载数据 -->
>
<Table
border
class="gradeRank_table"
:show-header="false" <!-- 隐藏表头 -->
:columns="columns"
:data="table_data"
>
</Table>
<p v-if="loading" style="text-align:center;margin-top:20px;">加载中...</p>
<p v-if="disabled && noMore" style="text-align:center;margin-top:20px;">— —我也是有底线的— —</p>
</div>
</div>
<script>
export default{
data(){
return{
columns:[
{title: '班级', key: 'class'},
{title: '姓名', key: 'name'},
{title: '成绩', key: 'grade'}
],
table_data:[
{class:'2班',name:'小贝',grade:100},
{class:'1班',name:'小米',grade:99},
]
}
},
}
</script>