jeecgboot vue3使用JAreaSelect地区选择组件时返回省市区的编码,如何获取到选择地区的文字

news2024/11/27 1:43:45

JAreaSelect文档地址:添加链接描述

当我们的BasicForm表单组件中使用选择省市区的JAreaSelect组件时,获取到的返回值是地区的编码,如“530304”这样子,但我在小程序中展示数据的时候需要明确的地址,如“云南省昆明市五华区”,我们可以在前端原有的工具类中添加转换方法来实现。

1、看组件代码
首先用一个JSON文件来存储所有的省市区数据,然后用3个下拉款选择省市区,数据转换是在一个areaDataUtil.js文件中来实现的。

JSON文件:86是所有的省,然后是各个市以及县区
在这里插入图片描述
省市区选择组件:
在这里插入图片描述
工具类areaDataUtil.js
在这里插入图片描述

2、在我的程序中,表单提交时获取到了值,通过地区的code值转换为文字值
在这里插入图片描述

在这里插入图片描述
getTextByCode方法直接加在了areaDataUtil.js方法中:

function getTextByCode(code) {
  //6位的编码
  let proCode = code.substr(0,2).concat("0000");
  let protext = provinceObject[proCode];

  let shiCode = code.substr(0,4).concat("00");
  let shiData =   REGION_DATA[proCode];
  let shitext = shiData[shiCode]

  let quCode = code;
  let quData = REGION_DATA[shiCode];
  let qutext = quData[quCode]

  return protext+shitext+qutext; // 省份汉字
}

其实记录主要的不是为了这个方法,这方法也很简单,而是想要记住省市区数据的JSON数据和工具类,以后在我需要用到这些数据的时候可以看到自己的这个文章然后找到这个数据来直接使用哈哈哈哈哈。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1182491.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

WordPress主题 JustNews主题6.0.1(亲测首页不空白)

介绍 资源入口 需要用WordPress5.X版本 JustNews介绍:一款专为博客、自媒体、资讯类的网站设计开发的WordPress主题,自v3.0版开始支持自主研发的前端用户中心,不仅支持注册、登录、账户设置、个人中心等常用页面的添加,还可以上传…

wandb报错Network error (ProxyError), entering retry loop

解决方案:改成离线模式 import os import wandb os.environ[“WANDB_API_KEY”] ‘KEY’ os.environ[“WANDB_MODE”] “offline” 原因: 使用wandb在线模式运行代码,服务器是一边运行我们的代码一边向wandb官网上传我们的数据&#xff0…

如何使用Pyarmor保护你的Python脚本

目录 一、Pyarmor简介 二、使用Pyarmor保护Python脚本 1、安装Pyarmor 2、创建Pyarmor项目 3、添加Python脚本 4、配置执行环境 5、生成保护后的脚本 三、注意事项与未来发展 四、未来发展 五、总结 本文深入探讨了如何使用Pyarmor工具保护Python脚本。Pyarmor是一个…

Python和BeautifulSoup库的魔力:解析TikTok视频页面

概述 短视频平台如TikTok已成为信息传播和电商推广的重要渠道。用户通过短视频分享生活、创作内容,吸引了数以亿计的观众,为企业和创作者提供了广阔的市场和宣传机会。然而,要深入了解TikTok上的视频内容以及用户互动情况,需要借…

SpringSecurity6 | 委派筛选器代理和过滤器链代理

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: Java从入门到精通 ✨特色专栏&#xf…

世微 AP2400 宽电压降压恒流驱动IC 过EMC认证线路方案

产品描述 AP2400 是一款 PWM 工作模式,外围简单、外驱功率管,适用于 5-100V 输入的高精度降压 LED 恒流驱动芯片。外 驱 MOS,输出电流可达 6A。 AP2400 可实现三段功能切换,通过 MODE1/2/3 切换三种功能模式:全亮, 半亮…

电子式电表和智能电表哪个更适合家用?

随着科技的发展,家用电力设备也在不断升级。电子式电表和智能电表作为两种常见的电表类型,究竟哪个更适合家用呢?今天,小编将会从多个角度进行全面分析,帮助大家做出明智的选择。 一、工作原理及准确性比较 1.电子式电…

vue 点击滑动到页面指定位置(点击下滑滚动)的功能

需求 点击页面上的 文字 滑动到页面指定位置 三种方法 document.getElementById(show).scrollIntoView() // 默认滚动至节点置顶document.getElementById(show).scrollIntoView(false) // 默认滚动至节点显示document.getElementById(show).scrollIntoView({ behavior: &quo…

【电路笔记】-并联RLC电路分析

并联RLC电路分析 文章目录 并联RLC电路分析1、概述2、AC的行为3、替代配置3.1 带阻滤波器3.2 带通滤波器 4、总结 电子器件三个基本元件的串联行为已在我们之前的文章系列 RLC 电路分析中详细介绍。 在本文中,介绍了另一种称为并联 RLC 电路的关联。 在第一部分中&a…

MySQL事务机制,事务与并发

mysql应对并发设立了四种事务机制: READ UNCOMMITEDREAD COMMITZEDREPEATABLE READSERIALIZABLE 以上按照串行程度排序 READ UNCOMMITED只要有人修改,我都能读到,不论是不是commited,但这有问题,万一A修改了&#xf…

钓鱼识别视频AI算法,让智慧水务更上一层楼

智慧水务已经成为现代水务行业的发展趋势,通过一系列的技术升级,实现智能化、高效化的水资源管理。其中,钓鱼识别视频AI算法的应用,更是为安全防线提供了强大的技术支持。本文将围绕智慧水务技术升级和钓鱼识别视频AI算法展开讨论…

考研顺序表的初始化、销毁、打印、封装、增删改查代码看这一篇就够了

目录 题目 头文件&#xff1a; SeqList.c 文件 销毁函数 封装函数&#xff0c;动态扩容 尾插法 打印函数 头插法 尾删法 头删法 指定位置插入 指定下标位置删除 按值查找下标 Test.c测试类 题目 // SeqList.h #pragma once #include <stdio.h> #include <…

不得不学的“职场高手秘籍”,有这3张表,做工作进度管理必备!

在职场中&#xff0c;进度管理是非常重要的一环&#xff0c;无论是完成自己的工作还是协调团队的工作&#xff0c;都需要对进度进行有效的管理&#xff0c;以确保工作能够顺利进行&#xff0c;达成既定目标。 工作进度表 工作管理/自动统计/图表分析/可编辑修改 在制定工作计划…

挑战100天 AI In LeetCode Day04(热题+面试经典150题)

挑战100天 AI In LeetCode Day04&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-62.1 题目2.2 题解 三、面试经典 150 题-63.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&am…

11月15-19日,第二十五届高交会等你来

11月15—19日&#xff0c;第二十五届中国国际高新技术成果交易会&#xff08;以下简称“高交会”&#xff09;将在深圳会展中心&#xff08;福田展区&#xff09;和深圳国际会展中心&#xff08;宝安展区&#xff09;两馆同时举行。 本届高交会以“激发创新活力提升发展质量”…

【CSDN 每日一练 ★☆☆】【链表】删除排序链表中的重复元素

【CSDN 每日一练 ★☆☆】【链表】删除排序链表中的重复元素 链表 递归 题目 存在一个按升序排列的链表&#xff0c;给你这个链表的头节点 head &#xff0c;请你删除所有重复的元素&#xff0c;使每个元素 只出现一次 。 返回同样按升序排列的结果链表。 示例 示例 1&am…

如何给WSL2缩减硬盘(即减小虚拟大小)?

如何给WSL2缩减硬盘&#xff08;即减小虚拟大小&#xff09;&#xff1f; 1.软件环境⚙️&#x1f50d;2.问题描述&#x1f50d;&#x1f421;3.解决方法&#x1f421;&#x1f914;4.结果预览&#x1f914; 1.软件环境⚙️ Windows10 教育版64位 WSL 2 Ubuntu 20.04 &#x1f…

linux循环继续fordodone数值处理和脚本的追踪调试

格式 for &#xff08;&#xff08;初始值&#xff1a;限制值&#xff1b;步长&#xff09;&#xff09; do 程序段 done 注意点&#xff1a;$(()) 数值运算 $()命令 ${}取值 sh [-nvx] *.sh -n 不执行脚本&#xff0c;检查语法错误-常用 -v 执行之前&#xff0c;将…

野火霸天虎 STM32F407 学习笔记_3 尝试寄存器映射方式点亮 LED 灯

新建工程 寄存器方式 要命啊&#xff0c;一看名字我就不想试。寄存器新建不得麻烦死。 哎算了为了学习原理&#xff0c;干了。 我们尝试自己写一个寄存器的库函数来引用。 首先我们需要引用 st 官方启动文件 stmf4xx.s&#xff0c;具体用途后面章节再展开讲解。然后我们自…

一种libuv实现websockets服务的解决方案

方法是libuv用多事件循环来驱动。说起来容易&#xff0c;做起来还是比下面的方法更容易&#xff1a; 上图是某位网友的方法代表子大部分网络资料。此方法对部署不友好&#xff0c;因为软件仓库提供的libwebsockets是不能用了。如何简化部署&#xff0c;利用好现有的软件仓库呢&…