vue3 使用 element-china-area-data 实现地区选择器
官方地址:https://www.npmjs.com/package/element-china-area-data?activeTab=readme
在线示例:https://plortinus.github.io/element-china-area-data/index.html
实际使用
<el-col :span="12"><el-form-item label="所处城市" prop="address"><el-cascaderv-model="temp.address":options="pcaTextArr()"/></el-form-item></el-col>import { pcaTextArr } from 'element-china-area-data'pcaTextArr() {return pcaTextArr},
安装
npm install element-china-area-data -S
import 使用
我引用的是v6版本,组件有改动
import {provinceAndCityData,pcTextArr,regionData,pcaTextArr,codeToText,
} from "element-china-area-data";
provinceAndCityData省市二级联动数据,汉字+code
regionData省市区三级联动数据
pcTextArr省市联动数据,纯汉字
pcaTextArr省市区联动数据,纯汉字
codeToText是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText[‘110000’]输出北京市
省市二级联动:
<template><div id="app"><el-cascadersize="large":options="provinceAndCityData"v-model="selectedOptions"></el-cascader></div>
</template><script>import { provinceAndCityData } from 'element-china-area-data'export default {data () {return {provinceAndCityData,selectedOptions: []}},}
</script>
省市二级联动,纯汉字:
<template><div id="app"><el-cascadersize="large":options="pcTextArr"v-model="selectedOptions"></el-cascader></div>
</template><script>import { pcTextArr } from 'element-china-area-data'export default {data () {return {pcTextArr,selectedOptions: []}},}
</script>
省市区三级联动
<template><div id="app"><el-cascadersize="large":options="regionData"v-model="selectedOptions"></el-cascader></div>
</template><script>import { regionData } from 'element-china-area-data'export default {data () {return {regionData,selectedOptions: []}},}
</script>
省市区三级联动,纯汉字
<template><div id="app"><el-cascadersize="large":options="pcaTextArr"v-model="selectedOptions"></el-cascader></div>
</template><script>import { pcaTextArr } from 'element-china-area-data'export default {data () {return {pcaTextArr,selectedOptions: []}},}
</script>
相关文章:
vue3 使用 element-china-area-data 实现地区选择器
官方地址:https://www.npmjs.com/package/element-china-area-data?activeTabreadme 在线示例:https://plortinus.github.io/element-china-area-data/index.html 实际使用 <el-col :span"12"><el-form-item label"所处城市&…...
STM32自带的DSP库的滤波初体验(一)
最近在弄STM32自带的DSP库里的滤波,记录一下: arm_fir_instance_q15 instance_q15_S; #define NUM_TAPS 16 //滤波系数的个数 #define BLOCK_SIZE 32 q15_t firStateF32[BLOCK_SIZE NUM_TAPS]; q15_t Fir_Coeff[NUM_TAPS] {-79, -136, 312, 6…...
go kratos protobuf 接收动态JSON数据
前言 google.protobuf.Struct 是 Google Protocol Buffers 中的一种特殊类型,用于表示动态的键值对数据。它可以存储任意类型的数据,并提供了方便的方法来访问和操作这些数据。 Struct 类型通常用于在不事先知道数据结构的情况下传递和处理配置、参数或其…...
Python学习笔记第五十四天(Pandas DataFrame)
Python学习笔记第五十四天 Pandas 数据结构 - DataFrame使用列表创建使用 ndarrays 创建使用字典创建返回多行数 后记 Pandas 数据结构 - DataFrame DataFrame 是一个表格型的数据结构,它含有一组有序的列,每列可以是不同的值类型(数值、字符…...
Docker镜像查看下载删除镜像文件的相关命令
1.镜像相关命令 本地查看有哪些镜像文件: docker images镜像的名称就是我们常见的一些软件,镜像相当于把软件和软件所需要的运行环境打包到一个镜像文件里面,将来在通过这个镜像文件创建出对应的容器,容器有了以后这些软件自动的…...
1. VisionOS平台介绍
介绍 VisionOS 可实现与现实世界无缝集成并与其他虚拟内容共存的 3D 多任务体验。这为个人生产力、生活方式和娱乐应用打开了一个充满新可能性的世界,并为开发人员打开了一个全新的市场。然而,它也带来了围绕多任务处理和与身体互动的新挑战。Unity Poly…...
【C#】设置有线网卡IP地址,子网掩码,网关,DNS
方法 public partial class ComputerInfo{/// <summary>/// 设置IP地址,子网掩码,网关,DNS/// </summary>public static List<NetworkAdapterInfo> SetIpAddressSubMaskDnsGeteway(string ipAddress, string subMask, stri…...
LVS-DR集群及NGINX负载均衡
LVS-DR集群 原理: 1. 当用户向负载均衡调度器(Director Server)发起请求,调度器将请求发往至内核空间 2. PREROUTING链首先会接收到用户请求,判断目标IP确定是本机IP,将数据包发往INPUT链 3. IPVS是工作在…...
React如何配置env环境变量
React版本: "react": "^18.2.0" 1、在package.json平级目录下创建.env文件 2、在‘.env’文件里配置环境变量 【1】PUBLIC_URL 描述:编译时文件的base-href 官方描述: // We use PUBLIC_URL environment variable …...
VR全景智慧文旅,用科技助力旅游业振兴
引言: 近年来,科技的迅猛发展将我们带入一个全新的数字化时代,而虚拟现实(Virtual Reality,简称VR)技术则以其令人惊叹的全新方式,影响着各个领域。其中,旅游业作为人们探索世界、体…...
系统架构设计专业技能 · 系统安全分析与设计(四)【加解密、数字信封、信息摘要、数字签名、数字书证、网络安全、信息安全】
系列文章目录 系统架构设计专业技能 网络规划与设计(三)【系统架构设计师】 系统架构设计专业技能 系统安全分析与设计(四)【系统架构设计师】 系统架构设计高级技能 软件架构设计(一)【系统架构设计师…...
基于WebSocket的在线文字聊天室
与Ajax不同,WebSocket可以使服务端主动向客户发送响应,本案例就是基于WebSocket的一个在线聊天室,不过功能比较简单,只能满足文字交流。演示如下。 案例学习于b站up主,链接 。这位up主讲的非常清楚,值得去学…...
VS Code中C++程序的调试(Debug)功能
有一个.vscode文件,存放当前工作区相关配置文件的目录。 launch.json {"version": "0.2.0","configurations": [{"name": "gcc.exe - 生成和调试活动文件", // 该调试任务的名字,启动调试时会在待…...
C#四个字节十六进制与单精度浮点数互转
C#四个字节十六进制与单精度浮点数互转可以使用自带的函数,也可以自己写 实例如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace floatDemo {class Program{//首先设置:项目->属性…...
Springloc和aop的基础概念
什么是控制反转和依赖注入? 控制反转(IoC)和依赖注入(DI)是软件开发中常用的编程范式, 它们极大地提高了代码可维护性和可复用性,简化了代码结构。 什么是控制反转(IoC) 控制反转是- - 种编程模式,它将应用程序中的控制权转移到…...
算法练习Day43|● 518. 零钱兑换 II ● 377. 组合总和 Ⅳ
LeetCode:518. 零钱兑换 II 518. 零钱兑换 II - 力扣(LeetCode) 1.思路 求组合数,先遍历物品再遍历背包,dp[]数组累加即可。 2.代码实现 1class Solution {2 public int change(int amount, int[] coins) {34 int[…...
人类:我觉得1+1=956446,你觉得呢?大模型:啊对对对
大模型太「听话」了怎么办? 大型语言模型(LLM)的自然语言理解与生成能力一直备受称赞,特别是 ChatGPT 等对话式语言模型能够与人类流畅、自然地进行多轮对话。然而,最近一篇 Google DeepMind 的论文研究发现 LLM 普遍存…...
Offset Explorer
Offset Explorer 简介下载安装 简介 Offset Explorer(以前称为Kafka Tool)是一个用于管理和使Apache Kafka 集群的GUI应用程序。它提供了一个直观的UI,允许人们快速查看Kafka集群中的对象以及存储在集群主题中的消息。它包含面向开发人员和管…...
查看CentOS版本及系统位数与设置CentOS 7.9 2009 防火墙配置放开端口的命令与过程
一、查看CentOS版本及系统位数 1.1 命令汇总 //1、安装redhat-lsb yum install -y redhat-lsb//2、查看系统版本信息 lsb_release -a //3、查看系统位数 getconf LONG_BIT1.2 截图 二、设置CentOS7.9 2009 防火墙配置放开端口 2.1 命令汇总 //禁止防火墙开机启动。这种方法方…...
前端css高级
day08-CSS高级 目标:掌握定位的作用及特点;掌握 CSS 高级技巧 01-定位 作用:灵活的改变盒子在网页中的位置 实现: 1.定位模式:position 2.边偏移:设置盒子的位置 leftrighttopbottom 相对定位 posit…...
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装(Encapsulation) 定义:将数据(属性)和操作数据的方法绑定在一起,通过访问控制符(private、protected、public)隐藏内部实现细节。示例: public …...
基于Uniapp开发HarmonyOS 5.0旅游应用技术实践
一、技术选型背景 1.跨平台优势 Uniapp采用Vue.js框架,支持"一次开发,多端部署",可同步生成HarmonyOS、iOS、Android等多平台应用。 2.鸿蒙特性融合 HarmonyOS 5.0的分布式能力与原子化服务,为旅游应用带来…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具,可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件,也不需要在线上传文件,保护您的隐私。 工具截图 主要特点 🚀 快速转换:本地转换,无需等待上…...
脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)
一、OpenBCI_GUI 项目概述 (一)项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台,其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言,首次接触 OpenBCI 设备时,往…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
Axure 下拉框联动
实现选省、选完省之后选对应省份下的市区...
32单片机——基本定时器
STM32F103有众多的定时器,其中包括2个基本定时器(TIM6和TIM7)、4个通用定时器(TIM2~TIM5)、2个高级控制定时器(TIM1和TIM8),这些定时器彼此完全独立,不共享任何资源 1、定…...
基于单片机的宠物屋智能系统设计与实现(论文+源码)
本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢,连接红外测温传感器,可实时精准捕捉宠物体温变化,以便及时发现健康异常;水位检测传感器时刻监测饮用水余量,防止宠物…...
【免费数据】2005-2019年我国272个地级市的旅游竞争力多指标数据(33个指标)
旅游业是一个城市的重要产业构成。旅游竞争力是一个城市竞争力的重要构成部分。一个城市的旅游竞争力反映了其在旅游市场竞争中的比较优势。 今日我们分享的是2005-2019年我国272个地级市的旅游竞争力多指标数据!该数据集源自2025年4月发表于《地理学报》的论文成果…...
ThreadLocal 源码
ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物,因为每个访问一个线程局部变量的线程(通过其 get 或 set 方法)都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段,这些类希望将…...
