element-ui使用中国省市区

最近老是在项目内遇到需要选地区的地方，而我们去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>

 

posted @ 2021-01-25 12:40  初心啊  阅读(4626)  评论(0)  编辑  收藏  举报