vue利用级联选择器实现全国省市区乡村五级菜单联动

6a044de53fc68f33cb527a15ab4d22e7.png

大家好,我是雄雄,欢迎关注微信公众号:雄雄的小课堂。

现在是:2022年2月13日20:09:27

今天分享一个五级级联地址的组件的使用吧。

前言

接到这样的一个需求:需要根据地址查询列表信息,地址可以分别按照省、市、县、乡、村 五级作为条件查询。

如果但是这个需求还好说,以前使用的方式是放五个下拉列表,通过懒加载的方式,根据省得到该省下的市,根据市得到该市下的县……最后可以得到村的级别,然后作为条件查询,也就是下面的这种方式:

b799c108260b577d2b5e61b134308afc.png
image-20220213201630629
a10cb542ab3ce76e329c578ee43c51b5.png
image-20220213201641535

但是,客户说,太长了……因为他的另一个需求是这样的:

74d0dd598b62e0722f6b6a1e1ff323ec.png
image-20220213203322417

如果放5个的话,就会造成装不下的bug。

7b2f16690201a8aa736ae1a831888f6c.png
image-20220213203822894

实现思路

原来采用的是select,现在看来,select显然不是最好的解决方式,去element-ui上面看了看,发现了另一个组件:Cascader 级联选择器,样式如下:

5ba691d630a96624bec622128d28a898.png
image-20220213204120997

于是就把这个Cascader 组件改了改,改成了省市区乡村的组件,同时也做成了公共组件,项目中可以多次共用。

数据表结构

全国省市区乡村没有使用json的方式,将所有的省市区乡村信息都放在了数据库中,用的时候根据父级编号查询,数据库表结构如下:

a125970ad4eec87310240b58aebabfe6.png
image-20220213204531326

级联实现地址联动

实现思路:页面初次加载的时候,将全国所有省查询出来,封装放在级联组件Cascader中,当用户选择某个省的时候,将当前省的编码作为父级编码,去查询所有的市。比如选的山东省,查询出来的就是山东所有市,济南,聊城,菏泽等。

为了解决系统性能问题,我将查询出来的信息都放在了redis缓存中了,缓存里面没有的话去数据库里面找去,有则在缓存中取,效率要高点儿。

下面是公共组件中的代码:

<!--作者:mxx时间:2022年2月11日16:22:07描述:el-Cascader实现省市区乡村菜单
-->
<template><div><div class="block"><el-cascaderv-model="selectedOptions":show-all-levels="false"ref="sysCascader":size="size":placeholder="placeholder":props="props"@change="handleChange"clearable></el-cascader></div><!--  鼠标悬浮触发  -->
<!--    <div class="block"><span class="demonstration">hover 触发子菜单</span><el-cascaderexpand-trigger="hover":options="options"v-model="selectedOptions2"@change="handleChange"></el-cascader></div>--></div>
</template><script>
import {listArea} from "../../../api/system/area";
export default {name: "addressCommonComponentsUtils",props: {//组件大小size: {type: String,default: "mini"},//组件的提示信息placeholder: {type: String,default: "请选择地区"}},data() {let self = this;return {/*省市区的集合*/options: [],props: {lazy: true,checkStrictly: true,lazyLoad: this.getLazyLoad,},selectedOptions: [],// 地址查询参数qParams: {pid: null,type: null,},//省市区的值addressInfo: {//编码//省sonProvinceValue: null,//市sonCityValue: null,//区sonAreaValue: null,//街道sonStreetValue: null,//乡村sonCountryValue: null,//名字//省sonProvinceName: null,//市sonCityName: null,//区sonAreaName: null,//街道sonStreetName: null,//乡村sonCountryName: null,},};},created() {},methods: {//懒加载省份信息到组件中getLazyLoad(node, resolve) {setTimeout(() => {if (node.level == 0) {this.qParams.type = 1;listArea(this.qParams).then(res => {const cities = res.rows.map((value, i) => ({value: value.areaId,label: value.name,leaf: node.level >= 2,}));// 通过调用resolve将子节点数据返回,通知组件数据加载完成resolve(cities);}).catch(err => {console.log(err);});}if (node.level != 0 && node.level < 5) {this.qParams.type = node.level + 1;this.qParams.pid = node.value;listArea(this.qParams).then(res => {const areas = res.rows.map((value, i) => ({value: value.areaId,label: value.name,leaf: node.level >= 4}));//设置省市区街村的值this.setNameAndValue(node);// 通过调用resolve将子节点数据返回,通知组件数据加载完成resolve(areas);}).catch(err => {console.log(err);});} else if (node.level == 5) {//最后一个节点,不去查询了,直接赋值const areas = {value: node.value,label: node.label,leaf: node.level};//将值和名称赋值到变量里面this.addressInfo.sonCountryValue = node.value;this.addressInfo.sonCountryName = node.label;resolve(areas);}}, 10);},//通过当前选择的地区,设置到对应的变量中setNameAndValue(node) {switch (node.level) {case 1:this.addressInfo.sonProvinceValue = node.value;this.addressInfo.sonProvinceName = node.label;this.addressInfo.sonCityValue = null;this.addressInfo.sonCityName = null;this.addressInfo.sonAreaValue = null;this.addressInfo.sonAreaName = null;this.addressInfo.sonStreetValue = null;this.addressInfo.sonStreetName = null;this.addressInfo.sonCountryValue = null;this.addressInfo.sonCountryName = null;break;case 2:this.addressInfo.sonCityValue = node.value;this.addressInfo.sonCityName = node.label;this.addressInfo.sonAreaValue = null;this.addressInfo.sonAreaName = null;this.addressInfo.sonStreetValue = null;this.addressInfo.sonStreetName = null;this.addressInfo.sonCountryValue = null;this.addressInfo.sonCountryName = null;break;case 3:this.addressInfo.sonAreaValue = node.value;this.addressInfo.sonAreaName = node.label;this.addressInfo.sonStreetValue = null;this.addressInfo.sonStreetName = null;this.addressInfo.sonCountryValue = null;this.addressInfo.sonCountryName = null;break;case 4:this.addressInfo.sonStreetValue = node.value;this.addressInfo.sonStreetName = node.label;this.addressInfo.sonCountryValue = null;this.addressInfo.sonCountryName = null;break;case 5:this.addressInfo.sonCountryValue = node.value;this.addressInfo.sonCountryName = node.label;break;}},/*改变事件*/handleChange(event) {let node = this.$refs.sysCascader.getCheckedNodes()[0];//解决不点字  只点击单选按钮的问题this.setNameAndValue(node);//将该组件中的值传递给父组件//getCheckedAddressInfo: 是父组件指定的传数据绑定的函数,this.$emit('getCheckedAddressInfo', this.addressInfo)},}
}
</script><style scoped></style>

关键代码都有相应的注释,应该看起来都没有问题。

或许有些地方的代码冗余,但是我没法再优化了……这个组件大致的功能就是将用户选择的地址信息,传递到父组件中,父组件通过getCheckedAddressInfo函数拿到用户选择的地址信息,不管选择哪一级都可以,最后在根据地址信息做其他操作。

listArea方法:根据条件查询地址信息,传递的参数是地址实体,在本文的最后我附上后台的实现代码。

级联地址组件的使用

使用方法也很简单,只需这么几步:

1.先导入组件:

import addressCommonComponentsUtils from "../area/addressCommonComponentsUtils";

2.注册组件:

export default 里面写如下代码:

components: {"address-utils": addressCommonComponentsUtils,},
70d1cc919e07f6cf43f1311ff59837e2.png
image-20220213212322706

3.在template中引入级联地址组件:

<address-utils:size="mini":placeholder="checkdiqu"@getCheckedAddressInfo="getCheckedAddressInfo"></address-utils>

4.在methods中写getCheckedAddressInfo方法回去选择的地址信息:

//获取用户选择的地址信息getCheckedAddressInfo(value){//给地址栏中赋值this.queryParams.fieldProvince = value.sonProvinceName;this.queryParams.fieldCity = value.sonCityName;this.queryParams.fieldArea = value.sonAreaName;this.queryParams.fieldStreet = value.sonStreetName;this.queryParams.fieldCommunity = value.sonCountryName;},

参数说明:

编码:比如北京是110000,山西是:140000等

  • //省 `sonProvinceValue,

  • //市 `sonCityValue,

  • //区 `sonAreaValue,

  • //街道 `sonStreetValue,

  • //乡村 `sonCountryValue,

名字:比如北京是**【北京】,山西是【山西省】**

  • //省 sonProvinceName,

  • //市 `sonCityName,

  • //区 `sonAreaName,

  • //街道 `sonStreetName,

  • //乡村 sonCountryName,

最后实现的效果如下:

545d0dbecc8cb41f18e0373613da782e.png
image-20220213213301547

附:后台查询地址的代码

area.js:

// 查询地址列表
export function listArea(query) {return request({url: '/system/area/list',method: 'get',params: query})
}

SysAreaController中的代码:

@Autowiredprivate ISysAreaService sysAreaService;/*** 查询地址列表*///@PreAuthorize("@ss.hasPermi('system:area:list')")@GetMapping("/list")public TableDataInfo list(SysArea sysArea){// startPage();List<SysArea> list = sysAreaService.selectSysAreaList(sysArea);return getDataTable(list);}

SysAreaServiceImpl中的代码:

@Autowiredprivate SysAreaMapper sysAreaMapper;@Autowiredprivate RedisCache redisCache;/*** 查询地址* * @param id 地址主键* @return 地址*/@Overridepublic SysArea selectSysAreaById(Long id){return sysAreaMapper.selectSysAreaById(id);}/*** 查询地址列表* * @param sysArea 地址* @return 地址*/@Overridepublic List<SysArea> selectSysAreaList(SysArea sysArea) {//分批次判断地址List<SysArea> areaList = new ArrayList<>();//地址对象SysArea area = new SysArea();if(sysArea.getPid()==null){sysArea.setPid("100000");}//市、区县、街道、村if (redisCache.getCacheList(sysArea.getPid() + "ListCache").size()==0) {System.out.println("=========================走数据库了=========================");area.setType(sysArea.getType());//将父级编号放进来area.setPid(sysArea.getPid());areaList = sysAreaMapper.selectSysAreaList(area);redisCache.setCacheList(sysArea.getPid() + "ListCache", areaList);} else {System.out.println("=========================走缓存了=========================");//从缓存中取出来areaList = redisCache.getCacheList(sysArea.getPid() + "ListCache");}return areaList;}

Mapper层和Service的接口层就不放了,就正常写,返回集合就行:

/*** 查询地址列表* * @param sysArea 地址* @return 地址集合*/public List<SysArea> selectSysAreaList(SysArea sysArea);

最后是mapper.xml中的sql:

<sql id="selectSysAreaVo">select id, name, area_id, pid, type, status, del_flag, create_time, update_time, pids, m_pid, m_pids, m_type, region, remark from sys_area</sql><select id="selectSysAreaList" parameterType="SysArea" resultMap="SysAreaResult"><include refid="selectSysAreaVo"/><where><if test="name != null  and name != ''"> and name like concat('%', #{name}, '%')</if><if test="areaId != null  and areaId != ''"> and area_id = #{areaId}</if><if test="pid != null  and pid != ''"> and pid = #{pid}</if><if test="type != null "> and type = #{type}</if><if test="status != null "> and status = #{status}</if><if test="pids != null  and pids != ''"> and pids = #{pids}</if><if test="mPid != null  and mPid != ''"> and m_pid = #{mPid}</if><if test="mPids != null  and mPids != ''"> and m_pids = #{mPids}</if><if test="mType != null "> and m_type = #{mType}</if><if test="region != null  and region != ''"> and region = #{region}</if></where></select>

总结

好了,今天分享的就这些了,源码也都贴上来啦,记录记录,一来或许可以帮助大家,二来自己以后用的时候,也可以直接上来扒代码了。

下一篇:springboot解析word文档,包括复杂的图片,复选框等。

问:你知道CV工程师是啥吗?

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

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

相关文章

业务库负载翻了百倍,我做了什么来拯救MySQL架构

转载自 业务库负载翻了百倍&#xff0c;我做了什么来拯救MySQL架构 作者介绍 杨建荣&#xff0c;竞技世界资深DBA&#xff0c;前搜狐畅游数据库专家&#xff0c;Oracle ACE&#xff0c;YEP成员。拥有近十年数据库开发和运维经验&#xff0c;目前专注于开源技术、运维自动化和…

NuGet.org服务管理变更,提升中国用户体验

.NET的软件包管理器NuGet.org是一项面向全球用户搭建的服务&#xff0c;不论用户身在何处&#xff0c;NuGet.org都应该有能力提供高性能的服务。但在实际使用中&#xff0c;我们发现它的表现并不总能如人所愿&#xff0c;特别是在拥有全球第二大.NET开发者社区的中国&#xff0…

vue中父组件怎么调用子组件

前言 前段时间&#xff0c;写了个地址的控件&#xff0c;封装成了一个子组件&#xff0c;在其他页面共用。 原文地址&#xff1a;vue利用级联选择器实现全国省市区乡村五级菜单联动 然后当时出现了个bug&#xff0c;也没有太注意&#xff0c;后来才发现的。就是重置不了地址栏…

POJ3585-Accumulation Degree【树形dp,二次扫描与换根法】

正题 题目链接:http://poj.org/problem?id3585 题目大意 有棵无根树&#xff0c;当你选择一个点为根时&#xff0c;价值就是根节点到所有叶节点的路上的最小权值之和。 解题思路 我们可以先计算一次点1为根时的答案&#xff0c;路上统计答案为didi&#xff0c;然后定义fifi…

ASP.NET Core 运行原理解剖[4]:进入HttpContext的世界

本系列文章从源码分析的角度来探索 ASP.NET Core 的运行原理&#xff0c;分为以下几个章节&#xff1a; ASP.NET Core 运行原理解剖[1]:Hosting ASP.NET Core 运行原理解剖[2]:Hosting补充之配置介绍 ASP.NET Core 运行原理解剖[3]:Middleware-请求管道的构成 IHttpContext…

都忘了自己还有一套房子了。。。

​自20年始来&#xff0c;一直租着我的房子。当时疫情刚刚有所好转&#xff0c;我把房子挂在58上&#xff0c;陆陆续续的有好多人问&#xff0c;不过都没有租&#xff0c;一来离我住的地方有点远&#xff0c;过去一次得个把小时的&#xff0c;人家要看房子不能及时过去。二来问…

JavaFX鼠标拖拽事件

一、节点原拖拽事件 //鼠标拖拽进入node node.setOnMouseDragEntered(event->{//do something });//鼠标拖拽退出node node.setOnMouseDragExited(event->{//do something });//鼠标拖拽经过node&#xff08;入-出&#xff09; node.setOnMouseDragOver(event->{//do…

POJ2228-Naptime【环形结构上的dp】

正题 题目链接:http://poj.org/problem?id2228 题目大意 有一个环&#xff0c;选择一段长度为n进行计算。如果第i个时间点选择不睡觉那么就会增加aiai。你也可以选择睡觉&#xff0c;第一个时间点不算&#xff0c;睡觉时间至少为m。 解题思路 我们可以分为两种情况&#xf…

发现了个神奇的事儿

今天&#xff0c;我发现了个神奇的事儿。当你不想做某件事的时候&#xff0c;你会发现在做这件事之前有好多事需要“紧急”去做&#xff0c;导致最后你“没空”去做这件事&#xff01;举个例子&#xff01;比如我今天晚上不想写代码&#xff0c;于是下班回家一进门&#xff0c;…

JavaFX鼠标点击事件

一、节点原点击事件 //鼠标点击按压 node.setOnMousePressed(event->{//do something });//鼠标点击释放 node.setOnMouseReleased(event->{//do something });//鼠标点击&#xff08;按压-释放&#xff09; node.setOnMouseClicked(event->{//do something }); 二、…

Visual Studio2017 远程调试 Remote Debugger

前言 大家在使用vs打包后的文件部署到服务器后&#xff0c;有时候我们需要对线网的后台进行调试。但是它不像在VS中。这个时候我们该怎么调试呢&#xff1f; 微软想到了这一点&#xff0c;他们在 VS 中给我们提供了一个功能: Remote Debugger&#xff0c;要远程调试我们就需要…

Ch5501-环路运输【环形处理dp】

正题 题目链接:http://contest-hunter.org:83/contest/0x50%E3%80%8C%E5%8A%A8%E6%80%81%E8%A7%84%E5%88%92%E3%80%8D%E4%BE%8B%E9%A2%98/5501%20%E7%8E%AF%E8%B7%AF%E8%BF%90%E8%BE%93 题目大意 有n座仓库&#xff0c;然后是一个环&#xff0c;两个仓库之间的运输距离为AiAj…

JavaFX鼠标移动事件

一、节点原鼠标移动事件 //鼠标进入node node.setOnMouseEntered(event->{//do something });//鼠标退出node node.setOnMouseExited(event->{//do something });//鼠标移动 node.setOnMouseMoved(event->{//do something }); 二、节点监听鼠标移动事件 //鼠标进入 …

对于这款APP,我充了个终身VIP!!!

“大家好&#xff0c;我是雄雄&#xff0c;欢迎关注微信公众号&#xff1a;雄雄的小课堂。”现在是&#xff1a;2022年3月15日00:02:07昨天&#xff0c;无意间知道了一款特牛的APP&#xff0c;看了看&#xff0c;决定充了个终身会员&#xff01;今天&#xff0c;我就简单的对这…

Ubuntu amp;amp; GitLab CI amp;amp; Docker amp;amp; ASP.NETnbs

上一篇&#xff1a;Ubuntu & GitLab CI & Docker & ASP.NET Core 2.0 自动化发布和部署&#xff08;1&#xff09; 服务器版本 Ubuntu 16.04 LTS。 本篇博文目的&#xff1a;项目中添加Dockerfile文件&#xff0c;使用 CI 脚本构建自定义镜像&#xff0c;推送到 …

POJ2411-Mondriaan's Dream【状态压缩dp】

正题 题目链接:http://poj.org/problem?id2411 题目大意 有nmnm的矩阵&#xff0c;用1212的方块填满有多少种方法。 解题思路 用1表示竖着的块的上面&#xff0c;其他都是0。 我们先计算出所有单排合法状态&#xff08;横着的都是连续的偶数&#xff09;。 然后我们用sta…

JavaFX拖放事件

一、拖拽事件 DRAG_ENTERED_TARGET 拖拽进入node&#xff08;包括进入子node&#xff09; DRAG_ENTERED 拖拽进入node DRAG_EXITED_TARGET 拖拽退出node&#xff08;包括退出子node&#xff09; DRAG_EXITED 拖拽退出node DRAG_DROPPED 拖拽放下源node DRAG_DO…

新版《Windows Sysinternals实战指南》,读书积赞活动

新书《Windows Sysinternals实战指南》即将上市。该本由Sysinternals创始人、Windwos内核技术专家Mark Russinovich 与 Windows专家Aaron Margosis联手编著&#xff0c;详细介绍了Sysinternals每款工具的独到功能&#xff0c;并用较多篇幅深入介绍了如何通过几款重量级工具优化…

Bladex生成Swagger的方法

一、在启动类中添加如下代码&#xff1a;&#xff08;目的是为了打印输出swagger的地址等&#xff09; 注解&#xff1a;Slf4j 实现接口&#xff1a;CommandLineRunner 依赖注入&#xff1a; Autowiredprivate Environment environment;Overridepublic void run(String... str…

了解spark计算模型

简介 在集群背后&#xff0c;有一个非常重要的分布式数据架构&#xff0c;即弹性分布式数据集&#xff08;resilient distributed dataset&#xff0c;RDD&#xff09;&#xff0c;它是逻辑集中的实体&#xff0c;在集群中的多台机器上进行了数据分区。通过对多台机器上不同RDD…