介绍
@ag-grid-enterprise/viewport-row-model 是一种专为 ag-Grid 所开发的高性能视图行模型方式。它通过分页加载数据，避免了一次性加载所有数据的低效问题。Viewport row model 支持大量数据的快速渲染，并且可以与 ag-Grid 的其他功能和自定义组件无缝集成。
在本篇文章中，我们将介绍如何使用 @ag-grid-enterprise/viewport-row-model 这个 npm 包来实现高性能大数据量的表格渲染，并将提供一些实用的示例代码来加深理解。
安装
要开始使用 @ag-grid-enterprise/viewport-row-model，首先需要安装它：
npm install @ag-grid-enterprise/viewport-row-model
请注意，@ag-grid-enterprise/viewport-row-model 是 ag-Grid Enterprise 的一部分，因此必须拥有相应的许可证才能使用。
配置
使用 @ag-grid-enterprise/viewport-row-model 需要在您的 ag-Grid 列定义中启用 viewportRowModel：
gridOptions = {
viewportRowModel: true,
rowModelType: 'viewport'
...
}请注意，rowModelType 必须设置为 'viewport'，以便与 viewportRowModel 协同工作。
设置 pageSize
一般情况下，默认值为 200 条记录，用户可以通过 pageSize 属性调整。例如：
gridOptions = {
viewportRowModel: true,
rowModelType: 'viewport',
viewportPageSize: 500,
...
}接收数据
当分页加载新数据时，viewportRowModel 会调用它的一个回调方法 getRowChunk(params)。getRowChunk(params) 方法应该返回一个带有数据的 promise 对象。例如：
-- -------------------- ---- -------
----------- - -
----------------- -----
------------- -----------
------------------------- ---
--------------------------- --
------------------------- ---
------------------------- ----
---------------------------------------- --
--------------------------- -
--------------- -
----- ------- - ---
--- ---- - - ---------------- - - -------------- ---- -
-------------- ------ - ---
-
------ --- --------------- -- -
------------- -- -
-----------------
-- -----
---
--
--
--在这个例子中，viewportRowModel 使用 getRows(params) 这个方法获取数据。getRows(params) 方法应该返回一个 promise，它应该解决一个包含分页数据的数组。
示例代码
下面是一个关于如何配合 Vue.js 框架使用 @ag-grid-enterprise/viewport-row-model 的示例代码：
-- -------------------- ---- -------
----------
---- ----------------------- -------------- ------ ------ -------
------------
------------
-----------------------
--------------------------
---------------------------------
---------------
------
-----------
--------
------ - --------- - ---- -------------------------
------ -----------------------------------------
------ ------- -
----------- -
----------
--
------ -
------ -
------------ -----
--
--
-------- -
------------------- -
------------ - -----------
------------------ - -----------------
----- ---------- - -------------- -- -
----- ------ - -----------------------------------
----- --------- - ---------------------------------------------
----- ------------ - ------ - ------------- - ----------
----- --------------- - ---------
- ---------------- - -------------------
- ----------
-- -
------------ --- --------- --
--------------- --- --------- --
------------ - - --
--------------- - ----------------------------
- -
----- ------- - --------------------------------------
---------------------------------------- ----------
------------- -- -
--------------------------
-- -----
-
-- -----
--
--
------------- -
---------------- - -
----------- -
- ------ ---------- --------- --- --
- ------ ----- --
- ------ --------- --
- ------ ------ --
- ------ ------ --
- ------ ------ --
- ------ -------- --
- ------ -------- --
- ------ ------- --
--
-------------- -
----- --
--------- ----
---------- -----
--
------------- -----------
------------------------- ---
--------------------------- --
------------------------- ---
------------------------- ----
---------------------------------------- --
--------------------------- -
--------------- -
----- ------- - ---
--- ---- - - ---------------- - - -------------- ---- -
-------------- ------ - ---
-
------ --- ----------------- -- -
------------- -- -
-----------------
-- -----
---
--
--
--
--
--
---------上述代码演示了如何嵌套 @ag-grid-enterprise/viewport-row-model 到 Vue 组件中，以及如何使用它来分页加载数据。
结论
总而言之，@ag-grid-enterprise/viewport-row-model 是一种高效、可定制、易于使用的数据加载和渲染模型。尽管配置略显繁琐，但它提供的高速度和高度定制化使得它成为处理大型数据集的极佳选择。希望这篇文章能为您提供一些指导和帮助，让您能更充分地利用 @ag-grid-enterprise/viewport-row-model 的优势，提高您的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac90b5cbfe1ea0610a7b