uniapp开发钉钉小程序--收货地址选择

tui-cascade-selection 级联选择 | ThorUI文档https://thorui.cn/doc/docs/thorui/tui-cascade-selection.html根据业务需求，地址选择需选择省-市-区-镇街-社区。uview组件中的选择器不满足设计需要，所以选择使用了 ThorUI文档组件库中的级联选择器组件。渲染数据很简单，这里不做过多的赘述，这里只说拿到数据对数据进行回显编辑问题。

对于数据回显，会用到文档中的defaultItemList这个属性。下面是根据需要自己组装数据过程。

1、将编辑之前的信息拿过来组装成默认数据格式：

onLoad(e) {
			const addressTypes = [{
					key: 'province',
					textKey: 'province',
					valueKey: 'provinceCode'
				},
				{
					key: 'city',
					textKey: 'city',
					valueKey: 'cityCode'
				},
				{
					key: 'district',
					textKey: 'district',
					valueKey: 'districtCode'
				},
				{
					key: 'street',
					textKey: 'street',
					valueKey: 'streetCode'
				},
				{
					key: 'village',
					textKey: 'village',
					valueKey: 'villageCode'
				}
			];
			
				let options = JSON.parse(decodeURIComponent(e.item))

                /**
                    自己的业务逻辑
                *****/
			
				uni.setNavigationBarTitle({
					title: '编辑地址'
				})

				if (options.street == '') {
					addressTypes.length = 4
				}
				if (options.village == '') {
					addressTypes.length = 5
				}


				addressTypes.forEach(type => {
					this.deafultAdrrList.push(this.createAddressObject(options, type.textKey, type.valueKey));
				});


		},

methods:{
    //组装数据
			createAddressObject(options, textKey, valueKey) {
				return {
					text: options[textKey],
					value: options[valueKey],
					subText: '',
					index: '',
					list: []
				};
			},
}

2、根据每一级的code获取每一层的数据并进行定位

openAddress() {
				this.show = true;

				//添加数据
				if (this.addresssArr.length == 0 && this.deafultAdrrList.length == 0) {
					this.getAddressList('');
				} else {
					//编辑数据
					this.getParentData('', 0, this.deafultAdrrList[0].text);


					for (let i = 0; i < this.deafultAdrrList.length; i++) {
						this.getParentData(this.deafultAdrrList[i].value, i + 1, this.deafultAdrrList[i].text);
					}

				}

			},
getParentData(value, type, text) {
				this.$get(getAddressListApi, {}, value).then(res => {
					if (res.code == 200) {
						let newRes = res.data.map(item => {
							return {
								text: item.name,
								value: item.code,
								subText: ''
							}
						})
						if (type == 0) {
							this.deafultAdrrList[0].list = newRes;
							let index = newRes.findIndex(item => (item.text == text));

							this.deafultAdrrList[0].index = index;

						} else if (type == 1) {
							this.deafultAdrrList[1].list = newRes;
							let index = newRes.findIndex(item => (item.text == text));

							this.deafultAdrrList[1].index = index;

						} else if (type == 2) {
							this.deafultAdrrList[2].list = newRes;
							let index = newRes.findIndex(item => (item.text == text));

							this.deafultAdrrList[2].index = index;

						} else if (type == 3) {
							this.deafultAdrrList[3].list = newRes;
							let index = newRes.findIndex(item => (item.text == text));

							this.deafultAdrrList[3].index = index;

						} else {
							this.deafultAdrrList[4].list = newRes;
							let index = newRes.findIndex(item => (item.text == text));

							this.deafultAdrrList[4].index = index;
						}
					}
				})
			},

3、如果需要重新选择上一层数据，则清空该层之后的数据

			changeAddress(e) {
				let code = e.value;
				let text = e.text;
				let layer = e.layer;

				let index = '';

				let val = ''


				//寄件地址
				switch (layer) {
					case 0:

						if (this.currentPage == 0 || this.currentPage == 1) {
							this.sysAddressBook.provinceCode = code;
							this.sysAddressBook.province = text;
							this.addresssArr.push(text);
						} else {

							this.resize()
							index = this.deafultAdrrList[0].list.findIndex(item => (item.text == text));

							this.deafultAdrrList[0].text = text;
							this.deafultAdrrList[0].value = code;
							this.deafultAdrrList[0].index = index

							this.sysAddressBook.provinceCode = code;
							this.sysAddressBook.province = text;
							this.addresssArr.push(text);

							this.deafultAdrrList.length = 1;

						}

						this.flag = false
						break;
					case 1:

						this.sysAddressBook.district = '';
						this.sysAddressBook.districtCode = '';
						this.sysAddressBook.street = '';
						this.sysAddressBook.streetCode = '';
						this.sysAddressBook.village = '';
						this.sysAddressBook.villageCode = '';

						this.sysAddressBook.cityCode = code;
						this.sysAddressBook.city = text;


						if (this.flag) {
							this.addresssArr = []
							for (let i = 0; i < layer; i++) {
								val = this.deafultAdrrList[i].text;
								this.addresssArr.push(val);
							}
						}


						this.addresssArr.push(text);


						break;
					case 2:

						this.sysAddressBook.street = '';
						this.sysAddressBook.streetCode = '';
						this.sysAddressBook.village = '';
						this.sysAddressBook.villageCode = '';


						this.sysAddressBook.districtCode = code;
						this.sysAddressBook.district = text;

						if (this.flag) {
							this.addresssArr = []
							for (let i = 0; i < layer; i++) {
								val = this.deafultAdrrList[i].text;
								this.addresssArr.push(val);
							}
						}
						this.addresssArr.push(text);

						break;
					case 3:

						this.sysAddressBook.village = '';
						this.sysAddressBook.villageCode = '';


						this.sysAddressBook.streetCode = code;
						this.sysAddressBook.street = text;


						if (this.flag) {
							this.addresssArr = []
							for (let i = 0; i < layer; i++) {
								val = this.deafultAdrrList[i].text;
								this.addresssArr.push(val);
							}
						}
						this.addresssArr.push(text);


						break;
					case 4:
						this.sysAddressBook.villageCode = code;
						this.sysAddressBook.village = text;


						if (this.flag) {
							this.addresssArr = []
							for (let i = 0; i < layer; i++) {
								val = this.deafultAdrrList[i].text;
								this.addresssArr.push(val);
							}
						}
						this.addresssArr.push(text);
						break;
					default:
						break;
				}

				this.addresssArr.join(' ');



				if (layer == 4) {
					this.receiveData = []
				} else {
					uni.hideLoading()


					this.$get(getAddressListApi, {}, code).then(res => {
						if (res.code == 200) {
							let newRes = res.data.map(item => {
								return {
									text: item.name,
									value: item.code
								}
							})
							switch (layer) {
								case 0:
									this.receiveData = newRes
									break;
								case 1:
									this.receiveData = newRes
									break;
								case 2:
									this.receiveData = newRes
									break;

								case 3:
									this.receiveData = newRes
									break;
								case 4:
									this.receiveData = newRes
									break;
								default:
									break;
							}
						} else {
							console.log(res.msg);
						}
					})
				}

			},

大概就是这样了，可能有点混乱，只做个参考吧~~~~~