el-form 表单
<el-form ref="formRef" :model="formData" label-width="80px" size="mini"> <el-form-item label="姓名" prop='name' :rules="{ required: true, message: '不能为空'}" > <el-input v-model="formData.name" style="width: 200px"></el-input> </el-form-item> <el-form-item label="性别"> <el-select v-model="formData.gender" placeholder="请选择"> <el-option v-for="item in genderList" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select> </el-form-item> <el-form-item> <el-button type="primary" @click="save">保存</el-button> <el-button @click="clear">重填</el-button> </el-form-item> </el-form>
清空表单数据
this.$refs.formRef.resetFields();
表单校验
在 el-form-item 标签上
- 添加prop属性，值为字段名 prop='name'
- 添加字段校验规则
<el-form-item label="姓名" prop='name' :rules="{ required: true, message: '不能为空'}" >
对整个表单数据进行校验 validate
save() { this.$refs.formRef.validate((valid) => { if (valid) { alert('通过了表单校验，可以保存啦！') } }); }
对单个表单数据进行校验 validateField
this.$refs.formRef.validateField('name',err => { if(!err){ alert('姓名校验通过啦！') } })
清除表单校验 clearValidate
this.$nextTick(() => { this.$refs.formRef.clearValidate(); });
校验规则详解 rules
若只有一条校验规则，绑定对象即可
:rules="{ required: true, message: '不能为空'}"
若有多条校验规则，则绑定对象数组
:rules="[ { required: true, message: '请输入活动名称', trigger: 'blur' }, { type: 'date', required: true, message: '请选择时间', trigger: 'change' }, { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'change' }, { pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '只能输入汉字', trigger: 'change' } ]"
自定义校验（含异步校验）
{ validator: checkAge, trigger: 'blur' }
const checkAge = (rule, value, callback) => { if (value < 18) { callback(new Error('必须年满18岁')); } else { callback(); } }
异步校验
如访问接口，判断用户名是否已存在。 checkUsername为请求后端接口
required属性——是否必填
- true 表单元素的值不能为空，表单元素前会有红色*号标记
- false 表单元素的值可以为空
message属性——校验失败后的提示信息
触发校验后，若校验失败，提示信息会在表单元素下方显示
trigger属性——校验触发时机
trigger属性用于指定校验触发时机，但是并不是所有的验证项都可以被这样触发
- 'blur' 表单元素失去焦点时触发校验
- 'change' 表单元素的值发生变化时触发校验
type属性——值的类型
string: 字符串（默认值）number: 数字boolean: 布尔值method: 函数regexp: 正则表达式integer: 整数float: 浮点数array: 数组object:对象enum: 枚举类型，可以参考百度资料-枚举类型date: 日期类型url: URL类型，如 https://www.baidu.com/
hex: 文件格式类型，如 :020000040000FAemail: 邮箱类型，如 3652452@qq.comany: 任意类型
pattern属性——正则校验
:rules="[{ pattern: /^[\u4e00-\u9fa5]{0,}$/, message: '只能输入汉字', trigger: 'change' }]"
更多常用正则表达式见链接 https://blog.csdn.net/weixin_41192489/article/details/113618913
表单元素排列在一行
添加 :inline="true" 即可
<el-form ref="formRef" :model="formData" label-width="80px" size="mini" :inline="true">
常用表单元素
所有表单元素，都要使用 el-form-item 标签包裹
单行输入框
<el-input v-model="formData.name" style="width: 200px"></el-input>
多行输入框
<el-input type="textarea" v-model="formData.remark"></el-input>
下拉选择
<el-select v-model="formData.gender" placeholder="请选择"> <el-option v-for="item in genderList" :key="item.value" :label="item.label" :value="item.value" ></el-option> </el-select>
单选
<el-radio-group v-model="formData.gender"> <el-radio v-for="(item,index) in genderList" :key="index" :label="item.label"></el-radio> </el-radio-group>
多选
特别注意：因多选表单元素的值为数组，所以必须初始化其值为 []
formData: { hobby: [] },
<el-checkbox-group v-model="formData.hobby"> <el-checkbox v-for="item in hobbyList" :key="item.value" :label="item.value">{{item.label}}</el-checkbox> </el-checkbox-group>
hobbyList: [ { label: "编程", value: '1' }, { label: "读书", value: '2' }, ]
开关
<el-switch v-model="formData.show"></el-switch>
选择日期
<el-date-picker :picker-options="pickerOptions" value-format="yyyy-MM-dd" v-model="formData.birthday" type="date" placeholder="选择日期"> </el-date-picker>
选定日期的选择范围
pickerOptions: { disabledDate(time) { //此条为设置禁止用户选择今天之前的日期，包含今天。 // return time.getTime() <= (Date.now()-(24 * 60 * 60 * 1000)); //此条为设置禁止用户选择今天之前的日期，不包含今天。 return time.getTime() <= (Date.now()-(24 * 60 * 60 * 1000)); } },
选择时间
selectableRange限制可选时间范围
<el-time-picker v-model="formData.time" placeholder="选择时间" value-format="HH:mm:ss" :picker-options="{selectableRange: '18:30:00 - 20:30:00'}" >
选择日期范围
unlink-panels 用于解除左右日期面板的联动
<el-date-picker unlink-panels value-format="yyyy-MM-dd" v-model="formData.validDate" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"> </el-date-picker>
