Vue+elementUI实现省市区三级联动select

最新推荐文章于 2025-09-22 17:12:46 发布

原创最新推荐文章于 2025-09-22 17:12:46 发布 · 4.9k 阅读

26 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文记录了如何在Vue项目中使用ElementUI实现省市区三级联动的select组件。通过安装`element-china-area-data`库，引入区域数据，并在Vue组件中配置`el-cascader`，轻松完成联动效果。在变更选择时，数据会自动更新并打印到控制台。

今天实现了省市区三级联动select，网上有很多乱糟糟的教程，其实很简单，这里做一下简单记录
使用elementUI数据

1、获取elementUI的省市区级联数据

npm install element-china-area-data -S

2、引入数据

import { regionData } from 'element-china-area-data'

3、在vue页面中使用

<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: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>