位置: IT常识 - 正文

中国省市区地区选择组件(ElementPlus + Vue3 + TS )(中国各省市区域划分)

编辑:rootadmin
中国省市区地区选择组件(ElementPlus + Vue3 + TS ) 中国省市区地区选择组件(ElementPlus + Vue3 + TS )安装npm install element-china-area-data -S介绍1.引用import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-dat2.用法

推荐整理分享中国省市区地区选择组件(ElementPlus + Vue3 + TS )(中国各省市区域划分),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:中国省份及市区,中国省份及市区,中国省份及市区,中国省市区地区划分,中国省市区地区地图,中国省市区地区划分,中国省市区地区划分,中国省市区地区划分,内容如对您有帮助,希望把文章链接给更多的朋友!

中国省市区地区选择组件(ElementPlus + Vue3 + TS )(中国各省市区域划分)

provinceAndCityData:省市数据(不带“全部”选项) regionData:省市区数据(不带“全部”选项) provinceAndCityDataPlus:省市区数据(带“全部”选项) regionDataPlus:省市区数据(带“全部”选项) CodeToText:例如:CodeToText[‘110000’]输出北京市 TextToCode:例如:TextToCode[‘北京市’].code输出110000

代码<template> <div class="areabox"> <el-select v-model="address.province" placeholder="请选择省" :style="{ width: `${prop.width}px`, marginRight: `${prop.gap}px` }" @change="handleProvinceSelect"> <el-option v-for="item in regionData" :label="item.label" :value="item.value" /> </el-select> <el-select v-model="address.city" placeholder="请选择市" :disabled="!address.province || cityList.length == 0" :style="{ width: `${prop.width}px`, marginRight: `${prop.gap}px` }" @change="handleCitySelect"> <el-option v-for="item in cityList" :label="item.label" :value="item.value" /> </el-select> <el-select v-model="address.area" placeholder="请选择区" :style="{ width: `${prop.width}px` }" :disabled="!address.province || !address.city || areaList.length == 0" @change="handleAreaSelect"> <el-option v-for="item in areaList" :label="item.label" :value="item.value" /> </el-select> </div></template><script lang="ts" setup>import { reactive, computed, ComputedRef } from 'vue'import { regionData, CodeToText } from 'element-china-area-data'const prop = withDefaults( defineProps<{ gap: string | number //选择框中间间隙 width: string | number //选择框宽度 }>(), { gap: '8', width: '210' })//抛出地址const emit = defineEmits<{ (e: 'getAddress', data: { code: string[] //区域码 name: string[] //汉字 isComplete: boolean //是否选择完整,方便校验 }): void}>()let address = reactive<{ province: string city: string area: string}>({ province: '', city: '', area: ''})interface AreaList { value: string label: string children?: AreaList[]}//切换省份函数const handleProvinceSelect = () => { address.city = '' address.area = '' emit('getAddress', { code: [address.province], //区域码 name: [CodeToText[address.province]], //汉字 isComplete: false })}//切换城市函数const handleCitySelect = () => { address.area = '' emit('getAddress', { code: [address.province, address.city], //区域码 name: [CodeToText[address.province], CodeToText[address.city]], //汉字 isComplete: areaList.value.length == 0 ? true : false })}//切换地区函数const handleAreaSelect = () => { emit('getAddress', { code: [address.province, address.city, address.area], //区域码 name: [CodeToText[address.province], CodeToText[address.city], CodeToText[address.area]], //汉字 isComplete: true })}//二级城市列表const cityList: ComputedRef<AreaList[]> = computed((): AreaList[] => { if (!address.province) { return [] } let temp = regionData.find((item: any) => { return item.value == address.province }) return temp.children ? temp.children : []})//三级地区列表const areaList: ComputedRef<AreaList[]> = computed((): AreaList[] => { if (!address.province || !address.city) { return [] } if (cityList.value.length == 0) { return [] } else { let temp = cityList.value.find((item: any) => { return item.value == address.city }) if (temp) { return temp.children ? temp.children : [] } else { return [] } }})</script><style scoped>.areabox { display: flex; align-items: center;}</style>效果图

1.项目需要这种三个下拉选择框

2.选择地址

表单校验//这里只展示地址选择部分import type { FormRules } from 'element-plus'export const FJRrules = reactive<FormRules>({ adress:[ {required: true,validator: addressValidator , trigger: 'change' } ],})const addressValidator = (rule: any, value: any, callback: any) => { if (!value) { //没有选择的情况 return callback(new Error('请选择省/市/区')) } setTimeout(() => { if (!value.isComplete) { //没有选择完整 callback(new Error('请完善地址')) } else { callback() } }, 100)}<template><el-form ref="FJRformRef" inline :model="FJRForm" label-width="120px" :rules="FJRrules"><el-form-item prop="adress" label="省/市/区" required> <area-selected @get-address="handleGetAdress"></area-selected> </el-form-item></el-form></template><script lang="ts" setup>import { FJRrules } from '这里是校验ts文件的地址';const FJRForm = reactive({adress:null,})//接收省市区地址选择组件函数const handleGetAdress = (data:any)=>{ FJRForm.adress = data}</script>
本文链接地址:https://www.jiuchutong.com/zhishi/283457.html 转载请保留说明!

上一篇:Win11 Dev 预览版 22483更新发布推送(附完整更新内容)(win10dev预览版)

下一篇:mtask.exe - mtask是什么进程 有什么用

  • 季度报税是哪几个月几号申报
  • 消费税的税目有多少
  • 税控盘当月不抵扣怎么申报
  • 成本占收入比重分析
  • 申报个人所得税会计分录
  • 营业费用率说明什么
  • 支付技术转让费能加计扣除
  • 材料入库时实收什么意思
  • 企业收到票据背书转让给其他公司怎么做会计处理?
  • 扣除工资作为违约金
  • 股东债权转资本公积利和弊
  • 微信交电费怎么退款
  • 国税注销了地税没注销现在经营异常
  • 工资表中有哪些项目
  • etc发票一直不出来
  • 水电费没有发票怎么报销
  • 政府土地出让金返还
  • 公司所得税汇算清缴退税流程
  • 上市公司企业股东转让股份交什么税费
  • 生产成本中材料款年末要全部结转吗
  • 固定资产折旧率是多少
  • 异地 发票
  • 附加税包括哪些税种2021年
  • Win11 Dev Build 22000.65开发预览版推送(附更新修复已知问题汇总)
  • windos10不显示桌面
  • 周转房维修请示
  • 所得税汇算清缴退税会计分录怎么做
  • 戴尔电脑设置u盘
  • win10高级功能
  • 用应付票据付应收账款
  • 小规模纳税人税控设备可以抵扣吗设备
  • wwwxxx域名选择(www.xxx.com或者.cn)
  • 在linux中使用什么命令可以动态查看文件内容
  • win7无法记忆文件保存路径
  • 微信php开发包
  • 基于深度学习的自动调制识别(含代码链接)
  • 中秋快乐的祝福语怎么说
  • yii2框架和fastadmin建商城网站哪个好用
  • 一次性伤残就业补助金
  • 银行手续费必须有发票才能入账吗
  • 电子承兑接收了,但是后来怎么没有了
  • python多进程间通信
  • SQL Server 2005 Management Studio Express企业管理器将英文变成简体中文版的实现方法
  • 子公司减资是利好还是利空
  • 结转在建工程的会计分录
  • 小规模纳税人差额征税
  • 企业所得税余额为负数
  • 个体户是什么样的
  • 异地车辆登记证书怎么补办
  • 其他收益和其他综合收益属于什么科目
  • 漏缴增值税处罚规定
  • 财产清查怎么做分录
  • 免税企业开了含税吗
  • 处置全资子公司合并报表
  • 完工结转的会计分录
  • etc发票当天可以打印吗
  • 关于园林绿化经济的论文
  • 所得税费用怎么计提
  • 不动产经营租赁属于什么服务
  • bat windows
  • 微软补丁修复时出现蓝屏现象
  • executor进程
  • win7用户账户控制设置电脑重启后恢复
  • mac安全设置在哪里
  • 台式装win7
  • 为什么调用不了函数
  • 火狐浏览器自定义滚动条
  • js选择框全选
  • Linux CentOS系统下安装node.js与express的方法
  • 基于javascript的毕业设计选题
  • MATLAB图像处理实例详解
  • linux使用文本编辑器
  • JavaScript replace(rgExp,fn)正则替换的用法
  • jquery java
  • javascript获取html元素的方法
  • jQuery插件封装时如要实现链式编程,需要
  • 河南税务局官网手机版
  • 青海国税局领导班子
  • 税务局无编制人员工资
  • 国税局招录条件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设