uniapp 省市区三级联动

需求：小程序省市区三级联动，可在子节点存在时选择父节点（也就是说可以在区存在时选择市），同时满足可以根据不同用户权限展示出两级联动（列表无省），一级联动（列表无省市只有区。我用的是uniapp的picker的多列选择器，希望给因同样需求在苦恼的你一些帮助。
（uni-nav-bar为自定义导航栏可忽略）
后端所给结构为树结构，这是部分结构，

 [{"id": "3c495cc5-e5c0-4788-b65e-6f7d7179ac4a","text": "辽宁省","code": "210000000000","leaf": false,"level": 2,"treeid": "0,16e34a14-fbb4-4334-b55c-24123caf5d62,3c495cc5-e5c0-4788-b65e-6f7d7179ac4a","expanded": false,"checked": false,"children": [{"id": "93bbf2fc-ce22-4f60-9f6d-43e63f8fa604","text": "沈阳市","code": "210100000000","leaf": false,"level": 3,"treeid": "0,16e34a14-fbb4-4334-b55c-24123caf5d62,3c495cc5-e5c0-4788-b65e-6f7d7179ac4a,93bbf2fc-ce22-4f60-9f6d-43e63f8fa604","expanded": false,"checked": false,"children": [{"id": "ec2f95c4-4f04-d411-992f-5cff1f1f7d8e","text": "大东区","code": "210104000000","leaf": false,"level": 4,"treeid": "0,16e34a14-fbb4-4334-b55c-24123caf5d62,3c495cc5-e5c0-4788-b65e-6f7d7179ac4a,93bbf2fc-ce22-4f60-9f6d-43e63f8fa604,ec2f95c4-4f04-d411-992f-5cff1f1f7d8e","expanded": false,"checked": false,"parent": {"id": "93bbf2fc-ce22-4f60-9f6d-43e63f8fa604","text": "沈阳市","code": "210100000000","leaf": false,"level": 3,"treeid": "0,16e34a14-fbb4-4334-b55c-24123caf5d62,3c495cc5-e5c0-4788-b65e-6f7d7179ac4a,93bbf2fc-ce22-4f60-9f6d-43e63f8fa604","data": {"PY": "sys","FullText": "中国/辽宁省/沈阳市","IndexField": 0,"RegionLevel": 3,"Coord": "123.429096,41.796767","Code": "210100000000","Text": "沈阳市","TreeIds": "0,16e34a14-fbb4-4334-b55c-24123caf5d62,3c495cc5-e5c0-4788-b65e-6f7d7179ac4a,93bbf2fc-ce22-4f60-9f6d-43e63f8fa604","Parent": "3c495cc5-e5c0-4788-b65e-6f7d7179ac4a","IsLeaf": false,"NodeLevel": 3,"Id": "93bbf2fc-ce22-4f60-9f6d-43e63f8fa604","Version": 4,"CreateTime": "0001-01-01T00:00:00"}},

<template><view class="">
<uni-nav-bar color="#ffffff" background-color="#24A943"     :fixed="true" :status-bar="true"  :border="false" title="双杰接入助手 "><block slot="left"><view class="uni-flex-start-center" style="width: 600rpx;"><picker mode="multiSelector" :value="multiIndex" :range="multiArray" :range-key="name" @columnchange="columnRegionchange"@change="regionChange"><view class="uni-flex-start-center"><span class="iconfont icon-icon-bars"></span><span class="picker-text"><uni-icons v-if="regionAuthority === ''" class="icon-reload" :color="'#fff'" type="spinner-cycle" size="14" />{{regionAuthority}}</span></view></picker></view></block></uni-nav-bar></view>
</template>

<script>import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';//自定义导航栏const App = getApp();export default {components: {authorizationModal,search,uniNavBar},data() {return {regionList: [], //区划列表multiIndex: [0, 0, 0],provinces: [], //省city: [], //市distinct: [], //区multiArray: [], // 三级联动 该数组的值为[[provinces],[city],[distinct]],cityId: [], //市IDprovinceId: [], //省IDregionText: "",regionId: '' ,//区域IDregionAuthority:'',//区域权限cityAllList:[],//市区划列表distinctAllList:[]//区列表};},

watch: {'regionId': {handler(newVal, oldVal) {this.MerchanData.start = 0this.MerchanList = []this.getMerchanList()},deep: true}},

// 选择省市区方法regionChange(e) {  if(this.level==2){this.multiIndex = e.detail.value;var regionChooseId = this.regionList[e.detail.value[0]].cityList[e.detail.value[1]].disrictList[e.detail.value[2]].id//如果选择到全市获取全区的id，那应该选择它的父级id//如果说选到了区且区的id不等于987456321，那么直接返回//如果说选到了区且id等于，则看市的id是否等于123456789，如果是，则区域id为省的id；如果不是，那么区域id返回为市的idif (regionChooseId === "987654321") {//辽宁省的权限if (this.regionList[e.detail.value[0]].cityList[e.detail.value[1]].id === "123456789") {this.regionAuthority=this.regionList[0].namethis.regionId = this.regionList[0].id} else {this.regionId = this.regionList[e.detail.value[0]].cityList[e.detail.value[1]].idthis.regionAuthority=this.regionList[e.detail.value[0]].cityList[e.detail.value[1]].name}} else {this.regionAuthority=this.regionList[e.detail.value[0]].cityList[e.detail.value[1]].disrictList[e.detail.value[2]].namethis.regionId = regionChooseId}}else if(this.level==3){//市的权限var  regionChangeId=this.cityAllList[e.detail.value[0]].disrictList[e.detail.value[1]].idif(regionChangeId==="987654321"){this.regionAuthority=this.cityAllList[e.detail.value[0]].namethis.regionId=this.cityAllList[e.detail.value[0]].id}else{this.regionAuthority=this.cityAllList[e.detail.value[0]].disrictList[e.detail.value[1]].namethis.regionId=regionChangeId  }}else{// 区的权限this.regionId=this.distinctAllList[e.detail.value[0]].idthis.regionAuthority=this.distinctAllList[e.detail.value[0]].name}},//获取区划列表getRegionList() {this.request({url: '/Regions/RegionTreeByUserDept',method: 'GET'}).then((res) => {this.level=res.data[0].levelif(res.data[0].level==2){this.multiIndex=[0,0,0]//省权限this.regionAuthority=res.data[0].textthis.regionList = res.data.map(item => {return {id: item.id,name: item.text,cityList: item.children.map(item2 => {return {id: item2.id,name: item2.text,disrictList: item2.children == undefined ? [] : item2.children.map(item3 => {return {id: item3.id,name: item3.text}})}})}})this.regionList[0].cityList.unshift({name: '全市',id: '123456789',disrictList: [{id: '987654321',name: '全区 '}],})for (var i = 0; i < this.regionList[0].cityList.length; i++) {if (this.regionList[0].cityList[i].name !== '全市') {this.regionList[0].cityList[i].disrictList.unshift({id: '987654321',name: '全区 '})}}//初始化更新数据let that = thisthis.provinces = this.regionList.map(item => {return item.name})this.city = this.regionList[0].cityList.map(item => {return item.name})this.distinct = this.regionList[0].cityList[0].disrictList.map(item => {return item.name})this.multiArray = [this.provinces, this.city, this.distinct]}else if(res.data[0].level==3){//市权限this.multiIndex=[0,0]this.regionAuthority=res.data[0].textthis.cityAllList=res.data.map(item=>{return{id:item.id,name:item.text,disrictList:item.children.map(item2=>{return {id:item2.id,name:item2.text}})}})this.cityAllList[0].disrictList.unshift({name: '全区',id: '987654321',})//初始化数据this.cityFirstData=this.cityAllList.map(item=>{return item.name})this.distinctFirstData=this.cityAllList[0].disrictList.map(item=>{return item.name})this.multiArray = [ this.cityFirstData, this.distinctFirstData]}else{this.multiIndex=[0]this.regionAuthority=res.data[0].textthis.distinctAllList=res.data.map(item=>{return{id:item.id,name:item.text}})this.distinctAllData=this.distinctAllList.map(item=>{return item.name})this.multiArray = [this.distinctAllData]}})},// 某一列的值改变时触发 columnchange 事件columnRegionchange(e) {console.log('修改的列为', e.detail.column, '，值为', e.detail.value);if(this.level==2){if (e.detail.column == 1) {this.cityId = this.regionList[0].cityList[e.detail.value].idthis.getDistinct()}}else if(this.level==3){}else{}},//根据市id获取区列表getDistinct() {let index = this.regionList[0].cityList.findIndex(item => item.id == this.cityId);this.distinct = this.regionList[0].cityList[index].disrictList.map(item => {return item.name})this.multiArray[2] = this.distinct},// 获取商户列表（此处可忽略）getMerchanList() {this.request({url: '/KonwRealySituation/GetKonwRealyDistancePaggerList',data: {regionId:this.regionId== undefined ? '' : this.regionId,},method: 'GET'}).then(res => {console.log('完成')}).catch(rej => {this.showToast(rej.msg);});},

uniapp 省市区三级联动相关推荐

支付宝小程序使用uView实现省市区三级联动的后续
上一篇讲的是使用uView2.0实现省市区三级联动(CSDN),最后无疾而终这次我打算一雪前耻,使用uVIew1.0版本. 很好支持支付宝小程序,然后我按照官网的步骤一顿操作.. hbuilderX ...
微信小程序的省市区三级地址mysql_微信小程序picker实现的省市区三级联动
微信小程序的省市区三级联动需要使用到的是Picker多列选择器,参考文档:https://www.w3cschool.cn/weix..., 案例中用到的省市区的json文件在文后发出出来. 废话不多 ...
WheelView实现省市区三级联动(数据库实现版本号附带完整SQL及数据)
近期在实现收货地址功能.用到了省市区三级联动效果.网上找到一般都是xml或json,数据源陈旧改动麻烦,改动了一下使用数据库方式实现了一下数据源解决,因为数据量比較大通过初始化批量运行SQL的方式不 ...
jQuery省市区三级联动插件
体验效果:http://hovertree.com/texiao/bootstrap/4/ 支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> & ...
android仿ios城市选择,Android 省市区三级联动选择器（仿iOS滚轮实现）
前言在实际的项目中需要使用到省市区三级联动的功能,在网上找来找去,都没有找到一个合适的库, 所以自己就封装了一个,不需要自己添加数据源,直接引用即可,一行代码搞定城市选择.怎么简单,怎么方便,怎么来 ...
java封装省市区三级json格式,2016中国省市区三级联动json格式.pdf
2016中国省市区三级联动json格式 2016 年中国省市区三级联的JSON 格式 {"北京市":{"name":"北京市"," ...
element vue 获取select 的label_vue+elementui实现省市区三级联动
老大喊你起来营业了醒醒,打工人!开始工作了,今天讲讲我的踩坑记录吧! 这次我们用的是vue-admin-webapp,基于 vue 和 element-ui 采用了最新的前端技术栈来开发一个管理系统 ...
range 小程序picker_微信小程序-官方组件picker云开发省市区三级联动选择器
早在一年多以前,我写过一篇微信小程序-省市区县三级联动选择器的文章,那时候小程序刚起步,网上找了很久没有相关的文献,官方也没有相关的组件,我就自己动手写了一个,也因为刚开始接触写的不是很好. 当时省市 ...
省市区三级联动最新县及县以上行政区划代码来源：国家统计局
http://www.stats.gov.cn/tjsj/tjbz/xzqhdm/201504/t20150415_712722.html jquery省市区三级联动(数据来源国家统计局官网)内附源码 ...

uniapp 省市区三级联动

uniapp 省市区三级联动

uniapp 省市区三级联动相关推荐

最新文章

热门文章