省市区-级联选择器

1. 前言

element-china-area-data 、 Cascader 级联选择器

做一个省市区级联选择器

2. 解答

npm安装依赖

npm install element-china-area-data -S

引入数据

import {
  provinceAndCityData,//省市二级联动数据,汉字+code
  pcTextArr,//省市联动数据，纯汉字
  regionData,//省市区数据
  pcaTextArr,//省市区联动数据，纯汉字
  codeToText,//是个大对象，属性是区域码，属性值是汉字
} from "element-china-area-data";

使用级联选择器

 <el-cascader 
   size="large" 
   :options="regionData" 
   v-model="selectedOptions" 
   @change="change">
 </el-cascader>

效果

完整代码

<template>
  <div>
    <el-cascader size="large" :options="regionData" v-model="selectedOptions" @change="change">
    </el-cascader>
  </div>
</template>
<script>
import {
  provinceAndCityData,//省市二级联动数据,汉字+code
  pcTextArr,//省市联动数据，纯汉字
  regionData,//省市区数据
  pcaTextArr,//省市区联动数据，纯汉字
  codeToText,//是个大对象，属性是区域码，属性值是汉字
} from "element-china-area-data";
export default {
  data() {
    return {
      regionData,//省市区数据
      selectedOptions: [],//已选中的数据
    }
  },
  created() {
  },
  computed: {
  },
  methods: {
    change() {
      console.log("选中的值为：", this.selectedOptions);
    },
  },
}
</script>
<style lang="scss" scoped>
</style>

3. 后记

若是需要适配项目上的默认省市区数据，需要后端接口配合返回。或者与后端接口参数对比后，返回对应的结果。

4. 引用来源

文章链接：github.com/Plortinus/e…

违规请联系删除，plz。