Element UI 中国省市区级联数据
1.下载:npm install element-china-area-data -S
2.按需导入:import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
provinceAndCityData是省市二级联动数据(不带“全部”选项)
regionData是省市区三级联动数据(不带“全部”选项)
provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
regionDataPlus是省市区三级联动数据(带“全部”选项)
"全部"选项绑定的value是空字符串""
CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText['110000']输出北京市
TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105
3.案例
<el-form-item label="交付地区" prop="province" :rules=" form.contractStatus == '1' ? rules.province : [{ required: false }] " > <el-cascader clearable class="dialog_form_width" size="large" :options="regionOptions" v-model="selectedRegionOptions" @change="handleChangeRegion"> </el-cascader> </el-form-item> data() { return { regionOptions: regionData, selectedRegionOptions: [], form:{ province:"", city:"", area:"" } }; }, methods: { /** 获取省市区 */ handleChangeRegion() { this.form.province = CodeToText[this.selectedRegionOptions[0]]; this.form.city = CodeToText[this.selectedRegionOptions[1]]; this.form.area = CodeToText[this.selectedRegionOptions[2]]; }, /** 修改按钮,回显省市区 */ handleUpdate() { // this.selectedOptions.push(TextToCode[this.form.provinces].code,TextToCode[this.form.provinces][this.form.city].code) this.selectedRegionOptions = []; if ( this.form.province != "" && this.form.province != undefined && this.form.province != null ) { this.selectedRegionOptions.push( TextToCode[this.form.province].code, TextToCode[this.form.province][this.form.city].code, TextToCode[this.form.province][this.form.city][this.form.area].code ); } }, }
4.点击修改时,将省市传过来,通过TextToCode转成code,这样才会回显省市
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix