介绍
replay-table 是一个基于 React 的轻量级表格组件，提供数据筛选、排序、分页等常见功能，适用于大量数据的展示及处理。本文将详细介绍该组件的使用方法及注意事项。
安装
使用 npm 安装 replay-table：
npm install replay-table --save
引入组件
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ---------------
----- ------- ------- --------------- -
-------- -
------ -
------------
----------------------
----------------------------
-----------
------------- --------- -- --
--
-
-
------- - -
-
------ -----
---------- -----
--
-
------ -------
---------- -------
--
-
------ ------
---------- ------
--
-
------ ----------
---------- ----------
--
--
---------- - -
-
--- --
----- ----- -------
---- ---
-------- ---- ---- --- - ---- ------
--
-
--- --
----- ---- -------
---- ---
-------- ------- --- - ---- ------
--
-- ---
--
-Props
columns
表格列的配置描述，详见ColumnProps。
dataSource
表格的数据源，表格会自动根据 columns 进行渲染。
rowKey
表格行 key 的取值函数。
pagination
分页器的配置，详见 PaginationProps。
常用方法
ref
使用 ref 获取组件实例，可以通过实例调用以下方法：
reload
重新加载数据，触发 dataSource 和 pagination 变化，从而进行表格的重新渲染：
-- -------------------- ---- -------
----- ------- ------- --------------- -
-------------- - ------------------
------------ - -- -- -
-------------------------------------
-
-------- -
------ -
-----
------- -----------------------------------------
------------
-------------------------
----------------------
----------------------------
-----------
------------- --------- -- --
--
------
-
-
-- ---
-onChange
当表格的筛选、排序、分页变化时，会自动触发 onChange 函数，可以通过该函数获取变化后的数据源及分页信息：
-- -------------------- ---- -------
----- ------- ------- --------------- -
------------ - ------------ -------- ------- -- -
----------------------- -------- --------
-
-------- -
------ -
------------
----------------------
----------------------------
-----------
------------- --------- -- --
----------------------------
--
-
-
-- ---
-示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ---------------
----- ------- ------- --------------- -
-------------- - ------------------
------- - -
-
------ -----
---------- -----
--
-
------ -------
---------- -------
------- --- -- -- -----------------------------
--
-
------ ------
---------- ------
------- --- -- -- ----- - ------
--
-
------ ----------
---------- ----------
-------- -
-
----- ---- ------
------ ---- ------
--
-
----- ---------
------ ---------
--
--
--------- ------- ------- -- ----------------------------- --- --
--
--
---------- - -
-
--- --
----- ----- -------
---- ---
-------- ---- ---- --- - ---- ------
--
-
--- --
----- ---- -------
---- ---
-------- ------- --- - ---- ------
--
-
--- --
----- ---- -------
---- ---
-------- ------- --- - ---- ------
--
-
--- --
----- ---- -----
---- ---
-------- ------- --- - ---- ------
--
-- ---
--
------------ - -- -- -
-------------------------------------
-
------------ - ------------ -------- ------- -- -
----------------------- -------- --------
-
-------- -
------ -
-----
------- -----------------------------------------
------------
-------------------------
----------------------
----------------------------
-----------
------------- --------- -- --
----------------------------
--
------
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a3f81e8991b448d7e08