公司开发个网站多少钱,设计网站的素材,随州seo推广,网络维护好学吗“大家好#xff0c;我是雄雄#xff0c;欢迎关注微信公众号#xff1a;雄雄的小课堂。”现在是#xff1a;2022年2月13日20:09:27今天分享一个五级级联地址的组件的使用吧。前言接到这样的一个需求#xff1a;需要根据地址查询列表信息#xff0c;地址可以分别按照省、市… “大家好我是雄雄欢迎关注微信公众号雄雄的小课堂。”现在是2022年2月13日20:09:27今天分享一个五级级联地址的组件的使用吧。前言接到这样的一个需求需要根据地址查询列表信息地址可以分别按照省、市、县、乡、村 五级作为条件查询。如果但是这个需求还好说以前使用的方式是放五个下拉列表通过懒加载的方式根据省得到该省下的市根据市得到该市下的县……最后可以得到村的级别,然后作为条件查询也就是下面的这种方式image-20220213201630629image-20220213201641535但是客户说太长了……因为他的另一个需求是这样的image-20220213203322417如果放5个的话就会造成装不下的bug。image-20220213203822894实现思路原来采用的是select,现在看来select显然不是最好的解决方式去element-ui上面看了看发现了另一个组件Cascader 级联选择器样式如下image-20220213204120997于是就把这个Cascader 组件改了改改成了省市区乡村的组件同时也做成了公共组件项目中可以多次共用。数据表结构全国省市区乡村没有使用json的方式将所有的省市区乡村信息都放在了数据库中用的时候根据父级编号查询数据库表结构如下image-20220213204531326级联实现地址联动实现思路页面初次加载的时候将全国所有省查询出来封装放在级联组件Cascader中,当用户选择某个省的时候将当前省的编码作为父级编码去查询所有的市。比如选的山东省查询出来的就是山东所有市济南聊城菏泽等。为了解决系统性能问题我将查询出来的信息都放在了redis缓存中了缓存里面没有的话去数据库里面找去有则在缓存中取效率要高点儿。下面是公共组件中的代码!--作者mxx时间2022年2月11日16:22:07描述el-Cascader实现省市区乡村菜单
--
templatedivdiv classblockel-cascaderv-modelselectedOptions:show-all-levelsfalserefsysCascader:sizesize:placeholderplaceholder:propspropschangehandleChangeclearable/el-cascader/div!-- 鼠标悬浮触发 --
!-- div classblockspan classdemonstrationhover 触发子菜单/spanel-cascaderexpand-triggerhover:optionsoptionsv-modelselectedOptions2changehandleChange/el-cascader/div--/div
/templatescript
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)},}
}
/scriptstyle scoped/style关键代码都有相应的注释应该看起来都没有问题。或许有些地方的代码冗余但是我没法再优化了……这个组件大致的功能就是将用户选择的地址信息传递到父组件中父组件通过getCheckedAddressInfo函数拿到用户选择的地址信息不管选择哪一级都可以最后在根据地址信息做其他操作。listArea方法根据条件查询地址信息传递的参数是地址实体在本文的最后我附上后台的实现代码。级联地址组件的使用使用方法也很简单只需这么几步1.先导入组件import addressCommonComponentsUtils from ../area/addressCommonComponentsUtils;2.注册组件:在export default 里面写如下代码components: {address-utils: addressCommonComponentsUtils,},image-202202132123227063.在template中引入级联地址组件address-utils:sizemini:placeholdercheckdiqugetCheckedAddressInfogetCheckedAddressInfo/address-utils4.在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,最后实现的效果如下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();ListSysArea 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 ListSysArea selectSysAreaList(SysArea sysArea) {//分批次判断地址ListSysArea 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 ListSysArea selectSysAreaList(SysArea sysArea);最后是mapper.xml中的sqlsql idselectSysAreaVoselect 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/sqlselect idselectSysAreaList parameterTypeSysArea resultMapSysAreaResultinclude refidselectSysAreaVo/whereif testname ! null and name ! and name like concat(%, #{name}, %)/ifif testareaId ! null and areaId ! and area_id #{areaId}/ifif testpid ! null and pid ! and pid #{pid}/ifif testtype ! null and type #{type}/ifif teststatus ! null and status #{status}/ifif testpids ! null and pids ! and pids #{pids}/ifif testmPid ! null and mPid ! and m_pid #{mPid}/ifif testmPids ! null and mPids ! and m_pids #{mPids}/ifif testmType ! null and m_type #{mType}/ifif testregion ! null and region ! and region #{region}/if/where/select总结好了今天分享的就这些了源码也都贴上来啦记录记录一来或许可以帮助大家二来自己以后用的时候也可以直接上来扒代码了。下一篇springboot解析word文档包括复杂的图片复选框等。问你知道CV工程师是啥吗
