vue 城市选择器（省市区）的使用 element-china-area-data(vue城市列表插件)

vue 城市选择器（省市区）的使用 element-china-area-data 一、Element UI 中国省市区级联数据

推荐整理分享vue 城市选择器（省市区）的使用 element-china-area-data(vue城市列表插件)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue dom选择器,vue城市选择器,vue-city,vue-city,vue城市列表插件,vue城市定位,vue城市选择器 首字母,vue城市选择器,内容如对您有帮助，希望把文章链接给更多的朋友！

本文参考：Element UI 中国省市区级联数据 本文参考：根据此文做的整理

1. 安装npm install element-china-area-data -S2. 使用import { regionData, CodeToText, TextToCode } from 'element-china-area-data'regionData是省市区三级联动数据（不带“全部”选项）CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市extToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出1101053.CodeToText的使用

数据示例：codeStr=‘110000,110100,110101’, codeArray=[110000,110100,110101]

getCodeToText(codeStr, codeArray) { if (null === codeStr && null === codeArray) { return null; } else if (null === codeArray) { codeArray = codeStr.split(","); } let area = ""; switch (codeArray.length) { case 1: area += CodeToText[codeArray[0]]; break; case 2: area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]]; break; case 3: area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]] + "/" + CodeToText[codeArray[2]]; break; default: break; } return area; }4. TextToCode 的使用

北京市/市辖区/东城区 转换成 110101

在获取详情信息的接口中，使用TextToCode 将字符串转换成编码赋给 selectedOptions

this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]][this.addForm.area.split('/')[2]].code;

如果想选择任意一级，比如只选省市不选取的话，可以增加条件判断

if (this.addForm.area.split('/')[2]) { this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]][this.addForm.area.split('/')[2]].code;} else { this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]].code;}5 整体代码：省市三级联动（不带“全部”选项）

如果想选择任意一级，可以使用element-ui的级联选择器中的选择任意一级选项的选择器，给el-cascader添加:props="{ checkStrictly: true }"属性

<template> <div id="app"> <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> </el-cascader> </div></template><script> import { regionData, CodeToText, TextToCode } from 'element-china-area-data' export default { data () { return { options: regionData, selectedOptions: [] } }, methods: { // 在获取详情信息接口中使用 TextToCode 将字符串转换成编码赋给 selectedOptions projectInfo () { var that = this; getProjectInfo({ token: getToken(), id: that.id }).then(res => { this.addForm = { id: res.id, // 基础信息 p_name: res.p_name, //项目名 p_message: res.p_message, //项目信息 area: res.area, //地区 remark: res.remark, //备注 } this.selectedOptions = TextToCode[this.addForm.area.split('/')[0]][this.addForm.area.split('/')[1]][this.addForm.area.split('/')[2]].code; }).catch(err => { Message.error(err) }) }, handleChange (value) { console.log(value) this.getCodeToText(null, value) }, getCodeToText (codeStr, codeArray) { if (null === codeStr && null === codeArray) { return null; } else if (null === codeArray) { codeArray = codeStr.split(","); } let area = ""; switch (codeArray.length) { case 1: area += CodeToText[codeArray[0]]; break; case 2: area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]]; break; case 3: area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]] + "/" + CodeToText[codeArray[2]]; break; default: break; } console.log(area) this.addForm.area = area return area; } } }</script>

最后效果： 点击编辑后：