uni-app地址四级联动

uni-app的picker地址联动只有三级联动。
想要四级联动只能将picker的mode改为“multiSelector”，再自行获取数据填写

<template><view class="content"><view class="address"><image src="/static/images/index/address.png" mode="widthFix"></image><!-- 当 range 是一个 Object Array 时，通过 range-key 来指定 Object 中 key 的值作为选择器显示内容,range-key只接受字符串 --><picker mode="multiSelector" :range="mulSelect" :range-key="'name'" @change="pickerChange" @columnchange="colChange"><view :class="{active:isActive}">{{address}}</view></picker></view></view>
</template>

js部分：

<script>export default {data() {return {provinceList: [{id: 1,name: '广东省',cityList: [{id: 1,name: '广州市',districtList: [{id: 1,name: '天河区',streetList: [{id:1,name:'黄村新村大街'},{id:2,name:'玉树新村大街'}]},{id:2,name:'白云区',streetList:[{id:1,name:'大河大街'},{id:2,name:'小何大街'}]}],},{id:2,name:'茂名市',districtList:[{id:1,name:'信宜市',streetList:[{id:1,name:'东镇大街'},{id:2,name:'锦江大街'}]},{id:2,name:'电白县',streetList:[{id:1,name:'小区大街'},{id:2,name:'大区大街'}]}  ]}]},{id: 2,name: '广西省',cityList: [{id:1,name:'南宁市',districtList:[{id:1,name:'楠楠区',streetList:[{id:1,name:'安安大街'},{id:2,name:'安全大街'}]},{id:2,name:'安南区',streetList:[{id:1,name:'南山大街'},{id:2,name:'俺家大街'}]}]},{id:2,name:'吉普市',districtList:[{id:1,name:'吉尔区',streetList:[{id:1,name:'吉祥大街'},{id:2,name:'吉吉大街'}]},{id:2,name:'吉子市',streetList:[{id:1,name:'季付大街'},{id:2,name:'集合大街'}]}]}]}],province: [], //省数组city: [], //市数组district: [], //区数组street: [], //街道数组mulSelect: [], //四级联动显示数组，该数组的值为[[province],[city],[district],[street]]provinceId: 0, //省的idcityId: 0, //市的iddistrictId: 0,//区的idaddress:'请选择地址',isActive:false//字体颜色样式}},onReady() {// console.log(this.arrList[0].name)},methods: {pickerChange(e) {//什么都不选的话，e.detail.value的值为[null,null,null,null]//只选择省的话，e.detail.value的值为[数字,null,null,null]//只选择市的话，e.detail.value的值为[数字,数字,null,null]//所以获取e.detail.value的值先判断是否为null，如果为null则取值为0for(var i=0;i<e.detail.value.length;i++){if(e.detail.value[i]===null){e.detail.value[i]=0;}}var s_province=this.mulSelect[0][e.detail.value[0]];//获取选中的省var s_city=this.mulSelect[1][e.detail.value[1]||0];//获取选中的市var s_district=this.mulSelect[2][e.detail.value[2]||0];//获取选中的区var s_street=this.mulSelect[3][e.detail.value[3]||0];//获取选中的街道// console.log(e.detail.value);//赋值显示在页面this.address=s_province.name+s_city.name+s_district.name+s_street.name;//将字体颜色修改为黑色this.isActive=true;},colChange(e) {// console.log(e.detail);// console.log(this.mulSelect[0][e.detail.value])switch (e.detail.column){case 0://选择省this.provinceId=this.provinceList[e.detail.value].id;this.getCity();this.mulSelect[1]=this.city;this.getDistrict();this.mulSelect[2]=this.district;this.getStreet();this.mulSelect[3]=this.street;break;case 1://选择市for(var i=0;i<this.provinceList.length;i++){if(this.provinceList[i].id==this.provinceId){this.cityId=this.provinceList[i].cityList[e.detail.value].id;}}this.getDistrict();this.mulSelect[2]=this.district;this.getStreet();this.mulSelect[3]=this.street;break;case 2://选择区for(var i=0;i<this.provinceList.length;i++){if(this.provinceList[i].id==this.provinceId){for(var j=0;j<this.provinceList[i].cityList.length;j++){if(this.provinceList[i].cityList[j].id==this.cityId){this.districtId=this.provinceList[i].cityList[j].districtList[e.detail.value].id;}}}}this.getStreet();this.mulSelect[3]=this.street;break;case 3://选择街道break;default:break;}},getProvince() {for(var i=0;i<this.provinceList.length;i++){var pro={};pro.id=this.provinceList[i].id;//获取省idpro.name=this.provinceList[i].name;//获取省名this.province.push(pro);//将获取到的id，name放入省名称数组}},getCity() {for(var i=0;i<this.provinceList.length;i++){//寻找与省id匹配的索引if(this.provinceList[i].id==this.provinceId){if(this.city.length){//清空历史数据this.city=[];}for(var j=0;j<this.provinceList[i].cityList.length;j++){var ci={};ci.id=this.provinceList[i].cityList[j].id;//获取城市idci.name=this.provinceList[i].cityList[j].name;//获取城市名//将城市id，name放入城市数组this.city.push(ci);}}}},getDistrict(){for(var i=0;i<this.provinceList.length;i++){//寻找与省id匹配的索引if(this.provinceList[i].id==this.provinceId){// console.log(this.provinceId)for(var j=0;j<this.provinceList[i].cityList.length;j++){//寻找与市id匹配的索引if(this.provinceList[i].cityList[j].id==this.cityId){// console.log(this.cityId)if(this.district.length){//清空历史数据this.district=[];}for(var k=0;k<this.provinceList[i].cityList[j].districtList.length;k++){var di={};di.id=this.provinceList[i].cityList[j].districtList[k].id;//获取区iddi.name=this.provinceList[i].cityList[j].districtList[k].name;//获取区名//将区id，name放入区数组this.district.push(di);}}}}}},getStreet() {for(var i=0;i<this.provinceList.length;i++){//寻找与省id匹配的索引if(this.provinceList[i].id==this.provinceId){for(var j=0;j<this.provinceList[i].cityList.length;j++){//寻找与市id匹配的索引if(this.provinceList[i].cityList[j].id==this.cityId){for(var k=0;k<this.provinceList[i].cityList[j].districtList.length;k++){//寻找与区id匹配的索引if(this.provinceList[i].cityList[j].districtList[k].id==this.districtId){//循环遍历输出街道if(this.street.length){//清空历史数据this.street=[];}for(var l=0;l<this.provinceList[i].cityList[j].districtList[k].streetList.length;l++){var st={};st.id=this.provinceList[i].cityList[j].districtList[k].streetList[l].id;st.name=this.provinceList[i].cityList[j].districtList[k].streetList[l].name;this.street.push(st);}}}}}}}}},onNavigationBarButtonTap(e) {},onLoad() {//默认展示id为1的项this.getProvince();this.mulSelect.push(this.province);this.provinceId=1;this.getCity();this.mulSelect.push(this.city);this.cityId=1;this.getDistrict();this.mulSelect.push(this.district);this.districtId=1;this.getStreet();this.mulSelect.push(this.street);// console.log(this.mulSelect)}}
</script>

css部分：

<style lang="scss">.active{color: #000000;}.content {width: 100%;height: 40px;line-height: 40px;.address{display: flex;justify-content: flex-start;image{width: 30px;height: 30px;margin: 5px 5px;vertical-align: middle;}picker{color: #CCCCCC;}}}
</style>

uni-app地址四级联动相关推荐

vue 四级联动地址联动 vue级联选择
vue 四级联动效果实现前提首先看下,我们的开发环境及数据封装特点: 第一: 开发框架vue-cli3 elementUI 第二: 数据封装情况,详见代码部分 data中的 data; 满足以上2 ...
四级城市地区表 xlsx, sql文件,国内,中国省市县街道乡镇四级地址 (名称,联动ID,层级,是否末级(1-是))
四级城市地区表 xlsx, sql文件,国内,中国省市县街道乡镇四级地址 ID 父ID 名称联动ID 层级是否末级(1-是) 110107 1101 石景山区 11-1101-110107 3 0 ...
html中免费的四级联动,利用JS实现省市区街道四级联动插件
特效描述:利用JS实现省市区街道四级联动插件.利用JS实现省市区街道四级联动插件代码结构 1. 引入CSS 2. 引入JS 3. HTML代码所在地区所在地区请选择请选择请选择请选择 ...
小程序开发--地区选择四级联动（选择省,市,县,镇）
前端时间接到一个项目,里面有涉及到地区选择四级联动(即能选择到镇).自己去网上收罗了一波,也没发现有很详细的,所以就自己来写,写完总结一下. 首先地址选择小程序有自带一个组件,我们就先来看看这个组件: ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
android三级联动、四级联动（地区选择）
GitHub地址:https://github.com/gamekonglee/RegionSelector 先上效果图: allprojects { repositories { .. maven ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
四级联动框实现筛选查询
联动框是我们经常会用到的一个小功能,比较方便简单,但我们这里要在数据库里查询筛选数据,所以会有一点点不太一样,但原理还是不变,两级联动以及我们现在说的四级联动或者更多级,总的来说原理都是一样的,这只是 ...
世界国家，省市区，四级联动前台代码以及json数据
下载地址: 世界国家,省市区,四级联动前台JS代码实现以及json数据_js四级联动-Java代码类资源-CSDN下载
全国省、市、区、乡镇/街道地址四级数据库sql
全国省.市.区.乡镇/街道地址行政编吗.全称.简称.经纬度.级别.排序,四级联动,开箱即用. 省市区乡镇/街道 SQL 欢迎关注公众号:[皮卡战记] ,回复关键字[全国地址],无套路免费获取. ...

uni-app地址四级联动

uni-app地址四级联动相关推荐

最新文章

热门文章