elmentui表单使用

### 创建和操作ElementUI表单 #### 基本结构 为了构建一个基本的表单，在HTML模板中至少需要引入`el-form`, `el-input`, 和 `el-form-item`三个核心组件[^3]。下面是一个简单的例子来展示这些组件是如何组合在一起工作的。 ```html <template> <div id="app"> <!-- el-form 是必要的容器 --> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <!-- el-form-item 关联表单项及其描述文字 --> <el-form-item label="用户名" prop="username"> <!-- el-input 输入框用于接收用户输入的数据 --> <el-input v-model="ruleForm.username"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </div> </template> ``` #### 数据绑定与验证规则设置 通过`:model`属性将整个表单数据对象绑定至父级作用域中的变量，以便于后续处理；而`:rules`则用来指定各字段的具体校验逻辑[^1]。 ```javascript <script> export default { data() { var checkUsername = (rule, value, callback) => { if (!value) { return callback(new Error('请输入用户名')); } setTimeout(() => { if (!Number.isInteger(value.length)) { callback(); } else { if (value.length < 5 || value.length > 10) { callback(new Error('长度应在5到10个字符之间')); } else { callback(); } } }, 100); }; return { ruleForm: { username: '' }, rules: { username: [ { validator: checkUsername, trigger: 'blur' } ] } }; }, methods: { submitForm(formName) { this.$refs[formName].validate((valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }); }, resetForm(formName) { this.$refs[formName].resetFields(); } } }; </script> ``` #### 自定义样式调整 对于某些特定需求下的外观定制，可以通过CSS类名或内联样式来进行微调。比如改变默认间距、字体大小等视觉特性。 #### 文件上传功能集成 如果涉及到文件类型的输入项，则可利用Element UI提供的专门针对此场景设计的Upload插件完成相应交互体验的设计[^2]。 ```html <!-- 添加文件上传控件 --> <el-upload action="/api/upload" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"> <i class="el-icon-plus"></i> </el-upload> ```