• uniapp-地区的四级联动

    本来填写订单的页面选地址是三级联动的

    但是由于领导的要求，需要改成四级联动

    解决思路

    最开始用的是官方的 picker , 所以我去翻看了uniapp 的官网

    我们需要用到的是多列模式

    解决步骤

    1. 先封装对应的请求

    1. /**
    2.  *   获取省市县街道的列表
    3.  */
    4. export const getAddressList = (data) => request({url: '/system/region/list', method: 'get', data: data })

    2. 在data内去定义对应的数据

    3. 在页面的 created 钩子函数内去调用方法

    1. data () {
    2.   return {
    3.     provinceList: [], // 地区列表
    4.     province: [], //省数组
    5.     city: [], //市数组
    6.     district: [], //区数组
    7.     street: [], //街道数组
    8.     mulSelect: [], //四级联动显示数组，该数组的值为[[province],[city],[district],[street]]
    9.     mulSelectId: [] ,// 四级联动的id
    10.     provinceId: 110000, //省的id
    11.     cityId: 110101, //市的id
    12.     districtId: 110101001,//区的id
    13.     streetId: '', // 镇/街道id
    14.     address:''
    15.   };
    16. },
    17. created() {
    18. 		this.getList('', '1')	
    19. },
    20. methods: {
    21. 	// 获取地址列表
    22.   async getList(id, level) {
    23.     const data = {
    24.       parentId: id,
    25.       level: level
    26.     }
    27.     const res = await getAddressList(data)
    28.     if (this.mulSelect.length !== 4) {
    29.       if(level == 1) {
    30.         this.province = res.data.data
    31.         this.getProvince();
    32.         this.mulSelectId.push(res.data.data[0].id)
    33.         this.mulSelect.push(this.province);			
    34.         this.getList(this.provinceId, '2')
    35.       } else if (level == 2) {
    36.         this.city = res.data.data
    37.         this.getCity();
    38.         this.mulSelectId.push(res.data.data[0].id)
    39.         this.mulSelect.push(this.city);
    40.         this.getList(this.cityId, '3')
    41.       } else if (level == 3) {
    42.         this.district = res.data.data
    43.         this.getDistrict();
    44.         this.mulSelectId.push(res.data.data[0].id)
    45.         this.mulSelect.push(this.district);
    46.         this.getList(this.districtId, '4')
    47.       }
    48.     } else {
    49.       if(level == 1) {
    50.         // this.provinceId = res.data.data[0].id
    51.         console.log(id)
    52.         this.mulSelectId[0] = id
    53.         console.log(this.mulSelectId)
    54.         this.getProvince();			
    55.         this.getList(this.provinceId, '2')
    56.       } else if (level == 2) {
    57.         this.city = res.data.data
    58.         this.cityId = res.data.data[0].id
    59.         this.mulSelectId[1] = this.cityId
    60.         this.getCity();
    61.         this.mulSelect[1] = this.city;
    62.         this.getList(this.cityId, '3')
    63.       } else if (level == 3) {
    64.         this.district = res.data.data
    65.         this.districtId = res.data.data[0].id
    66.         this.mulSelectId[2] = this.districtId
    67.         this.getDistrict();
    68.         this.mulSelect[2] = this.district;
    69.         this.getList(this.districtId, '4')
    70.       } else if (level == 4) {
    71.         this.street = res.data.data
    72.         this.streetId = res.data.data[0].id
    73.         this.mulSelectId[3] = this.streetId
    74.         this.getStreet();
    75.         this.mulSelect[3] = this.street;
    76.       }
    77.     }
    78.   },
    79. }

    因为这个接口需要两个参数 而第一层级的省份是不需要id,只需要层级 所以在created内去调用的时候 只用传一个参数

    这个方法是分了两种情况

    第一种情况是刚进入页面的时候去获取地区的时候 因为我们定义的列表 mulSelect 数据是空的,所以说,这个时候 发请求获取到的数据 就是向这个数组内去push

    第二种情况是 当后续切换地区的时候 这个时候就不能用push了 只能对应的地方去替换原来的数据

    例如: this.mulSelectId[1] = this.cityId

    判断条件的话 我预想的比较好的方法就是通过去判断 mulSelect 数组的长度 因为最开始添加的时候length肯定是为0 的 但是这个时候就需要做一个小改动 因为不能直接写

    if (this.mulSelect.length == 0) 一些特殊情况 例如北京市 的情况下 总共是只有三级的 然后切换到xx省之后 就有四层数据 这个时候第四层数据怎么去替换呢 只能说push进去

    当然 这个方法是接收两个参数的 第一个是对应的id 第二个是层级

    因为我们发请求的时候是需要判断层级的 所以我又加了一层if判断 目的是为了区分一下

    4. 初次调用请求方法

    在实际开发中，为了用户的体验效果 肯定是第一次把四级的数据都展示出来，但是一次只能发一次请求

    这个时候层级就派上用场了 当为第一层的时候发第一个请求, 得到省级别的列表,先调另外的方法把列表添加进入 muSelect 数组内

    请求成功的时候也是拿到了第一个省份的id，我们拿到id后 递归 调用自身 但是传层级为2和对应的省id，这个时候就进入到了层级为2的逻辑内了 其实和层级1一样 这一层级也是获取到对应的市列表，调用方法添加到数组内 ，然后再调用自身传递3 ...........依次循环，直到循环完四次循环

    下面是图解

    因为默认第一个北京 只有三层 所以写三层就够了

    5. 切换时请求

    切换时 绑定的事件 @columnchange="colChange"

    1. // 地址改变触发
    2. 		colChange(e) {
    3. 			// console.log(e.detail);
    4. 			// console.log(this.mulSelect[0][e.detail.value])
    5. 			switch (e.detail.column){
    6. 				case 0://选择省
    7. 					this.mulSelect[1] =[]
    8. 					this.mulSelect[2] =[]
    9. 					this.mulSelect[3] =[]
    10. 					this.provinceId=this.mulSelect[0][e.detail.value].id;
    11. 					console.log(this.provinceId)
    12. 					this.getList(this.provinceId, e.detail.column+2 )
    13. 					
    14. 					break;
    15. 				case 1://选择市
    16. 					this.mulSelect[2] =[]
    17. 					this.mulSelect[3] =[]
    18. 					this.cityId = this.mulSelect[1][e.detail.value].id;
    19. 					this.getList(this.cityId, e.detail.column+2 )
    20. 					
    21. 					break;
    22. 				case 2://选择区
    23. 					this.mulSelect[3] =[]
    24. 					this.districtId = this.mulSelect[2][e.detail.value].id;
    25. 					this.getList(this.districtId, e.detail.column+2 )
    26. 					
    27. 					break;
    28. 				case 3://选择街道
    29. 					this.streetId = this.mulSelect[3][e.detail.value].id
    30. 					break;
    31. 				default:
    32. 					break;
    33. 			}
    34. 		},

    触发该事件 事件的e内有一个 detail 里面有两个属性 一个是value 一个是column

    value 是对应的层级下的索引

    column 是对应的层级

    我这里+2 是因为 1. 此处的层级也为索引 是从0开始的，而请求时是从1开始的

    2. 得到第一层的id 应该去请求的是第二层的数据 所以还要+1

    所以此处的处理逻辑和3差不多，只是多了一个切换 在对应的层级调用对应的接口

    请求后的操作也有所区别 ，例如请求得到的数据是直接去赋值替换 不是push添加

    再细节一点的地方就是： 发请求前 先把对应需要替换的值先赋值一个空值

    6. 完整代码

    1. // 1
    3.  
    4. // 2
    5. <script>
    6. 	import { getAddressList} from '@/api/add-house/add-house.js'
    7. 	export default {
    8.   	data () {
    9.   		return {
    10.   			provinceList: [], // 地区列表
    11.   			province: [], //省数组
    12.   			city: [], //市数组
    13.   			district: [], //区数组
    14.   			street: [], //街道数组
    15.   			mulSelect: [], //四级联动显示数组，该数组的值为[[province],[city],[district],[street]]
    16.   			mulSelectId: [] ,// 四级联动的id
    17.   			provinceId: 110000, //省的id
    18.   			cityId: 110101, //市的id
    19.   			districtId: 110101001,//区的id
    20.   			streetId: '', // 镇/街道id
    21.   			address:''
    22.   		};
    23.   	},
    24.     created() {
    25.   		this.getList('', '1')	
    26.   	},
    27.     methods: {
    28. 		// 获取地址列表
    29. 		async getList(id, level) {
    30. 			const data = {
    31. 				parentId: id,
    32. 				level: level
    33. 			}
    34. 			const res = await getAddressList(data)
    35. 			if (this.mulSelect.length !== 4) {
    36. 				if(level == 1) {
    37. 					this.province = res.data.data
    38. 					this.mulSelectId.push(res.data.data[0].id)
    39. 					this.mulSelect.push(this.province);			
    40. 					this.getList(this.provinceId, '2')
    41. 				} else if (level == 2) {
    42. 					this.city = res.data.data
    43. 					this.mulSelectId.push(res.data.data[0].id)
    44. 					this.mulSelect.push(this.city);
    45. 					this.getList(this.cityId, '3')
    46. 				} else if (level == 3) {
    47. 					this.district = res.data.data
    48. 					this.mulSelectId.push(res.data.data[0].id)
    49. 					this.mulSelect.push(this.district);
    50. 					this.getList(this.districtId, '4')
    51. 				}
    52. 				// } else if (level == 4) {
    53. 				// 	this.street = res.data.data
    54. 				// 	this.mulSelectId.push(res.data.data[0].id)
    55. 				// 	this.mulSelect.push(this.street);
    56. 				// }
    57. 			} else {
    58. 				if(level == 1) {
    59. 					this.mulSelectId[0] = id		
    60. 					this.getList(this.provinceId, '2')
    61. 				} else if (level == 2) {
    62. 					this.city = res.data.data
    63. 					this.cityId = res.data.data[0].id
    64. 					this.mulSelectId[0] = id
    65. 					this.mulSelect[1] = this.city;
    66. 					this.getList(this.cityId, '3')
    67. 				} else if (level == 3) {
    68. 					this.district = res.data.data
    69. 					this.districtId = res.data.data[0].id
    70. 					this.mulSelectId[1] = id
    71. 					this.mulSelect[2] = this.district;
    72. 					this.getList(this.districtId, '4')
    73. 				} else if (level == 4) {
    74. 					this.street = res.data.data
    75. 					this.streetId = res.data.data[0].id
    76. 					this.mulSelectId[2] = id
    77. 					this.mulSelectId[3] = this.streetId
    78. 					console.log(this.mulSelectId)
    79. 					this.mulSelect[3] = this.street;
    80. 				}
    81. 			}
    82. 		},
    83.     // 选中的地址发生改变时触发
    84. 		pickerChange(e) {
    85. 			console.log(e,'change')
    86. 			//什么都不选的话，e.detail.value的值为[null,null,null,null]
    87. 			//只选择省的话，e.detail.value的值为[数字,null,null,null]
    88. 			//只选择市的话，e.detail.value的值为[数字,数字,null,null]
    89. 			//所以获取e.detail.value的值先判断是否为null，如果为null则取值为0
    90. 			for(var i=0;idetail.value.length;i++){
    91. 				if(e.detail.value[i]===null){
    92. 					e.detail.value[i]=0;
    93. 				}
    94. 			}
    95. 			
    96. 			var s_province=this.mulSelect[0][e.detail.value[0]];//获取选中的省
    97. 			var s_city=this.mulSelect[1][e.detail.value[1]||0];//获取选中的市
    98. 			var s_district=this.mulSelect[2][e.detail.value[2]||0];//获取选中的区
    99. 			if(this.mulSelect[3].length !== 0) {
    100. 				console.log(this.mulSelect)
    101. 				var s_street=this.mulSelect[3][e.detail.value[3]||0];//获取选中的街
    102. 				this.address=s_province.fullname+s_city.fullname+s_district.fullname+s_street.fullname;
    103. 			} else {
    104. 				this.address=s_province.fullname+s_city.fullname+s_district.fullname
    105. 			}
    106.  
    107. 			//赋值显示在页面
    108. 		},
    109. 		// 地址改变触发
    110. 		colChange(e) {
    111. 			// console.log(e.detail);
    112. 			// console.log(this.mulSelect[0][e.detail.value])
    113. 			switch (e.detail.column){
    114. 				case 0://选择省
    115. 					this.mulSelect[1] =[]
    116. 					this.mulSelect[2] =[]
    117. 					this.mulSelect[3] =[]
    118. 					this.provinceId=this.mulSelect[0][e.detail.value].id;
    119. 					console.log(this.provinceId)
    120. 					this.getList(this.provinceId, e.detail.column+2 )
    121. 					
    122. 					break;
    123. 				case 1://选择市
    124. 					this.mulSelect[2] =[]
    125. 					this.mulSelect[3] =[]
    126. 					this.cityId = this.mulSelect[1][e.detail.value].id;
    127. 					this.getList(this.cityId, e.detail.column+2 )
    128. 					
    129. 					break;
    130. 				case 2://选择区
    131. 					this.mulSelect[3] =[]
    132. 					this.districtId = this.mulSelect[2][e.detail.value].id;
    133. 					this.getList(this.districtId, e.detail.column+2 )
    134. 					
    135. 					break;
    136. 				case 3://选择街道
    137. 					this.streetId = this.mulSelect[3][e.detail.value].id
    138. 					break;
    139. 				default:
    140. 					break;
    141. 			}
    142. 		},
    143.   }
    144. script>

  • 相关阅读:
    Spring自带的这11个工具类，真香！
    netty 底层的工作原理
    【Flask使用】全知识md文档，4大部分60页第3篇：状态cookie和session保持
    前端技术koa/egg和es6入门
    JavaScript——APIs
    Eclipse中集成Tomcat
    mysql索引
    Matlab：字符向量元胞数组
    poi判断excel单元格内容是否为日期
    Seata0.7.1配合nacos实现分布式事务
  • 原文地址：https://blog.csdn.net/Anorry/article/details/132787117