Vue的省份联动

一、安装依赖库

npm install element-china-area-data -S




npm install element-ui --save

全局使用elemntui组件库
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

二 、代码如下

<template>
  <div>
    <el-cascader size="large" :options="options" v-model="provinces" @change="handleChange" placeholder="请选择省市区"></el-cascader>
    <div>所选省市区: {{ selectedRegion }}</div>
    <el-button type="primary" @click="fillInAddress">回填地址</el-button>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data"; // 引入

export default {
  data() {
    return {
      options: regionData,
      provinces: [],
      selectedRegion: '' // 用于显示选中的省市区中文
    };
  },

  methods: {
    handleChange(value) {
      const text = this.findTextByValue(value); // 调用方法查找选中的省市区的中文文本
      this.selectedRegion = text;
    },

    // 根据选中的省市区代码查找对应的中文文本
    findTextByValue(value) {
      let text = '';
      let data = regionData;
      for (let i = 0; i < value.length; i++) {
        const val = value[i];
        const item = data.find(item => item.value === val);
        if (item) {
          text += item.label;
          if (i !== value.length - 1) {
            text += ' / ';
            data = item.children || [];
          }
        }
      }
      return text;
    },

    // 将从数据库查询出来的地址回填到省份联动选择器中
    fillInAddress() {
      // 假设从数据库查询出来的地址是一个包含省、市、区的地址字符串
      const address = "广东省 深圳市 南山区";
      const addressArray = address.split(' ');
      const valueArray = [];
      let tempOptions = regionData;
      for (let i = 0; i < addressArray.length; i++) {
        const addressItem = addressArray[i];
        const item = tempOptions.find(item => item.label === addressItem);
        if (item) {
          valueArray.push(item.value);
          tempOptions = item.children || [];
        }
      }
      this.provinces = valueArray;
    }
  }
};
</script>

效果图