element省市區三級聯動 Vue

閱讀NPM包介紹原文檔

插件包安裝

npm install element-china-area-data -S

使用

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

服務端用法：

const { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } = require('element-china-area-data/dist/app.commonjs')

PS：

provinceAndCityData是省市二級聯動數據（不帶“全部”選項）
regionData是省市區三級聯動數據（不帶“全部”選項）
provinceAndCityDataPlus是省市區三級聯動數據（帶“全部”選項）
regionDataPlus是省市區三級聯動數據（帶“全部”選項）
"全部"選項綁定的value是空字符串""
CodeToText是個大對象，屬性是區域碼，屬性值是漢字 用法例如：CodeToText['110000']輸出北京市
TextToCode是個大對象，屬性是漢字，屬性值是區域碼 用法例如：TextToCode['北京市'].code輸出110000,TextToCode['北京市']['市轄區'].code輸出110100,TextToCode['北京市']['市轄區']['朝陽區'].code輸出110105

省市區三級聯動（不帶“全部”選項）

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData,CodeToText } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        CodeToText: CodeToText,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
        for (let i = 0; i < value.length; i++) {
          console.log(CodeToText[value[i]])
        }
      }
    }
  }
</script>