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

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数据和工具类,以后在我需要用到这些数据的时候可以看到自己的这个文章然后找到这个数据来直接使用哈哈哈哈哈。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JeecgBoot Vue3版提供了省市区组件。该组件可以实现省、市、区县的管理功能。在源码中的api.js文件中,有三个接口函数可以用来获取省、市、区县的数据,分别是provinceList、cityList和districtList。这些接口函数可以通过调用getAction方法来发送请求获取相应的数据。除此之外,还可以通过导入JAreaTreeTag组件使用省市区组件。这个组件可以实现省市区的树形展示,并提供选择功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JeecgBoot平台前端Vue3源码](https://download.csdn.net/download/dcs_pk/88099139)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [jeecgboot省市区联动](https://blog.csdn.net/iwu2495rff/article/details/105392743)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [jeecg-boot自定义省市区划控件](https://blog.csdn.net/qq_45645324/article/details/122898043)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值