表单代码
<html>
<head></head>
<body>
<template>
<div class="page-address">
<div class="address-title">
<span>可用收货地址</span>
</div>
<div class="address-not" v-if="userAddress == null || userAddress.length == 0">
<div class="address-not-msg">
<span>您还未设置地址哦</span>
</div>
<div class="address-not-button">
<button type="primary" @click="addModal = true">添加收货地址</button>
<modal v-model="addModal" width="600" :mask-closable="false">
<p slot="header" style="color:#f60;text-align:center"> <span>新增收货地址</span> </p>
<div style="margin-left: 30px;font-size: 14px;">
<span style="color:#CCD0D7">当前配送至:</span>
<span style="font-weight: bold;margin-left: 20px;">中国大陆</span>
</div>
<div style="margin-top: 20px;">
<!-- <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80"> -->
<form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
<formitem label="收货人姓名" prop="name">
<input v-model="formValidate.name" placeholder="长度不超过18个字符哦" />
</formitem>
<formitem prop="province" label="省份">
<select v-model="formValidate.province" placeholder="请选择省份" @on-change="changeProvince"> <option v-for="(item,index) in provinceArr" :key="item.value" :value="item.value">{{ item.label }}</option> </select>
</formitem>
<formitem prop="city" label="城市">
<select v-model="formValidate.city" placeholder="请选择城市" @on-change="changeCity"> <option v-for="(item,index) in citiesArr" :key="item.value" :value="item.value">{{ item.label }}</option> </select>
</formitem>
<formitem prop="county" label="区县">
<select v-model="formValidate.county" placeholder="请选择区县"> <option v-for="(item,index) in countyArr" :key="item.value" :value="item.value">{{ item.label }}</option> </select>
</formitem>
<formitem label="详细地址" prop="desc">
<input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入详细地址信息，如街道，小区，门牌号，楼栋号，单元等信息" />
</formitem>
<formitem label="手机号码" prop="mobile">
<input v-model="formValidate.mobile" placeholder="请填写正确可用的手机号哦" />
</formitem>
<formitem prop="interest">
<checkbox v-model="formValidate.interest">
<span>设置为默认收货地址</span>
</checkbox>
</formitem>
<formitem>
<button type="primary" @click="handleSubmit('formValidate')">添加</button>
</formitem>
</form>
</div>
<!-- 对话框页脚 删除按钮 -->
<div slot="footer">
</div>
</modal>
</div>
</div>
</div>
</template>
</body>
</html>
关键代码
<html>
<head></head>
<body>
<formitem prop="province" label="省份">
<select v-model="formValidate.province" placeholder="请选择省份" @on-change="changeProvince"> <option v-for="(item,index) in provinceArr" :key="item.value" :value="item.value">{{ item.label }}</option> </select>
</formitem>
<formitem prop="city" label="城市">
<select v-model="formValidate.city" placeholder="请选择城市" @on-change="changeCity"> <option v-for="(item,index) in citiesArr" :key="item.value" :value="item.value">{{ item.label }}</option> </select>
</formitem>
<formitem prop="county" label="区县">
<select v-model="formValidate.county" placeholder="请选择区县"> <option v-for="(item,index) in countyArr" :key="item.value" :value="item.value">{{ item.label }}</option> </select>
</formitem>
</body>
</html>
使用@on-change事件进行联动
vue读取本地省市区json文件
created(){
this.$axios.get('http://localhost:8080/static/json/provinces.json').then((data) => {
this.provinceArr = data.data.data
})
}
不知道有没更好的获取办法，网上找了好久，省市区json是在网上找的，然后自己修改了一点，链接：文件地址
**完整的js部分代码**
<script>
export default {
data(){
var regPhone=/^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/
const validatePhone = (rule, value, callback) => {
if (value === '') {
callback(new Error('请填写手机号'));
} else if (!regPhone.test(value)) {
callback(new Error('请输入正确手机号'));
} else {
callback();
}
};
return{
isMultiple: false,
provinceArr: [],
citiesArr: [],
countyArr:[],
formValidate: {
province: '',
city: '',
county: '',
// 地址是否为默认地址
interest: false,
mobile: '',
// 地址详情
desc: ''
},
ruleValidate: {
name: [
{ required: true, message: '收货人姓名不能为空哦', trigger: 'blur' },
{ type: 'string', min: 2,max: 18, message: '收货人姓名应在2到18个字符哦', trigger: 'blur' }
],
province: [
{ required: true, message: '请选择收货地所属的省份', trigger: 'change' }
],
city: [
{ required: true, message: '请选择收货地所属的市', trigger: 'change' }
],
county: [
{ required: true, message: '请选择收货地所属的区县', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写收货地的详细信息', trigger: 'blur' },
// { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
],
mobile: [
{ validator: validatePhone, trigger: 'blur' }
]
}
}
},
created(){
this.$axios.get('http://localhost:8080/static/json/provinces.json').then((data) => {
this.provinceArr = data.data.data
})
},
methods: {
changeProvince(val){
for(var i=0; i<this.provinceArr.length; i++){
if(val == this.provinceArr[i].value ){
this.citiesArr = this.provinceArr[i].children
this.formValidate.county = ''
this.countyArr = []
}
}
},
changeCity(val){
for(var i=0; i<this.citiesArr.length; i++){
if(val == this.citiesArr[i].value ){
this.countyArr = this.citiesArr[i].children
}
}
}
}
}
</script>
image.png
