效果：
image.png
源碼：
<el-form-item label="地區(qū):">
<el-cascader
v-model="addressForm.areaAll"
:options="provinces"
style="width: 500px"
/>
</el-form-item>
<el-button @click="submit">獲取省市區(qū)</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)//選擇后獲取到的是一個數(shù)組，如：['浙江省','杭州市','上城區(qū)']
const data = {
provice : this.addressForm.areaAll[0],
city: this.addressForm.areaAll[1],
area: this.addressForm.areaAll[2]
}
console.log(data) //獲取對象{provice:'浙江省', city:'杭州市', area:'上城區(qū)' }
}
}
}
省市區(qū)回顯：(用于修改地址的需求)
<el-form-item label="地區(qū):">
<el-cascader
v-model="addressForm.areaAll"
:options="provinces"
style="width: 500px"
/>
</el-form-item>
<el-button @click="submit">獲取省市區(qū)</el-button>
<script>
import provinces from '@/assets/json/provinces' //簡書無法上傳文件榆鼠，有需要的可私聊我
export default {
data() {
return {
provinces: provinces,
addressForm: {
areaAll: ''
},
row:{provice:'浙江省', city:'杭州市', area:'上城區(qū)' }
}
},
created(){
const {provice, city, area } = this.row
this.addressForm.areaAll= [provice, city, area]
},
}
}
