vue 省市选择 - web - meepo的博客

测试效果地址：

https://plortinus.github.io/element-china-area-data/index.html

详细请参考：

https://www.npmjs.com/package/element-china-area-data

懒人步骤:

1.npm install element-china-area-data -S

2.使用如下：

<html>
 <head></head>
 <body>
  <template> 
   <div id="app"> 
    <div> 
     <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange"> 
     </el-cascader> 
    </div> 
   </div> 
  </template> 
  <script>
import { regionData , CodeToText } from "element-china-area-data";

export default {
  name: "app",
  data() {
    return {
      options: regionData,
      selectedOptions: []
    };
  },

  methods: {
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      alert(loc);
    }
  }
};
</script>
 </body>
</html>

3.编码汉字转码方法

<div>绑定值：{{selectedOptions1}}</div>

<div>区域码转汉字：{{CodeToText[selectedOptions1[0]]}},{{CodeToText[selectedOptions1[1]]}}</div>

<div>汉字转区域码：{{convertTextToCode(CodeToText[selectedOptions1[0]], CodeToText[selectedOptions1[1]])}}</div>

</div>

附相关材料：

git地址

https://github.com/Plortinus/element-china-area-data#readme

国家统计局区划信息：

http://www.stats.gov.cn/tjsj/tjbz/tjyqhdmhcxhfdm/2019/index.html

联系人：	meepo
电话：	*****
Email：	1147533288@qq.com
QQ：	1147533288