Vue+Element UI 实现省市区数据联动

最新推荐文章于 2024-07-18 09:36:19 发布

YoloAva

最新推荐文章于 2024-07-18 09:36:19 发布

阅读量566

点赞数

分类专栏： Vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/weixin_60463255/article/details/121150642

版权

Vue 专栏收录该内容

51 篇文章 1 订阅

订阅专栏

本文介绍了如何利用npm包element-china-area-data在Vue项目中实现省市区二级或三级联动效果。通过安装并引入数据，设置组件选项，结合CodeToText对象解析代码为文字，展示选定地址。

摘要由CSDN通过智能技术生成

1.安装

npm install element-china-area-data -S

2.在组件中使用（以省市二级数据联动为例）

<template>
    <div class="input">
        <p>地址</p>
        <el-cascader
        size="large"
        :options="addressData"
        v-model="selectedAddress"
        @change="getAddress"
        >
        </el-cascader>
    </div>
</template>

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

/*
provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
*/

data() {
    return {
      addressData: provinceAndCityData,
      selectedAddress: [],
    };
  }

//拿到选择的省与城市
methods: {
    getAddress(value) { //value是长度为2的装有被选择省、市代码的数组;CodeToText是个对象，键名为代码，键值为省和城市
      this.selectedAddress = [];
      for (let i = 0; i < value.length; i++) {
        let code = value[i];
        this.selectedAddress.push(CodeToText[code]);
      }
      console.log(this.selectedAddress); //["河北省","唐山市"]
    }
}