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

安装城市数据

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(value){
      console.log('value',value)
    },
    // handleChange () {
    //   var loc = "";
    //   // for (let i = 0; i < this.selectedOptions.length; i++) {
    //   //   loc += codeToText[this.selectedOptions[i]];
    //   // }
    //
    //   console.log(this.form.equipmentdistrict)
    //
    //   // 将省市编码转换为中文，并拼接为字符串
    //   this.form.equipmentdistrict.map(function(item,index,self) {
    //     loc += codeToText[item.valueOf()];
    //   });
    //
    //   this.form.equipmentdistrict = loc
    //   console.log(this.form.equipmentdistrict)
    //   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(value){
      console.log('value',value)
    },
    // handleChange () {
    //   var loc = "";
    //   // for (let i = 0; i < this.selectedOptions.length; i++) {
    //   //   loc += codeToText[this.selectedOptions[i]];
    //   // }
    //
    //   console.log(this.form.equipmentdistrict)
    //
    //   // 将省市编码转换为中文，并拼接为字符串
    //   this.form.equipmentdistrict.map(function(item,index,self) {
    //     loc += codeToText[item.valueOf()];
    //   });
    //
    //   this.form.equipmentdistrict = loc
    //   console.log(this.form.equipmentdistrict)
    //   console.log(loc)
    // },
　　}
}