表单内容
<!-- ---------------添加司机按钮---------------- -->
<el-dialog title="添加司机"
:visible.sync="addDialogDriver"
width="40%"
center>
<el-form ref="form" :rules="formRules" :model="form" label-width="80px">
<el-form-item label="名字" prop="driverName">
<el-input v-model="form.driverName"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio-group v-model="form.gender">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="身份证号" prop="idCard">
<el-input v-model="form.idCard" maxlength="18"></el-input>
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="form.phone" maxlength="11"></el-input>
</el-form-item>
<el-form-item label="生日" prop="birthday">
<el-date-picker
v-model="form.birthday"
type="date"
placeholder="选择日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
</el-form-item>
<el-form-item label="驾驶证" prop="licenseGrade">
<el-select v-model="form.licenseGrade " placeholder="请选择驾驶证类型">
<el-option label="A1型" value="A1"></el-option>
<el-option label="C1型" value="C1"></el-option>
<el-option label="D型" value="D"></el-option>
</el-select>
</el-form-item>
<el-form-item label="居住地址" prop="address">
<pickArea @getSite="setArea" />
<el-input v-model="form.address"></el-input>
</el-form-item>
<el-form-item>
<el-button class="creat-order" type="primary"
@click="createDrivers()">立即创建</el-button>
<!-- <el-button>取消</el-button> -->
</el-form-item>
</el-form>
</el-dialog> data: function() {
return {
formRules: {
driverName:[
{required: true, message: '请输入用户姓名', trigger: 'blur'},
{ min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' },
],
gender:[
{required: true,message: '请选择用户性别',trigger: "blur"}
],
// idCard:[
// {required: true,message: '请输入身份证号',trigger: 'blur'},
// {min: 18, message: '长度在 18 个字符', trigger: 'blur' },
// ],
phone:[
{required: true,message: '请输入电话号码',trigger: 'blur'},
{ min: 11, message: '长度在 11 个字符', trigger: 'blur' },
],
birthday: [
{ required: true, message: '请选择生日日期', trigger: 'blur'}
],
licenseGrade:[
{required: true,message: '请选择驾驶证类型',trigger: 'blur'}
],
address: [
{required: true,message: '请选择并填入详细地址',trigger: "blur"},
]
},
};
},?<el-form>?：代表这是一个表单
<el-form>? ：ref：表单被引用时的名称，标识
<el-form>? ：rules：表单验证规则
<el-form>? ：model：表单数据对象
<el-form>? ：label-width：表单域标签的宽度，作为 Form 直接子元素的 form-item 会继承该值
<el-form>? ：<el-form-item>：表单中的每一项子元素
<el-form-item>? ：?label：标签文本
<el-form-item>? ：prop：表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的
<el-input>? ?：输入框
<el-input>? ?：v-model：绑定的表单数据对象属性
<el-input>? ?：?maxlength：最大字符长度限制
点击添加司机按钮，展示弹窗，弹窗里面输入信息后立即创建。
?
// -----打开添加按钮-------
addDrivers: async function () {
this.addDialogDriver = true
},
// -------添加司机-----
createDrivers(form) {
this.add = form
console.log(this.form,99)
this.$refs['form'].validate(async (valid) => {
if (valid) {
this.$http.post( `/driverUser/addDriver`, this.form )
this.$message.success('添加成功')
this.addDialogDriver = false
} else {
this.$message.error('提交失败，验证不通过')
return false
}
})
this.reload();
},找的时候觉得这个写的很详细！可参考：