vue3+element-plus使用无限滚动加载？

Question

这是我写的卡片里面有无限滚动加载的列表

const load = () => {
// page是每一页，limit是每页显示的数量
  if ((listQuery.value.page - 1) * listQuery.value.limit < total.value) {
    listQuery.value.page ++
// 获取tabel的表格数据
    getUrlsData(props.domain)
  }
}

const getUrlsData = (domain:string) => {
  GetDomainUrl({
    task_id: 'default',
    domain: domain,
    offset: (listQuery.value.page - 1) * listQuery.value.limit,
    limit: listQuery.value.limit,
  }).then(res => {
    console.log(res)
    if(res.code === 200) {
      loading.value = false
      res.data.urls.forEach((value) => {
        urls.value.push(value)
      })
      total.value = res.data.total
    }
  })
}

这个卡片是在弹框里面 弹框的内容有滚动条，一打开弹框 这个事件就一直在调用不停

是哪里有问题吗 请指正一下？麻烦了各位大佬

Answer 1

其实可以使用Virtualized Table这个组件，搭配end-reached 事件去动态加载就好了，

如果还是要使用 Table 组件那么使用 height 设置高度而不是 max-height，然后加上 infinite-scroll-immediate 试试，以及 infinite-scroll-delay 不要设置为 1，这里的 1 是 1ms 不是 1s