快捷導(dǎo)航

vue中國城市選擇器的使用教程(element-china-area-data)

更新時間：2023年11月14日 09:27:36 作者：前端大鵪鶉

這篇文章主要給大家介紹了關(guān)于vue中國城市選擇器使用(element-china-area-data)的相關(guān)資料,使用element-china-area-data插件可以非常方便地實(shí)現(xiàn)省市縣三級聯(lián)動選擇器,需要的朋友可以參考下

一、Element UI 中國省市區(qū)級聯(lián)數(shù)據(jù)

本文參考：element-china-area-data - npm

1. 安裝

npm install element-china-area-data -S

2. 使用

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

provinceAndCityData是省市二級聯(lián)動數(shù)據(jù)（不帶“全部”選項(xiàng)）
regionData是省市區(qū)三級聯(lián)動數(shù)據(jù)（不帶“全部”選項(xiàng)）
provinceAndCityDataPlus是省市區(qū)三級聯(lián)動數(shù)據(jù)（帶“全部”選項(xiàng)）
regionDataPlus是省市區(qū)三級聯(lián)動數(shù)據(jù)（帶“全部”選項(xiàng)）
“全部"選項(xiàng)綁定的value是空字符串”"
CodeToText是個大對象，屬性是區(qū)域碼，屬性值是漢字用法例如：CodeToText[‘110000’]輸出北京市
extToCode是個大對象，屬性是漢字，屬性值是區(qū)域碼
用法例如：TextToCode[‘北京市’].code輸出110000,TextToCode[‘北京市’][‘市轄區(qū)’].code輸出110100,TextToCode[‘北京市’][‘市轄區(qū)’][‘朝陽區(qū)’].code輸出110105

3.案例

3.1 省市二級聯(lián)動（不帶“全部”選項(xiàng)）:

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

3.2 省市二級聯(lián)動（帶“全部”選項(xiàng)）:

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

3.3 省市三級聯(lián)動（不帶“全部”選項(xiàng)）:

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

3.4 省市三級聯(lián)動（帶“全部”選項(xiàng)）:

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

二、CodeToText的使用

把區(qū)域碼轉(zhuǎn)成漢字

getCodeToText(codeArray) {
      let area = "";
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            "/" +
            CodeToText[codeArray[1]] +
            "/" +
            CodeToText[codeArray[2]];
          break;
        default:
          break;
      }
      console.log(area);
    }

三、完整案例

<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,
        selectedOptions: []
      }
    },

    methods: {
      handleChange (value) {
        this.getCodeToText(value)
      },
      getCodeToText(codeArray) {
      let area = "";
      switch (codeArray.length) {
        case 1:
          area += CodeToText[codeArray[0]];
          break;
        case 2:
          area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
          break;
        case 3:
          area +=
            CodeToText[codeArray[0]] +
            "/" +
            CodeToText[codeArray[1]] +
            "/" +
            CodeToText[codeArray[2]];
          break;
        default:
          break;
      }
      console.log(area);
    }
    }
  }
</script>