封装一个省市区公共组件

难点:封装一个省市区三级联动的公共组件,难点在与对三级嵌套数据的处理,其中三级嵌套数据来源于github上的Administrative-divisions-of-china

javascript 复制代码
<template>
	<el-select v-model="province" class="m-2" placeholder="请选择省份" size="small">
	  <el-option
		v-for="item in areas"
		:key="item.code"
		:label="item.name"
		:value="item.code"
	  />
	</el-select>
	<el-select v-model="city" :disabled="!province" class="m-2" placeholder="请选择市" size="small">
	  <el-option
		v-for="item in selectCitys"
		:key="item.code"
		:label="item.name"
		:value="item.code"
	  />
	</el-select>
	<el-select v-model="area" :disabled="!city" class="m-2" placeholder="请选择区" size="small">
	  <el-option
		v-for="item in selectAreas"
		:key="item.code"
		:label="item.name"
		:value="item.code"
	  />
	</el-select>
  </template>
  
  <script setup>
  import { ref, watch, defineEmits } from 'vue'
  import allAreas from './lib/pca-code.json'
  
  const areas = ref(allAreas)
  const selectCitys = ref([])
  const selectAreas = ref([])
  const province = ref('')
  const city = ref('')
  const area = ref('')
  const emit = defineEmits(['change'])

  watch(province,async (value) => {
	if(value) {
		let citys = areas.value.find(item => 
			item.code===province.value
		)?.children
		selectCitys.value = citys
		city.value = ''
		area.value = ''
	}else{
		return
	}
  })
  
  watch(city,async (value) => {
	if(value) {
		let areas = selectCitys.value.find(item => 
			item.code===city.value
		)?.children
		selectAreas.value = areas
		area.value = ''
	}else{
		return
	}
  })

  watch(area,async (value) => {
	if(value) {
		let provinceData = {
			code: province.value,
			name: areas.value.find(item => item.code===province.value)?.name,
		}
		let cityData = {
			code: city.value,
			name: selectCitys.value.find(item => item.code===city.value)?.name,
		}
		let areaData = {
			code: area.value,
			name: selectAreas.value.find(item => item.code===area.value)?.name
		}
		emit('change',{
			provinceData,
			cityData,
			areaData
		})
	}
  })


  </script>
  
相关推荐
虾球xz19 分钟前
CppCon 2018 学习:EFFECTIVE REPLACEMENT OF DYNAMIC POLYMORPHISM WITH std::variant
开发语言·c++·学习
夏梦春蝉20 分钟前
ES6从入门到精通:常用知识点
前端·javascript·es6
Allen_LVyingbo24 分钟前
Python常用医疗AI库以及案例解析(2025年版、上)
开发语言·人工智能·python·学习·健康医疗
小哈龙28 分钟前
裸仓库 + Git Bash 搭建 本地 Git 服务端与客户端
开发语言·git·bash
我想说一句29 分钟前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
南屿im37 分钟前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript
杨进军38 分钟前
前端线上问题的那些事儿
前端·javascript·前端框架
每天开心40 分钟前
深入探索 React Hooks: useState 与 useEffect 的力量 🌟
前端·javascript·ai编程
G探险者1 小时前
《如何在 Spring 中实现 MQ 消息的自动重连:监听与发送双通道策略》
java·开发语言·rpc
卸任1 小时前
性能优化大作战:React.memo 在可编辑列表中的奇效
前端·javascript·react.js