vue3 地区选择器

最新推荐文章于 2025-06-05 09:43:30 发布

原创最新推荐文章于 2025-06-05 09:43:30 发布 · 446 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #vue.js

1.安装element-plus

npm install element-plus --save

2.在main.ts引入注册

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
 
const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

3.安装省市区数据

npm install element-china-area-data -S

4.使用

<template>
  <el-cascader
    v-model="selectedArea"
    :options="regionOptions "
    @change="handleRegionChange "
    placeholder="请选择省市区"
  ></el-cascader>
</template>

<script>
import { ref } imoport 'vue'

// regionData省市区，provinceAndCityData省市
import { provinceAndCityData, regionData } from 'element-china-area-data';
const regionOptions = ref(regionData);

const selectedArea = ref([])

const handleRegionChange = (value: any) => {
  console.log('Selected Region Codes:', value);
};

</script>