表单包含输入框,单选框,下拉选择,多选框等用户输入的组件。使用表单,可以收集、验证和提交数据。
代码结构:
<el-form :model="form" ref="form" :rules="formRules" label-width="120px"><!-- prop 必填项--><el-form-item label="姓名" prop="name"><el-input v-model="form.name" /></el-form-item><el-form-item label="年龄" prop="age"><el-input v-model="form.age" /></el-form-item><el-form-item label="性别" prop="sex"><el-select v-model="form.sex" placeholder="请选择性别"><el-option label="男" value="男" /><el-option label="女" value="女" /></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">提交</el-button><el-button @click="onReset">重置</el-button></el-form-item></el-form>
表单项常用组件:• el-input:输入框• el-select:下拉选择框• el-checkbox-group:多选框• el-radio-group:单选框