在前端开发中，使用状态管理工具来管理应用的数据是非常必要且有效的。Redux 是一个流行的状态管理工具，但仅仅使用 Redux 并不能完全满足复杂应用的需求，我们需要使用一些类似于表格这样的组件来帮助我们管理应用的数据。而 redux-table 就提供了一种简单、易用、强大的数据表格组件解决方案，方便我们实现数据的展示、过滤、排序、编辑、增加、删除等传统表格组件的基本功能。
安装
使用命令行工具 npm 进行安装：
--- ------- ----------- ------
引入
使用以下代码将 redux-table 引入到你的项目中：
------ ----- ---- --------------
接下来我们需要创建一个 reducer 来管理我们的表格组件的状态，你可以名字任意取。我们以 table 示例，请按以下代码创建：
------ - --------------- - ---- -------- ------ - ------- -- ------------ - ---- -------------- ------ ------- ----------------- ------ ------------ ---
在这个 reducer 中，我们将 redux-table 的 reducer 引用进来，并将它映射到我们自己定义的 table 命名空间中。
此时，我们的 redux-table 就准备好了，接下来我们将通过一些简单、关键的代码片段学习如何管理你的数据表格。
关键属性
columns
columns 属性表示 table 的列，通常建议通过大写字母来表示 columns 的名称，以方便我们在代码中引用它们。我们可以对每一列进行配置项和样式，并在 render 方法里面自定义模式，如下：
----- ------- - -
- ------ ------- ------ ------- ------ ---- ------ --------- --------- ---- --
- ------ ------ ------ ------ ------ --- ------ --------- --------- ---- --
- ------ --------- ------ --------- ------ ---- ------ --------- --------- ---- --
-
------ ---------
------ ---------
------ ----
------ -------
------- --------- --------- -- -
-----
------- ----------- -- -------------- --- -----------------------------
------
-
-
--在 columns 中，我们配置了表格的每一列的 label(表头)、field(表格数据字段)、width(列宽)、align(列对齐方式)、sortable(是否可排序) 以及 render 方法。在 render 方法里面，我们可以完全自定义列的内容，通过表格传入的数据和当前列对应的索引，处理出我们需要展示的内容。
dataSource
dataSource 属性表示数据源，格式为数组类型。它的值就是我们需要展示的原始数据，我们需要将它通过 redux 的 dispatch 方法提交到 reducer 中进行管理。我们通过以下代码将数据源传递给 table 组件：
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ ----- ---- --------------
------ ------- ---- ------------
----- ---------- - -
- ----- ----- ---- --- ------- --- --
- ----- ----- ---- --- ------- --- --
- ----- ----- ---- --- ------- --- --
- ----- ----- ---- --- ------- --- -
--
----- ----------- - ------- -- --------------
----- --- - ------- -- -
----- - ------ -------- - - ------
------------ -- -
---------- ----- ------------- -------- - ----- ---------- ----
-- ----
------ -
-----
--------------
------
------------
-----------------------
-----------------------------
-----------------------------
-----------------------------
---------------------
-------------------------
-------------------------------
------
--
--
------ ------- --------------------------在这里，我们将 dataSource 的值通过 dispatch 方法提交到 reducer 中，数据源就会被保存到 table 的状态下。我们要注意，在 reducer 中我们还需要进行如下处理，才能读取到初始的数据源：
------ - ------------- - ---- ---------------- ------ - ---------------- ---------- - ---- -------------- ----- --------- - - ----------- --- -------- --- ----------- - ------ -- ----- --- ------ - - -- ------ ----- ------- - --------------- ------------------ ------- ------- -- -- --------- ----------- -------------- --- ------------- ------- -- -- --------- ------------ -- -- -----------
在 reducer 中，我们需要将 SET_DATA_SOURCE 的值设为提交过来的数据源数组。
pagination
pagination 属性表示分页器参数，类型为对象，它具有以下属性：
index表示当前页码。size表示一个页面最多展示的记录数。total表示记录的总条数。
以下是一个 pagination 的示例：
----- ---------- - - ------ -- ----- --- ------ --- --
在 reducer 中，我们也需要通过如下代码进行处理：
------ - ------------- - ---- ---------------- ------ - -------------- - ---- -------------- ----- --------- - - ----------- --- -------- --- ----------- - ------ -- ----- --- ------ - - -- ------ ----- ------- - --------------- ----------------- ------- ------- -- -- --------- ----------- -------------- --- -- ----- ----------- -- -----------
onRowClick
onRowClick 方法表示单击一行后的回调函数，在这里我们可以实现数据展示、数据编辑等操作，具体代码如下：
---------- - --------- --------- -- - -------------------- --- ------------ ----- -- --------- --
我们将 onRowClick 传递给 Table 组件，如下：
------ ------------ ----------------------- ----------------------------- ----------------------------- ----------------------- --------------------- ------------------------- -------------------------------
当用户单击某一行时，我们的回调函数就会被调用，并将这一行的数据和对应的索引传递给它。
onSort
onSort 方法表示对表格数据进行排序的回调函数，在这里我们需要从新的排序状态，才能达到表格数据进行排序的效果，具体代码如下：
------ - ------- ------ -- - ----------------- -- ---------- -- -------- -------- --
我们将 onSort 方法传递给 Table 组件，如下：
------ ------------ ----------------------- ----------------------------- ----------------------------- ----------------------- --------------- ------------------------- -------------------------------
当用户单击某一列时，我们的表格会调用 onSort 方法进行重新排序，此时我们可以根据用户选中的 field 和排序的 order 参数对数据源进行排序。
onFilter
onFilter 方法表示对表格数据进行筛选的回调函数，在这里我们也需要根据新的筛选状态，来更新数据源并展示筛选结果，具体代码如下：
-------- - --------- -- - --------------------- -- --------- --
我们将 onFilter 方法传递给 Table 组件，如下：
------ ------------ ----------------------- ----------------------------- ----------------------------- ----------------------- --------------------- ------------------- -------------------------------
当用户对表格进行筛选后，我们的表格会调用 onFilter 方法进行数据展示的更新，此时我们可以根据用户选中的筛选条件对数据源进行更新并呈现筛选结果。
onPaginate
onPaginate 方法表示对数据进行分页的回调函数，在这里我们根据传入的参数，更新 pagination 的值并维护数据源，来达到分页的效果，具体代码如下：
---------- - ------- -- - --------------------- -- ---- ----------- --
我们将 onPaginate 方法传递给 Table 组件，如下：
------ ------------ ----------------------- ----------------------------- ----------------------------- ----------------------- --------------------- ------------------------- -------------------------
当用户在分页插件中进行翻页时，我们的表格会调用 onPaginate 方法对数据源进行更新并重新展示，此时我们可以根据用户选中的页码，更新 pagination 的值并维护数据源实现分页的效果。
结语
通过以上介绍，我们学习了如何使用 redux-table 实现来数据表格的展示、过滤、排序、编辑、增加、删除等功能，并实现了分页、自定义列等功能。在实际的生产环境中，你可以通过 redux-table 的扩展性，来定制一些适合自己业务的特定需求，提高代码的可复用性和维护性。希望本篇文章能够帮助你更好地使用 redux-table 来处理数据表格，实现前端开发的业务需求。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006700de361a36e0bce8cb1