安装

执行npm install element-china-area-data -S
或者yarn add element-china-area-data -S
pig-ui 省市区级联选择 - 图1

使用

使用时我们需要在页面根据需要import,主要有下面六个数据或对象。

  1. provinceAndCityData是省市二级联动数据（不带“全部”选项）
  2. regionData是省市区三级联动数据（不带“全部”选项）
  3. provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
  4. regionDataPlus是省市区三级联动数据（带“全部”选项），其中”全部”选项绑定的value是空字符串””
  5. CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
  6. TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105

二级联动(不带“全部”选项)

页面引入 provinceAndCityData，引入省市二级数据，其中v-model绑定的以及change时间传递的value均是区域码数组,如果我们需要将区域码转换为汉字，我们需要引入TextToCode,同样，如果我们需要把汉字转为区域码，我们只需要引入TextToCode

代码:

  1. <template>
  2.   <div>
  3.     <el-cascader
  4.       size="large"
  5.       :options="provinceAndCityData"
  6.       v-model="selectedOptions1"
  7.       @change="handleChange">
  8.     </el-cascader>
  9.     {{ selectedOptions1 }}
  10.     {{ CodeToText[selectedOptions1[0]] }}
  11.     {{ CodeToText[selectedOptions1[1]] }}
  12.   </div>
  13. </template>
  15. <script>
  16.   import { provinceAndCityData , CodeToText} from 'element-china-area-data'
  17.   export default {
  18.     data () {
  19.       return {
  20.         CodeToText,
  21.         provinceAndCityData,
  22.         selectedOptions1: []
  23.       }
  24.     },
  26.     methods: {
  27.       handleChange (value) {
  28.         console.log(value)
  29.       }
  30.     }
  31.   }
  32. </script>

效果:
pig-ui 省市区级联选择 - 图2

二级联动(带有“全部”选项)

页面引入 provinceAndCityDataPlus ，引入省市二级数据(带全部)，其中v-model绑定的以及change时间传递的value均是区域码数组,如果我们需要将区域码转换为汉字，我们需要引入TextToCode,同样，如果我们需要把汉字转为区域码，我们只需要引入TextToCode

代码:

  1. <template>
  2.   <div >
  3.     <el-cascader
  4.       size="large"
  5.       :options="provinceAndCityDataPlus"
  6.       v-model="selectedOptions2"
  7.       @change="handleChange">
  8.       {{ selectedOptions2 }}
  9.       {{ CodeToText[selectedOptions2[0]] }}
  10.       {{ CodeToText[selectedOptions3[1]] }}
  11.     </el-cascader>
  12.   </div>
  13. </template>
  15. <script>
  16.   import { provinceAndCityDataPlus,CodeToText } from 'element-china-area-data'
  17.   export default {
  18.     data () {
  19.       return {
  20.         CodeToText,
  21.         provinceAndCityDataPlus,
  22.         selectedOptions2: []
  23.       }
  24.     },
  26.     methods: {
  27.       handleChange (value) {
  28.         console.log(value)
  29.       }
  30.     }
  31.   }
  32. </script>

省市区三级联动（不带“全部”选项）

页面引入 regionData ，引入省市区三级数据(不带全部)，其中v-model绑定的以及change时间传递的value均是区域码数组,如果我们需要将区域码转换为汉字，我们需要引入TextToCode,同样，如果我们需要把汉字转为区域码，我们只需要引入TextToCode

代码:

  1. <template>
  2.   <div >
  3.     <el-cascader
  4.       size="large"
  5.       :options="regionData"
  6.       v-model="selectedOptions3"
  7.       @change="handleChange">
  8.     </el-cascader>
  9.     {{ selectedOptions3 }}
  10.     {{ CodeToText[selectedOptions3[0]] }}
  11.     {{ CodeToText[selectedOptions3[1]] }}
  12.     {{ CodeToText[selectedOptions3[2]] }}
  13.   </div>
  14. </template>
  16. <script>
  17.   import { regionData,CodeToText} from 'element-china-area-data'
  18.   export default {
  19.     data () {
  20.       return {
  21.         CodeToText,
  22.         regionData,
  23.         selectedOption3: []
  24.       }
  25.     },
  27.     methods: {
  28.       handleChange (value) {
  29.         console.log(value)
  30.       }
  31.     }
  32.   }
  33. </script>

省市区三级联动（带“全部”选项）

页面引入 regionDataPlus ，引入省市区三级数据(带全部)，其中v-model绑定的以及change时间传递的value均是区域码数组,如果我们需要将区域码转换为汉字，我们需要引入TextToCode,同样，如果我们需要把汉字转为区域码，我们只需要引入TextToCode

代码:

  1. <template>
  2.   <div>
  3.     <el-cascader
  4.       size="large"
  5.       :options="regionDataPlus"
  6.       v-model="selectedOptions4"
  7.       @change="handleChange">
  8.     </el-cascader>
  9.     {{ selectedOptions4 }}
  10.     {{ CodeToText[selectedOptions4[0]] }}
  11.     {{ CodeToText[selectedOptions4[1]] }}
  12.     {{ CodeToText[selectedOptions4[2]] }}
  13.   </div>
  14. </template>
  16. <script>
  17.   import { regionDataPlus ,CodeToText} from 'element-china-area-data'
  18.   export default {
  19.     data () {
  20.       return {
  21.         regionDataPlus,
  22.         selectedOptions4: []
  23.       }
  24.     },
  26.     methods: {
  27.       handleChange (value) {
  28.         console.log(value)
  29.       }
  30.     }
  31.   }
  32. </script>

完整代码:

  1. <template>
  2.   <div class="app-container calendar-list-container">
  3.     <basic-container>
  4.       <div>
  5.         二级联动(不带“全部”选项)&nbsp;
  6.         <el-cascader
  7.           size="large"
  8.           :options="provinceAndCityData"
  9.           v-model="selectedOptions1"
  10.           @change="handleChange">
  11.         </el-cascader>
  12.         {{ selectedOptions1 }}
  13.         {{ CodeToText[selectedOptions1[0]] }}
  14.         {{ CodeToText[selectedOptions1[1]] }}
  15.       </div>
  16.       <div>
  17.         二级联动(带有“全部”选项)&nbsp;
  18.         <el-cascader
  19.           size="large"
  20.           :options="provinceAndCityDataPlus"
  21.           v-model="selectedOptions2"
  22.           @change="handleChange">
  23.         </el-cascader>
  24.         {{ selectedOptions2 }}
  25.         {{ CodeToText[selectedOptions2[0]] }}
  26.         {{ CodeToText[selectedOptions2[1]] }}
  27.       </div>
  28.       <div>
  29.         三级联动(不带“全部”选项)&nbsp;
  30.         <el-cascader
  31.           size="large"
  32.           :options="regionData"
  33.           v-model="selectedOptions3"
  34.           @change="handleChange">
  35.         </el-cascader>
  36.         {{ selectedOptions3 }}
  37.         {{ CodeToText[selectedOptions3[0]] }}
  38.         {{ CodeToText[selectedOptions3[1]] }}
  39.         {{ CodeToText[selectedOptions3[2]] }}
  40.       </div>
  41.       <div>
  42.         三级联动(带有“全部”选项)&nbsp;
  43.         <el-cascader
  44.           size="large"
  45.           :options="regionDataPlus"
  46.           v-model="selectedOptions4"
  47.           @change="handleChange">
  48.         </el-cascader>
  49.         {{ selectedOptions4 }}
  50.         {{ CodeToText[selectedOptions4[0]] }}
  51.         {{ CodeToText[selectedOptions4[1]] }}
  52.         {{ CodeToText[selectedOptions4[2]] }}
  53.       </div>
  54.     </basic-container>
  55.   </div>
  56. </template>
  58. <script>
  59.   import {
  60.     provinceAndCityData,
  61.     regionData,
  62.     provinceAndCityDataPlus,
  63.     regionDataPlus,
  64.     CodeToText,
  65.     TextToCode
  66.   } from 'element-china-area-data'
  68.   export default {
  69.     name: 'TableDemo',
  70.     data() {
  71.       return {
  72.         CodeToText,
  73.         TextToCode,
  74.         provinceAndCityData,
  75.         provinceAndCityDataPlus,
  76.         regionData,
  77.         regionDataPlus,
  78.         selectedOptions1: [],
  79.         selectedOptions2: [],
  80.         selectedOptions3: [],
  81.         selectedOptions4: [],
  82.       }
  83.     },
  84.     computed: {},
  85.     methods: {
  86.       handleChange(value) {
  87.         console.log('value', value)
  88.       }
  89.     }
  90.   }
  91. </script>
  93. <style lang="scss" scoped>
  94.   .el-dialog__wrapper {
  95.     .el-dialog {
  96.       width: 61% !important;
  98.       .dialog-main-tree {
  99.         max-height: 400px;
  100.         overflow-y: auto;
  101.       }
  102.     }
  104.     .el-form-item__label {
  105.       width: 20% !important;
  106.       padding-right: 20px;
  107.     }
  109.     .el-form-item__content {
  110.       margin-left: 20% !important;
  111.     }
  112.   }
  113. </style>

效果:
pig-ui 省市区级联选择 - 图3

❤ 问题咨询

手势点击蓝字求关注简约风动态引导关注__2022-09-07+23_18_38.gif