效果:
image.png
源码:
<el-form-item label="地区:">
<el-cascader
v-model="addressForm.areaAll"
:options="provinces"
style="width: 500px"
/>
</el-form-item>
<el-button @click="submit">获取省市区</el-button>
<script>
import provinces from '@/assets/json/provinces' // 文件地址:https://gitee.com/wx_01c754d920/provinces.git
export default {
data() {
return {
provinces: provinces,
addressForm: {
areaAll: ''
}
}
},
methods: {
submit() {
console.log(this.addressForm.areaAll)//选择后获取到的是一个数组,如:['浙江省','杭州市','上城区']
const data = {
provice : this.addressForm.areaAll[0],
city: this.addressForm.areaAll[1],
area: this.addressForm.areaAll[2]
}
console.log(data) //获取对象{provice:'浙江省', city:'杭州市', area:'上城区' }
}
}
}
省市区回显:(用于修改地址的需求)
<el-form-item label="地区:">
<el-cascader
v-model="addressForm.areaAll"
:options="provinces"
style="width: 500px"
/>
</el-form-item>
<el-button @click="submit">获取省市区</el-button>
<script>
import provinces from '@/assets/json/provinces' //简书无法上传文件,有需要的可私聊我
export default {
data() {
return {
provinces: provinces,
addressForm: {
areaAll: ''
},
row:{provice:'浙江省', city:'杭州市', area:'上城区' }
}
},
created(){
const {provice, city, area } = this.row
this.addressForm.areaAll= [provice, city, area]
},
}
}