ElementUi省市区三级联动

最新推荐文章于 2024-04-29 02:48:18 发布

zhangli0421

最新推荐文章于 2024-04-29 02:48:18 发布

阅读量251

点赞数

CC 4.0 BY-SA版权

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/zhangli0421/article/details/121267505

该博客展示了如何在Vue项目中利用element-china-area-data库来创建一个大型的地区级联选择组件。代码示例中，通过`<el-cascader>`元素结合`regionData`数据，实现了省份到城市的级联选择，并在选中值改变时打印输出选中值。在`created`钩子中，作者还打印了完整的区域数据，用于验证数据加载。

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

首先下载一下依赖，接下来直接复制代码。哈哈

npm install element-china-area-data -S

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
	created(){
		console.log(regionData);
	},
    methods: {
      handleChange (value) {
        console.log(value)
		
      }
    }
  }
</script>