我的解决办法是采用vxe-table 的虚拟滚动
官网链接:https://vxetable.cn/v4/#/table/scroll/scroll
<vxe-table
border
show-overflow
ref="xTable1"
height="300"
:row-config="{isHover: true}">
<vxe-column type="seq" width="100"></vxe-column>
<vxe-column field="name" title="Name" sortable></vxe-column>
<vxe-column field="role" title="Role"></vxe-column>
<vxe-column field="sex" title="Sex"></vxe-column>
</vxe-table>
import { defineComponent, ref, onMounted, nextTick } from 'vue'
import { VxeTableInstance } from 'vxe-table'
import XEUtils from 'xe-utils'
export default defineComponent({
setup () {
const mockList1: any = []
for (let index = 0; index < 200; index++) {
mockList1.push({
name: 'Test' + index,
role: 'Developer',
sex: '男'
})
}
const xTable1 = ref<VxeTableInstance>()
onMounted(() => {
nextTick(() => {
const $table = xTable1.value
if ($table) {
$table.loadData(XEUtils.clone(mockList1, true))
}
})
})
return {
xTable1
}
}
})
如果有不知道接口返回的数据怎么添加进表格的可以私信我,看到就会回复~ 喜欢文章的点个赞再走哦,谢谢支持