element 表格 table 滚动条未触底一直请求数据

gyuhao_o

已于 2022-09-13 16:52:14 修改

阅读量1.4k

点赞数 2

文章标签：前端 html javascript

于 2022-08-15 11:03:43 首次发布

本文链接：https://blog.csdn.net/m0_48571414/article/details/126308284

版权

直接使用官网无限滚动组件在table上会出现页面刚打开就一直请求数据的bug。项目中采用在table外层嵌套<div>盒子，将触发滚动机制放于其上，但又导致表头随滚动条滚动的问题，于是隐藏表头，用ul和li写“伪表头”解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接使用官网的无限滚动组件会发现它只对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>