简介
@moodxd/component-table 是一个基于 React 的表格组件，具有扩展性强、可定制性高、配置简单等特点，适用于前端常见场景下的表格展示和数据处理。
安装和使用
在项目根目录下执行以下命令安装 @moodxd/component-table 包：
npm install @moodxd/component-table --save
在需要使用的 React 组件中引用：
-- -------------------- ---- -------
------ ----- ---- --------------------------
-------- ----- -
------ -
-------
--- ---- ---
--------
--
-属性
| 属性名 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| columns | object[] | - | 表格列的配置 |
| dataSource | any[] | - | 表格数据源 |
| rowSelection | object | - | 表格行选中配置 |
| pagination | object | false | 分页配置 |
| loading | boolean | false | 表格是否需要 loading 效果 |
| bordered | boolean | true | 是否需要边框 |
| size | string | 'small' | 表格大小 |
| rowClassName | function | - | 自定义表格行类名的回调函数 |
| onChange | function | - | 表格变化时的回调函数 |
| onRow | function | - | 自定义表格行的属性 |
| expandable | object | - | 表格可展开的配置 |
columns
类型为对象数组，数组中每个对象的属性代表了该列的配置，如下所示：
-- -------------------- ---- -------
----- ------- - -
-
------ -----
---------- -------
---- ------
--
-
------ -----
---------- ------
---- ------
------- ----
--
-
------ -----
---------- ---------
---- ---------
------- ------ ------- -- -
----- -------- ------ ------------- --- --- - ------ - ------ ----------------
-
-
--dataSource
类型为数组，数组的每个元素是一行数据，每个元素需要和 columns 进行对应。
-- -------------------- ---- -------
----- ---------- - -
-
---- ----
----- -----
---- ---
------- ---
--
-
---- ----
----- -----
---- ---
------- ---
-
--rowSelection
类型为对象，可用于配置表格行的选择功能。
-- -------------------- ---- -------
----- ------------ - -
----- -----------
--------- ----------------- ------------- -- -
-- --------
--
----------------- -------- -- --
-- --------
--
--pagination
类型为对象，可用于配置表格的分页功能。
const pagination = {
current: 1,
pageSize: 10,
total: 100,
onPageChange: (page, pageSize) => {
// 处理分页数据
}
};loading
类型为布尔值，表格是否需要 loading 效果。
bordered
类型为布尔值，是否需要表格边框。
size
类型为字符串，可用于配置表格的大小。
rowClassName
类型为函数，可用于自定义表格行的类名。
const rowClassName = (record, index) => {
if (index %2 === 0) {
return 'green-row';
}
};onChange
类型为函数，当表格变化时的回调函数。
const onChange = (pagination, filters, sorter, extra) => {
// 排序、过滤、分页等操作
};onRow
类型为函数，可用于自定义表格行的属性。
const onRow = (record) => {
return {
onMouseEnter: () => {},
onMouseLeave: () => {}
};
};expandable
类型为对象，可用于配置表格可以展开和收缩。
const expandable = {
expandedRowRender: (record) => {
return <div>{record.description}</div>;
}
};示例代码
完整示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------------------
-------- ----- -
----- ------- - -
-
------ -----
---------- -------
---- ------
--
-
------ -----
---------- ------
---- ------
------- ----
--
-
------ -----
---------- ---------
---- ---------
------- ------ ------- -- -
----- -------- ------ ------------- --- --- - ------ - ------ ----------------
-
-
--
----- ---------- - -
-
---- ----
----- -----
---- ---
------- ---
--
-
---- ----
----- -----
---- ---
------- ---
-
--
----- ------------ - -
----- -----------
--------- ----------------- ------------- -- -
---------------------- --------------
-
--
----- ---------- - -
-------- --
--------- ---
------ ----
------------- ------ --------- -- -
-------------------- ----- -------- ----------
-
--
----- ------------ - -------- ------ -- -
-- ------ - - --- -- -
------ ------------
-
--
----- ----- - -------- -- -
------ -
------------- -- -- ---
------------- -- -- --
--
--
----- ---------- - -
------------------ -------- -- -
------ --------------------------------
-
--
------ -
------
-----------------
-----------------------
---------------------------
-----------------------
---------------
---------------
------------
---------------------------
---------------------- -------- ------- ------ -- -
-------------------------- ------------
----------------------- ---------
---------------------- --------
--------------------- -------
--
--------------- -- -
------ -
-------- -- -- --
--
--
-----------------------
--
--
-
------ ------- ----总结
@moodxd/component-table 是一个功能强大、易于使用的 React 表格组件，通过本篇文章，我们可以详细了解组件的各项属性和配置方式，并了解其内部实现原理。希望本篇文章可以帮助大家更好地使用这个组件，并在实际项目中发挥它的价值。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005556d81e8991b448d29cd