-
首先引入相关组件
import {regionData, CodeToText, TextToCode} from ‘element-china-area-data’ -
使用组件
<el-cascader
size=“large”
:options=“sendaddresss”
v-model=“sendOptions”
@change=“handleChanges” style=“width:217px;” clearable>
data() { return { datas:[], sendaddresss: regionData, CodeToText, TextToCode, sendareas: '',//详细地址 sendOptions: [], sendreturnprovince:'', sendreturncity:'', sendreturnregion:'', } }, methods: { //通过下拉列表选择获取省市区 handleChanges(value) { this.sendreturnprovince = CodeToText[this.sendOptions[0]] if (CodeToText[this.sendOptions[1]] == '市辖区') { this.sendreturncity = this.sendreturnprovince } else { this.sendreturncity = CodeToText[this.sendOptions[1]] } this.sendreturnregion = CodeToText[this.sendOptions[2]] }, //通过省市区获取对应编码 convertTextToCode(provinceText, cityText, regionText) { let code = '' if (provinceText && this.TextToCode[provinceText]) { const province = this.TextToCode[provinceText] code += province.code + ', ' if (cityText && province[cityText]) { const city = province[cityText] code += city.code + ', ' if (regionText && city[regionText]) { code += city[regionText].code } } } return code }, }, mounted(){ //通过this.datas获取地址赋值到页面 this.sendOptions[0] = (this.TextToCode[this.datas.AddresserProvince].code) if (this.datas.AddresserProvince != this.datas.AddresserCity) { this.datas.AddresserCity = this.datas.AddresserCity } else { this.datas.AddresserCity = '市辖区' } this.sendOptions[1] = (this.TextToCode[this.datas.AddresserProvince][this.datas.AddresserCity].code) this.sendOptions[2] = (this.TextToCode[this.datas.AddresserProvince][this.datas.AddresserCity][this.datas.AddresserRegion].code) this.sendOptions = [this.ruleForm.sendOptions[0], this.ruleForm.sendOptions[1], this.ruleForm.sendOptions[2]] }
element地址三级联动
最新推荐文章于 2024-06-20 16:42:38 发布