最近老是在項目內遇到需要選地區的地方，而我們去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>