vue-cli+elementUI实现三级城市联动

最新推荐文章于 2025-01-07 14:49:20 发布

码上暴富

最新推荐文章于 2025-01-07 14:49:20 发布

阅读量224

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue小功能案例

本文链接：https://blog.youkuaiyun.com/weixin_53483257/article/details/118991341

vue小功能案例专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中利用element-china-area-data库实现三级城市联动选择器，包括安装步骤、数据导入、组件引用及方法使用，适合前端开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-cli+elementUI实现三级城市联动

三级城市联动

三级城市联动

安装

以下教程参考自官方的教程：
https://www.npmjs.com/package/element-china-area-data

导入

执行以下语句安装城市数据：
npm install element-china-area-data -S

引用

以vue-cli创建的项目为例，在vue文件中的scrit标签内导入数据：
import { regionData, CodeToText } from “element-china-area-data”;

使用

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

<script>
import { regionData, CodeToText } from "element-china-area-data";

export default {
  name: "app",
  data() {
    return {
      options: regionData,
      selectedOptions: []
    };
  },

  methods: {
    handleChange() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      alert(loc);
    }
  }
};
</script>