前言
在前端开发中，常常需要使用便捷的表格组件来显示数据，而 rc-table 是一个非常友好的 React 组件。本文介绍一个扩展 rc-table 的 npm 包 rc-table-ext，它为 rc-table 增加了一些非常实用的功能，例如可编辑单元格、固定列、多级表头等。
安装
在项目中直接使用 npm 安装 rc-table-ext：
npm install rc-table-ext --save
基本使用
安装完成后，我们就可以在代码中使用 rc-table-ext，它的基本用法与 rc-table 基本相同。以下是一个简单的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- ---------------
----- ------- - -
- ------ ----- ---------- ------ --
- ------ ----- ---------- ----- --
- ------ ------ ---------- ------- -
--
----- ---- - -
- ---- ---- ----- ----- ---- --- ------ ------------- --
- ---- ---- ----- ----- ---- --- ------ ------------- --
- ---- ---- ----- ----- ---- --- ------ ------------- -
--
----- --- ------- --------- -
-------- -
------ -
------ ----------------- ----------- --
--
-
-
------ ------- ----这个示例创建了一个普通的表格，包含了三列姓名、年龄和手机号，以及三个 row 数据。如下图所示：
可编辑单元格
使用 rc-table-ext，您可以方便地把表格变为可编辑状态。只需在 columns 中添加 editable 属性，即可将该列单元格变成可编辑状态。以下是一个示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- ---------------
----- ------- - -
- ------ ----- ---------- ------ --
- ------ ----- ---------- ------ --------- ---- --
- ------ ------ ---------- -------- --------- ---- -
--
----- ---- - -
- ---- ---- ----- ----- ---- --- ------ ------------- --
- ---- ---- ----- ----- ---- --- ------ ------------- --
- ---- ---- ----- ----- ---- --- ------ ------------- -
--
----- --- ------- --------- -
------------ - ----- ---------- ------ -- -
---------------- ---------- -------
--
-------- -
------ -
------
-----------------
-----------
--------------------------------
--
--
-
-
------ ------- ----在这个示例中，我们需要在 handleChange 回调函数中处理单元格的改变事件。当表格某个单元格发生改变时，该函数会被调用，并传递三个参数：row 的 key，所在列的 dataIndex 和最新的值。
您还可以通过在表格中嵌套 Input 组件等方式实现更为复杂的单元格编辑组件。
固定列
在较大的表格中，为了让用户在滚动时能够更好地浏览数据，我们可以将某些列固定在左边或右边。rc-table-ext 提供了 fixed 属性来实现这一功能。以下是一个示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- ---------------
----- ---------------- - -
- ------ ----- ---------- ------- ------ ------ --
- ------ ----- ---------- ----- --
- ------ ------ ---------- -------- ------ ------- -
--
----- ---- - -
- ---- ---- ----- ----- ---- --- ------ ------------- --
- ---- ---- ----- ----- ---- --- ------ ------------- --
- ---- ---- ----- ----- ---- --- ------ ------------- -
--
----- --- ------- --------- -
-------- -
------ -
------
--------------------------
-----------
--------- -- ---- --
--
--
-
-
------ ------- ----在这个示例中，我们将第一列和第三列固定在表格两侧，就像下面这样：
需要注意的是，固定的列会使表格加宽，因此我们需要在 Table 组件中设置一个 scroll 属性来允许表格的横向滚动。
多级表头
原生的 rc-table 组件只能渲染一级表头，要创建多级表头，我们需要 hand make 多级表头的 jsx。rc-table-ext 提供了一个更为直观的方式。以下是一个创建多级表头的示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ----- ---- ---------------
----- ------- - -
-
------ -------
--------- -
- ------ ----- ---------- ------ --
- ------ ----- ---------- ----- -
-
--
-
------ -------
--------- -
- ------ ----- ---------- ------- --
- ------ ----- ---------- --------- -
-
-
--
----- ---- - -
- ---- ---- ----- ----- ---- --- ------ -------------- -------- -------- --
- ---- ---- ----- ----- ---- --- ------ -------------- -------- --------- --
- ---- ---- ----- ----- ---- --- ------ -------------- -------- -------- -
--
----- --- ------- --------- -
-------- -
------ -
------
-----------------
-----------
--
--
-
-
------ ------- ----在这个示例中，我们创建了一个带有两级表头的表格，并向其中添加了四个数据列。rc-table-ext 会根据 columns 的属性自动生成相应的多级表头。
结语
rc-table-ext 使得 rc-table 的使用更加方便快捷。在本文中，我们介绍了 rc-table-ext 的几个非常实用的功能，包括可编辑单元格、固定列、多级表头等。这些功能能够提升用户体验，并减少前端开发的工作量。
您可以在我们的 Github 仓库中了解更多关于 rc-table-ext 的信息，包括完整的 API 文档和示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d3e81e8991b448db097