当前位置：首页 > news >正文

Vue技术之Vxe-Table的虚拟滚动

news 2025/10/21 14:55:45

虚拟滚动

纵向虚拟滚动：scroll-y

横向虚拟滚动：scroll-x

1.首先留意项目中使用的版本，我这边在项目用的是

"vxe-pc-ui": "4.0.95"版本

"vxe-table": "4.7.65"版本

所以scroll-y是可使用的，这里的弃用是因为在"vxe-table": "4.10.6"版本加入virtual-y-config，替代了scroll-y，可参考以下属性介绍

2.代码

<vxe-tableid="devProductTable"ref="tableRef":loading="loading":data="list":customConfig="{}":sort-config="{ remote: true, defaultSort: { field: 'createTime', order: 'desc' } }"@sort-change="sortChangeEvent":checkbox-config="{}"height="100%":row-config="{ height: 250 }":auto-resize="true":scroll-y="{ enabled: true}"<!--开启虚拟滚动-->
><vxe-column type="checkbox" width="60" /><vxe-column title="图片" field="mainPic" width="120px"><template #default="scope"><HHImageclass="h-100px w-100px":src="scope.row.mainPic":previewSrcList="[scope.row.mainPic]"/></template></vxe-column>
</vxe-table>

3.注意：

启动纵向虚拟滚动之后将不能支持动态行高，所以我项目中出现了行数据重叠问题，解决方案：采用固定行高250px【 :row-config="{ height: 250 }"】

其他重要的配置【

height="100%"           // 表格高度占满父容器：表示表格高度会填充其父容器。如果父容器的高度是固定的，那么当数据行数增加时，表格内部就会出现滚动条。
:auto-resize="true"     // 自动适应容器大小变化

】

调整oSize为一个合适的值，比如20，以减少每次渲染的行数，降低单次渲染耗时。如果浏览器性能较低可以设置大些，降低渲染次数
确保rSize（真实行高）设置准确，如果行高不固定，可以使用动态计算的值。这个参数实际上是没有找到的，具体没看到效果尽可能不加
正常来说scroll-y默认状态下应该是false，但是当行数达到200时，我项目中并未启动scroll-y，行数还是重叠了，应该是底层加了什么触发事件【目前没找到】
如果你希望控制在多少行时才出现滚动，可以调整 gt 的值，比如设置为200，这样在200行以内不会出现滚动，超过200行才会出现滚动。