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

安装城市数据

npm install element-china-area-data -S

导入数据

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

1. 显示全部城市

HTML代码：

<template #equipmentdistrict-form="">
    <el-cascader 
        placeholder="请选择地区" 
        size="default" 
        :options="options" 
        v-model="form.equipmentdistrict"
        @change="handleChange">
    </el-cascader>
</template>

JS代码：

export default {
    data () {
      return {
        options: regionData,
      }
    },
 
    methods: {
      handleChange () {
      var loc = "";
      // for (let i = 0; i < this.selectedOptions.length; i++) {
      //   loc += codeToText[this.selectedOptions[i]];
      // }

      // 将省市编码转换为中文，并拼接为字符串
      this.form.equipmentdistrict.map(function(item,index,self) {
        loc += codeToText[item.valueOf()];
      });

      this.form.equipmentdistrict = loc
      //打印区域码所对应的属性值即中文地址
      console.log(loc)
    }
}

2. 显示指定城市（比如只显示河北省，邯郸市）

提示：河北省编码"14"，邯郸市编码"1304"

HTML代码：

<template #equipmentdistrict-form="">
    <el-cascader 
        placeholder="请选择地区" 
        size="default" 
        :options="options" 
        v-model="form.equipmentdistrict"
        @change="handleChange">
    </el-cascader>
</template>

JS代码：

export default {
    data () {
      return {
        // 过滤省份为河北省
        options: regionData.filter(item => item.value == '13'),
      }
    },
    mounted() {
        // 过滤城市为邯郸市
        this.options[0].children = this.options[0].children.filter(item => item.value == '1304')
    },
    methods: {
      handleChange () {
      var loc = "";
      // for (let i = 0; i < this.selectedOptions.length; i++) {
      //   loc += codeToText[this.selectedOptions[i]];
      // }

      // 将省市编码转换为中文，并拼接为字符串
      this.form.equipmentdistrict.map(function(item,index,self) {
        loc += codeToText[item.valueOf()];
      });

      this.form.equipmentdistrict = loc
      //打印区域码所对应的属性值即中文地址
      console.log(loc)
    }
}