### Vue.js Element Plus `<el-form-item>` 组件 props 属性说明及使用方法 #### 1. `label` 属性 `label` 属性用于定义表单项的标签文本，通常显示在表单字段的左侧或上方。 - **作用**：为表单项提供描述性文字。 - **数据类型**：`string` - **示例代码**： ```vue <el-form-item label="用户名"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> ``` --- #### 2. `prop` 属性 `prop` 属性用于指定当前表单项绑定的字段名称，必须与 `el-form` 的 `model` 对象中的字段相对应。它是校验规则的关键属性。 - **作用**：绑定表单项到 `el-form` 的 `model` 中的字段，并支持校验规则。 - **数据类型**：`string` - **示例代码**： ```vue <el-form :model="ruleForm" :rules="rules" ref="formRef"> <el-form-item label="用户名" prop="username"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> </el-form> ``` - **关键点**：通过 `prop` 指定字段名称，从而应用对应的校验规则[^3]。 --- #### 3. `rules` 属性 `rules` 属性允许直接为单个表单项设置校验规则，而不依赖 `el-form` 的全局规则。 - **作用**：为特定表单项定义独立的校验规则。 - **数据类型**：`Array<Object>` - **示例代码**： ```vue <el-form :model="ruleForm" ref="formRef"> <el-form-item label="用户名" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> </el-form> ``` - **关键点**：当需要为某个表单项单独定义规则时，可以使用 `rules` 属性。 --- #### 4. `required` 属性 `required` 属性用于标记表单项是否为必填项。如果设置为 `true`，则会在表单校验时检查该字段是否为空。 - **作用**：标记表单项为必填项。 - **数据类型**：`boolean` - **示例代码**： ```vue <el-form-item label="用户名" prop="username" :required="true"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> ``` - **关键点**：`required` 属性仅作为视觉提示，实际校验逻辑仍需通过 `rules` 定义[^3]。 --- #### 5. `error` 属性 `error` 属性用于手动设置表单项的错误信息，覆盖默认的校验错误提示。 - **作用**：手动指定表单项的错误信息。 - **数据类型**：`string` - **示例代码**： ```vue <el-form-item label="用户名" :error="usernameError"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> ``` - **关键点**：通过动态绑定 `error` 属性，可以实现自定义错误提示。 --- #### 6. `show-message` 属性 `show-message` 属性控制是否显示校验错误提示信息。 - **作用**：隐藏或显示校验错误提示。 - **数据类型**：`boolean` - **示例代码**： ```vue <el-form-item label="用户名" prop="username" :show-message="false"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> ``` - **关键点**：当不需要显示错误提示时，可将此属性设置为 `false`。 --- #### 7. `inline-message` 属性 `inline-message` 属性控制校验错误提示信息的显示方式，设置为 `true` 时，提示信息会以行内形式显示。 - **作用**：调整校验错误提示的显示样式。 - **数据类型**：`boolean` - **示例代码**： ```vue <el-form-item label="用户名" prop="username" :inline-message="true"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> ``` - **关键点**：适用于需要更紧凑布局的场景。 --- #### 8. `size` 属性 `size` 属性用于统一表单项内组件的尺寸，继承自 `el-form` 的 `size` 属性。 - **作用**：设置表单项内组件的尺寸。 - **数据类型**：`string`（`large`、`default`、`small`） - **示例代码**： ```vue <el-form :model="ruleForm" size="small"> <el-form-item label="用户名" prop="username"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> </el-form> ``` --- ### 示例总结 以下是一个综合示例，展示了多个 `props` 的使用： ```vue <template> <el-form :model="ruleForm" :rules="rules" ref="formRef" size="medium"> <el-form-item label="用户名" prop="username" :required="true" :show-message="true" :inline-message="false"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password" :error="passwordError"> <el-input type="password" v-model="ruleForm.password"></el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { ruleForm: { username: '', password: '' }, rules: { username: [{ required: true, message: '请输入用户名', trigger: 'blur' }] }, passwordError: '' }; } }; </script> ``` ---