效果：
新增弹框中 加入prop属性 将级联选择器value值放入对象中 这样才能验证通过
v-model=“addForm.value”
<!--========================================添加的模块============================-->
<el-dialog v-dialog-drag :visible.sync="editVisible">
<el-form :model="addForm" :rules="rules" ref="addForm" label-width="120px">
<el-form-item label="所在地区:" prop="value">
<el-cascader
v-model="addForm.value"
:options="options"
></el-cascader>
</el-form-item>
<el-form-item label="收货人:" prop="name">
<el-input v-model="addForm.name"></el-input>
</el-form-item>
<el-form-item label="手机号码:" prop="phoneNumber">
<el-input
v-model="addForm.phoneNumber" type="number"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</el-form-item>
<el-form-item label="邮政编码：" prop="postCode">
<el-input v-model.number="addForm.postCode"
type="number"
oninput="value=value.replace(/[^\d]/g,'')"
></el-input>
</el-form-item>
<el-form-item label="详细地址：" prop="detailAddress">
<el-input v-model.number="addForm.detailAddress"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmim('addForm')">提交</el-button>
<el-button @click="resetForm('addForm')">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
data(){
return{
editVisible: false,//弹框默认关闭
addForm: {
"id":null,
"name":"", // 收货人名称
"phoneNumber":"", // 收货人手机号
"defaultStatus":null,//是否为默认
"postCode":"",//邮政编码
"province":"",//省份/直辖市
"city":"",//城市
"region":"",//区
"detailAddress":"",//详细地址(街道),
value:[], //选中的地区
},
options:[],//所有的地区
rules: {
name: [
{ required: true, message: '请输入收货人名称', trigger: 'blur' },
{ min: 2, max: 6, message: '长度在 2 到 6 个汉字', trigger: 'blur' }
],
phoneNumber: [
{ required: true, message: '请输入收货人手机号码', trigger: 'blur' },
{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入11有效手机号码', trigger: 'blur' }
],
postCode: [
{ required: true, message: '请输入邮政编码', trigger: 'blur' },
{ pattern: /^[1-9][0-9]{5}$/, message: '请输入6位邮政编码', trigger: 'blur' }
],
value: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'blur' }
],
detailAddress: [
{ required: true, message: '请填写详细地址', trigger: 'blur' }
]
},
}
},
点击按钮确认和取消时
//新增收货人地址
onSubmim(addForm){
this.$refs.addForm.validate((valid) => {
if (valid) {
let data=this.addForm.value;
//给省份/直辖市赋值
this.addForm.province = data[0];
//给城市赋值
this.addForm.city = data[1];
//给区赋值
this.addForm.region = data[2];
//新增收货地址数据
saveAddress(this.addForm).then(res=>{
//成功刷新页面
if(res.data.code==200){
//关闭新增弹框
this.editVisible=false;
//刷新页面
this.getMoreAddress();
this.getAddressList();
}else {
this.$message.error("新增收货地址")
}
})
} else {
return false;
}
});
},
//取消
resetForm(addForm) {
this.$refs[addForm].resetFields();
this.editVisible = false
},
