vue实现全国省市下拉联动菜单，适用于收货地址

兰亭古墨

于 2019-01-12 15:54:17 发布

阅读量7.1k

点赞数 8

分类专栏： JavaScript 文章标签：级联选择器收货地址全国省市 vue

本文链接：https://blog.csdn.net/hefeng6500/article/details/86363170

版权

JavaScript 专栏收录该内容

83 篇文章

订阅专栏

本文介绍如何使用ElementUI的Cascader组件结合中国行政区划数据实现地区选择功能。通过JSON数据加载全国各地区信息，展示级联选择器的使用方法及效果。

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

首先上效果图

基于ElementUI的 “Cascader 级联选择器”组件；

全国各地区行政区划JSON数据；（https://github.com/modood/Administrative-divisions-of-China）

<template>
  <div>
    <el-cascader :options="options" v-model="selectedOptions" @change="handleChange"></el-cascader>
  </div>
</template>
<script>
let pcas = require("./pcas/pcas-code.json")
export default {
  data(){
    return {
      options: pcas,
      selectedOptions: []
    }
  },
  mounted(){
  },
  methods: {
    handleChange(value){
      console.log(value)
    }
  }
};
</script>
<style lang="scss">
</style>