使用 Form 组件
在 Element-React 中，el-form 组件提供了表单管理的基础功能。它通过 model 属性来绑定数据，并使用 rules 来定义验证规则。
基本用法
首先，你需要安装 Element-React 库并导入 el-form 和 el-form-item 组件。以下是一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----------- ------- - ---- ----------------
----- --------- ------- --------------- -
------------------ -
-------------
---------- - -
---------- -
--------- ---
--------- --
-
--
-
---------------- - ----- ------ -- -
----------------------- -- --
---------- -
-----------------------
------ -----
-
----
--
-------- -
------ -
------- -----------------------------
----------- ------------
--------
-------------------------------------
----------------- -- --------------------------------- -------
--
-------------
----------- -----------
--------
---------------
-------------------------------------
----------------- -- --------------------------------- -------
--
-------------
---------
--
-
-
------ ------- ----------验证表单输入
为了确保用户输入的数据符合预期，可以使用 rules 属性来设置验证规则。例如，我们可以要求用户名不为空且长度至少为4个字符，密码也不能为空。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----------- -------- --------- - ---- ----------------
----- ------------- ------- --------------- -
------------------ -
-------------
---------- - -
---------- -
--------- ---
--------- --
--
---------- -
--------- -
- --------- ----- -------- --------- -------- ------ --
- ---- -- -------- ---------------- -------- ------ -
--
--------- -
- --------- ----- -------- -------- -------- ------ -
-
-
--
-
------------ - -- -- -
-------------------------------- -- -
-- ------- -
-- ------
--------------------------
- ---- -
--------------------------------
------ ------
-
---
--
---------------- - ----- ------ -- -
----------------------- -- --
---------- -
-----------------------
------ -----
-
----
--
-------- -
------ -
------- ---------- ---------------------------- ---------------------------- -----------------------------
----------- --------------- ------------
--------
-------------------------------------
----------------- -- --------------------------------- -------
--
-------------
----------- --------------- -----------
--------
---------------
-------------------------------------
----------------- -- --------------------------------- -------
--
-------------
------------
------- -------------------------
-------------
---------
--
-
-
------ ------- --------------使用 Form 的自定义样式和布局
除了基本的表单结构，Element-React 的 el-form 组件还允许开发者自定义表单的样式和布局。
自定义表单样式
你可以通过 CSS 类或内联样式来自定义表单元素的样式。例如，我们可以通过添加一个类名到表单上，然后在 CSS 文件中定义这个类名的样式。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----------- ------- - ---- ----------------
----- ---------- ------- --------------- -
------------------ -
-------------
---------- - -
---------- -
--------- ---
--------- --
-
--
-
---------------- - ----- ------ -- -
----------------------- -- --
---------- -
-----------------------
------ -----
-
----
--
-------- -
------ -
------- ----------------------- -----------------------------
----------- ------------
--------
-------------------------------------
----------------- -- --------------------------------- -------
--
-------------
----------- -----------
--------
---------------
-------------------------------------
----------------- -- --------------------------------- -------
--
-------------
---------
--
-
-
------ ------- -----------在你的 CSS 文件中，你可以这样写：
.custom-form .el-form-item__label {
color: #333;
}
.custom-form .el-input__inner {
background-color: #f8f8f8;
}使用 Grid 布局
对于更复杂的布局需求，可以使用 Element-React 的栅格系统（Grid System）。这有助于创建响应式的表单布局。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----------- -------- ------ ----- - ---- ----------------
----- -------- ------- --------------- -
------------------ -
-------------
---------- - -
---------- -
--------- ---
--------- --
-
--
-
---------------- - ----- ------ -- -
----------------------- -- --
---------- -
-----------------------
------ -----
-
----
--
-------- -
------ -
------- -----------------------------
------ ------------
------ ----------
----------- ------------
--------
-------------------------------------
----------------- -- --------------------------------- -------
--
-------------
--------
------ ----------
----------- -----------
--------
---------------
-------------------------------------
----------------- -- --------------------------------- -------
--
-------------
--------
--------
---------
--
-
-
------ ------- ---------以上就是关于 Element-React 中表单组件的基本使用方法和一些进阶技巧。通过这些示例，你应该能够开始构建自己的复杂表单了。