首页 > 其他分享 >vue 省市区三级联动插件

vue 省市区三级联动插件

时间:2024-04-24 16:25:20浏览次数:18  
标签:pcaTextArr 插件 vue 汉字 联动 省市区 三级

首先是官网地址

https://www.npmjs.com/package/element-china-area-data?activeTab=readme

其次是个人应用

vue部分

<el-cascader
          size="large"
          :options="options"
          v-model="selectedOptions">
      </el-cascader>

data部分

options: pcaTextArr, //省市区三级联动数据
      selectedOptions: [],

 

接下来是解释部分 建议使用 pcaTextArr ,直接获取文字,非常方便。不需要额外转码,简单又快捷

provinceAndCityData省市二级联动数据,汉字+code
regionData省市区三级联动数据
pcTextArr省市联动数据,纯汉字
pcaTextArr省市区联动数据,纯汉字
codeToText是个大对象,属性是区域码,属性值是汉字 用法例如:codeToText['110000']输出北京市

 

标签:pcaTextArr,插件,vue,汉字,联动,省市区,三级
From: https://www.cnblogs.com/majiayin/p/18155715

相关文章

  • Vue项目报错,点击浏览器报错信息定位不到报错代码,该如何优雅地调试代码?
    一、背景通过vue-cli服务运行项目,项目运行一切正常。但打包后,通过nginx部署运行,大屏展示模块报echartstypeError错误。但是点击浏览器报错信息,定位到的位置代码根本看不懂。经过一番寻找,发现打包时,webpack配置产生源码的属性为false。这样就会导致,打包后代码经过压缩加密,出现报......
  • vue3大屏适配
    1、定义初始化比例letstyle=ref({//定义默认比例width:1920,height:1080,transform:"scaleY(1)scaleX(1)translate(-50%,-50%)"})2、获取屏幕的宽高比列对象letgetScale=()=>{//获取屏幕的宽高比列constw=window.innerWidth/style.va......
  • [Vue3+Element-Plus]点击列表中的图片预览时,图片被表格覆盖
    preview-teleported="true" <el-table-columnprop="id"label="ID"width="80"align="center"sortable/><el-table-columnlabel="商品图片"width="85px"><template#default=&q......
  • Vue-cli 将px转化为rem适配移动端
    vue-cli2版本配置1.下载lib-flexible我使用的是vue-cli+webpack,所以是通过npm来安装的npmilib-flexible--save2.引入lib-flexible在main.js中引入lib-flexibleimport'lib-flexible/flexible'3.设置meta标签通过meta标签,设置设备宽度以及缩放比例<metaname="viewport......
  • vue tab切换滑动门
    <scriptsetuplang="ts">import{ref}from"vue";constselectName=ref('技术指标及标准')constnacigation=ref(['技术指标及标准','文献著作','报告模版','专家库/项目库',])</script><template&......
  • 浏览器插件安装
    1、elasticsearch-headchrome插件安装插件获取网址,下载整个项目压缩包,解压后将内容放入自定义命名为elasticsearch-head文件夹。接着点击Chrome右上角选项->工具->管理扩展(或则地址栏输入chrome://extensions/),选择打开“开发者模式”,让后点击“加载已解压得扩展程序”,选择elas......
  • IEAD添加插件生成UML图
    使用IDEA中生成UML(统一建模语言)一、准备环境在Ubuntu环境下进行配置使用,工具和插件在Windows环境下也有版本,需要的工具、插件都是相同的,同样安装配置即可。。IDEA社区版:因为免费。插件PlantUMLParser:生成".puml"文件。GrapHviz:通过puml文件生成UML图二、安装及配置安装Gra......
  • DataX二次开发详解-Kingbasees86Reader、Kingbasees86Writer插件
     一、前提国产数据库的崛起元年,不得不提人大金仓(Kingbase)、南大通用数据库(Gbase)、达梦数据库(DM)、华为数据库(GaussDB)、阿里数据库(Oceanbase)等,此文章介绍采用datax作为同步人大金仓Kingbase86数据库的工具。目前github上的datax版本功能仅支持Kingbase82系列产品。而项目上如果要......
  • Keepass安装使用方法(包含浏览器插件使用方法)
    相关后续阅读:Keepass调用Xshell、SecureCRT、RDP、Putty的方法(一劳永逸版)安装方法:1、安装KeePass-2.56-Setup.exe,选择语言——English2、一路默认后,安装到默认路径:C:\ProgramFiles\KeePassPasswordSafe23、将语言包Chinese_Simplified.lngx解压拷贝到C:\ProgramFiles\Ke......
  • 前端在浏览器显示摄像头传回的RTSP视频流,前端采用的技术有VUE+video.js+flv.js
    在前端使用Vue.js框架,结合video.js和flv.js播放RTSP视频流,需要经过一系列步骤,因为浏览器并不能直接播放RTSP流,所以通常需要一个服务器来将RTSP流转为HLS或FLV格式,然后前端再通过flv.js播放。以下是一个基于此思路的基本实现指南:确保你已经安装了Vue.js、video.js、flv.js相关的依......