最近老是在项目内遇到需要选地区的地方，而我们去github上拉省市区数据太费劲了，所以今天弄个快捷使用省市区选择框
项目使用的框架是VUE+element-ui
首先是安装
以下教程参考自官方的教程：https://www.npmjs.com/package/element-china-area-data
执行以下语句安装城市数据：
npm install element-china-area-data -S
然后去导入
我们就以vue-cli创建的项目为例，在vue文件中的scrit标签内导入数据：
import { regionData, CodeToText} from "element-china-area-data"
最后是使用方法
如下代码所示：
<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>