vxe-table 实现滚动加载数据，无限加载数据教程，通过 scroll 事件，配合虚拟滚动实现流畅的无限加载数据，适用于按需加载大量列表的场景
<template><div><vxe-gridv-bind="gridOptions"v-on="gridEvents"></vxe-grid></div></template><scriptsetup>import{reactive}from'vue'constgridOptions=reactive({border:true,loading:false,showOverflow:true,showHeaderOverflow:true,showFooterOverflow:true,height:600,columnConfig:{resizable:true},virtualYConfig:{enabled:true,gt:0},columns:[{type:'seq',width:80},{field:'id',title:'ID',width:120},{field:'name',title:'Name'},{field:'role',title:'Role'},{field:'sex',title:'Sex',width:100}],data:[]})letrowKey=0// 模拟行数据constloadList=(size=200)=>{if(gridOptions.loading){return}// 模拟后端接口gridOptions.loading=truesetTimeout(()=>{constdataList=[]for(leti=0;i<size;i++){rowKey++dataList.push({id:`${rowKey}`,name:'Test'+rowKey,role:'Developer'+rowKey,sex:'男'})}gridOptions.data=[...gridOptions.data,...dataList]gridOptions.loading=false},300)}constgridEvents={scroll({isTop,isBottom}){if(isTop){console.log('触碰到顶部')}if(isBottom){console.log('触碰到底部')loadList(20)}}}loadList(20)</script>https://gitee.com/x-extends/vxe-table
)
