前言
随着前端技术的不断发展，React 组件库也越来越成熟。antd 是一个基于 React 的 UI 库，在 React 项目中广受欢迎。而 @alist/antd 则是在 antd 基础上进行了拓展，提供了更多的功能和组件。本文将介绍如何使用 @alist/antd，以及对一些功能的解读和实践。
安装
可以使用 npm 或 yarn 进行 @alist/antd 的安装。
# npm npm install @alist/antd --save # yarn yarn add @alist/antd
用法
列表 List
作为 @alist/antd 的核心组件之一，List 功能强大，支持以下功能：
- 支持通过请求数据获取列表数据；
- 支持通过组件属性配置列表字段；
- 支持通过分页、筛选、排序等方式操作列表；
- 支持渲染自定义列；
- 支持扩展功能插件。
List 的基础用法如下：
-- -------------------- ---- -------
------ - ---- - ---- --------------
----- ---------- - -
---- -- ----- -------- ---- ----
---- -- ----- ------ ---- ----
---- -- ----- ------- ---- ----
--
----- ----------------------- ------------
------------ ---------- -------------- --
------------ ------------ ---------------- --
------------ ----------- --------------- --
-------在上述代码中，dataSource 属性是列表的数据源，rowKey 属性定义每一行数据对应的唯一值，List.Column 组件表示每一列，title 属性表示表头名称，dataIndex 属性匹配数据源字段。
表单 Form
@alist/antd 的表单组件 Form 是基于 antd 的 Form 进行了封装，提供了更多的功能和颗粒度的控制。Form 支持如下功能：
- 支持组件属性配置表单字段；
- 支持表单验证；
- 支持多列布局；
- 支持联动控制；
- 支持渲染自定义组件。
Form 的基础用法如下：
-- -------------------- ---- -------
------ - ---- - ---- --------------
------
---------- ---------------- ----------------
------ --
------------
---------- ---------------- ----------------
--------------- --
------------
---------- ----------- -----------
------------ --
------------
-----------
------- -------------- ---------------------------------
------------
-------在上述代码中，Form 是表单的根组件。Form.Item 表示表单项，label 属性表示表单项名称，name 属性表示表单项匹配的数据源字段，Input 组件表示文本输入框，Input.Password 组件表示密码输入框，InputNumber 组件表示数字输入框。
扩展
列表 List 扩展
@alist/antd 的 List 组件支持自定义列和插件扩展。自定义列可以通过 value 属性渲染自定义内容，例如：
-- -------------------- ---- -------
----- ---------- - -
---- -- ----- -------- ---- ----
---- -- ----- ------ ---- ----
---- -- ----- ------- ---- ----
--
----- ----------------------- ------------
------------ ---------- -------------- --
------------ ------------ ---------------- --
------------ ----------- --------------- --------- ----- -- -- -
------ ------------ --------
-- --
-------此时列表将会以 “Age + 岁” 的形式展示。
插件扩展可以通过 config 属性进行配置，例如：
-- -------------------- ---- -------
----- ---------- - -
---- -- ----- -------- ---- ----
---- -- ----- ------ ---- ----
---- -- ----- ------- ---- ----
--
----- ----------------------- ----------- ---------
------- -
------------ -----
----------- --------
------- -- -- -
------ ------- -------------------------------
-
-
---
------------ ---------- -------------- --
------------ ------------ ---------------- --
------------ ----------- --------------- --
-------此时列表右上角支持搜索功能，且搜索按钮为自定义按钮。
表单 Form 扩展
@alist/antd 的 Form 组件也支持扩展，例如自定义组件、自定义验证等。自定义组件可以通过 component 属性进行配置，例如：
-- -------------------- ---- -------
------
---------- ---------------- ----------------
------ --
------------
---------- -------------- ------------- ------------- --------- -------- -- -- -
------ -
------- -----------
----------
-------------- ---------------------------------
-------------- -------------------------------------
-------------- -----------------------------------
---------
--
---
------------
---------- ----------- -----------
------------ --
------------
-----------
------- -------------- ---------------------------------
------------
-------此时表单将支持 Gender 选择项。
自定义验证可以通过 rules 属性进行配置，例如：
-- -------------------- ---- -------
------
---------- ---------------- --------------- ---------
--------- -----
-------- --------
-- -
---- ---
-------- ------ -- ----
----
------ --
------------
---------- -------------- ------------- ------------- --------- -------- -- -- -
------ -
------- -----------
----------
-------------- ---------------------------------
-------------- -------------------------------------
-------------- -----------------------------------
---------
--
-- ---------
--------- -----
-------- -------
----
------------
---------- ----------- ---------- ---------
--------- -----
-------- -------
----
------------ --
------------
-----------
------- -------------- ---------------------------------
------------
-------此时表单的各字段将支持相应的验证。
结语
@alist/antd 提供了更为强大的列表和表单组件，可以大大提升前端的开发效率和体验。 使用 @alist/antd 的过程中，我们需要善于使用其提供的配置和扩展功能，自由发挥组件的功能。现在就开始你的 @alist/antd 之旅吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/135883