vue el-form-item 是否显示

`el-form-item` 是 Element UI 中的一个组件，用于构建表单元素，并提供了一种结构化的方式来组织表单数据。在 Vue.js 应用程序中，`el-form-item` 可以帮助开发者创建易于管理和风格一致的表单界面。

### `el-form-item` 的基本用法

`el-form-item` 主要有以下几个属性可以控制其是否显示：

1. **visible** - 控制表单项的可见性。例如：

   <el-form-item label="用户名" prop="username" visible="true">
     <el-input v-model="form.username"></el-input>
   </el-form-item>

这里通过将 `visible` 设置为 `"true"` 来使表单项可见。

2. **hidden** - 类似于 `visible`，但通常用于更复杂的情况，如动态添加或移除表单项时。可以通过条件判断动态设置该值：

   <el-form-item :hidden="!showUsernameField">
     <!-- 表单项内容 -->
   </el-form-item>

3. **disabled** - 控制输入框等控件是否禁用。这会影响到用户对表单项的交互：

   <el-form-item label="密码" prop="password">
     <el-input type="password" v-model="form.password" disabled></el-input>
   </el-form-item>

4. **required** - 标记表单项为必填项，通常配合 `v-model` 使用验证逻辑：

   <el-form-item label="邮箱" prop="email" required>
     <el-input v-model="form.email"></el- 当有错误信息或校验成功时，可以给表单项添加额外的 CSS 类名，以便自定义样式：

<el-form-item
label="地址"
prop="address"
:rules="{ validator: validateAddress }"
>
<el-input v-model="form.address" class="errorClassWhenInvalid"></el-input>
</el-form-item>

6. **class** 和 **style** 属性可用于进一步自定义表单项的外观和布局。

### 示例代码

<template>
<div>
<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
<el-row>
<el-col :span="24">
<el-form-item label="用户名" prop="username" :visible.sync="showUsernameField">
<el-input v-model="ruleForm.username"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</template>

<script>
export default {
data() {
return {
ruleForm: {
username: '',
},
showUsernameField: true,
rules: {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
]
}
};
}
};
</script>

通过上述配置和示例，你可以灵活地控制 `el-form-item` 组件在 Vue.js 应用中的显示状态。这样的控制不仅增加了应用的灵活性，还能提升用户体验和系统的维护效率。