vue+elementUi中国省市区/省市，三级/两级联动选择

安装城市数据：

终端输入：

npm install element-china-area-data -S

省市不带‘全部’的二级联动：

1. 导入二级数据：

//二选一
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
import { provinceAndCityData } from 'element-china-area-data'

2. HTMl:

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>

3. js：

export default {
    data () {
      return {
        options: provinceAndCityData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange () {
        var loc = "";
        for (let i = 0; i < this.selectedOptions.length; i++) {
            loc += CodeToText[this.selectedOptions[i]];
        }
        console.log(loc)//打印区域码所对应的属性值即中文地址
      }
    }
     //也可以这样写
    handleChange (value) {
        console.log(value)
      }
  }

4. 效果预览：
   

省市带‘全部’的二级联动：

1. 导入二级数据：

import { provinceAndCityDataPlus } from 'element-china-area-data'

2. HTMl:

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>

3. js：

export default {
    data () {
      return {
        options: provinceAndCityDataPlus ,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange () {
        var location = "";
        for (let i = 0; i < this.selectedOptions.length; i++) {
            location+= CodeToText[this.selectedOptions[i]];
        }
        console.log(location)//打印区域码所对应的属性值即中文地址
      }
    }
    //也可以这样写
    handleChange (value) {
        console.log(value)
      }
  }

4. 效果预览:
   

省市区不带‘全部’三级联动选择：

1. 导入三级数据：

import { regionData } from 'element-china-area-data'

2. HTMl:

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>

3. js：

export default {
    data () {
      return {
        options: regionData ,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange () {
        var loc = "";
        for (let i = 0; i < this.selectedOptions.length; i++) {
            loc += CodeToText[this.selectedOptions[i]];
        }
        console.log(loc)//打印区域码所对应的属性值即中文地址
      }
    }
     //也可以这样写
    handleChange (value) {
        console.log(value)
      }
  }

4. 效果预览：
   

省市区带‘全部’三级联动选择：

1. 导入三级数据：

import { regionDataPlus } from 'element-china-area-data'

2. HTMl:

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>

3. js：

export default {
    data () {
      return {
        options: regionDataPlus ,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange () {
        var loc = "";
        for (let i = 0; i < this.selectedOptions.length; i++) {
            loc += CodeToText[this.selectedOptions[i]];
        }
        console.log(loc)//打印区域码所对应的属性值即中文地址
      }
    }
     //也可以这样写
    handleChange (value) {
        console.log(value)
      }
  }

4. 效果预览：