uniapp picker组件实现省市区三级联动效果

需求

1. 业务需求 数据从后台Ajax请求获取出来
2. 然后使用uniapp picker组件进行数据的渲染
3. 然后传递给后台的是省市区的code码拼接

实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2bkh3GJP-1628925415565)(https://z3.ax1x.com/2021/08/14/fysMex.png)]

uniapp代码如下

1. HTML部分

	<!-- vue HTML代码 -->
	<picker 
		mode="multiSelector" 
		@columnchange="bindMultiPickerColumnChange" 
        :value="addressIndex"
		:range="addressData">
		<view class="uni-input" @tap="defaultArea">
			{{addressText || "地区"}}
		</view>
	</picker>

2. JavaScript部分

import { listProvincesData } from "../../api/request.js";//这里是ajax请求获取省市区全部数据
export default {
    data(){
        return {
            provinces: [],//省份数据
			citys: [],//市级数据
			areas: [],//区级数据
			address: [],//全部数据
			addressData: [],
			addressIndex: [0, 0, 0],//省市区索引
			areaCode: [],//code 码
        }
    },
    onLoad(){
        	// 获取省市区数据
			listProvincesData().then(response => {
				this.provinces = response.data.filter(item => item.level === 1)
				this.citys = response.data.filter(item => item.level === 2 && item.pid === this.provinces[0].id);
				this.areas = response.data.filter(item => item.level === 3 && item.pid === this.citys[0].id);

				this.addressData[0] = this.provinces.map(item => item.name);
				this.addressData[1] = this.citys.map(item => item.name);
				this.addressData[2] = this.areas.map(item => item.name);

				this.address = response.data;
				// tips:如果是app的情况下，如果不加这个数据会加载不出来，小程序则没有这个问题
				this.$forceUpdate()
			});
    },
    methods:{
        
        	/**
			 * @function
			 * @description  picker组件切换地址的时候进行调用的函数
			 * **/
			bindMultiPickerColumnChange(e) {
				let val = e.detail.value;
				let column = e.detail.column;

				this.addressIndex[column] = val;

				if (column === 0) {
					this.citys = this.address.filter(item => item.level === 2 && item.pid === this.provinces[val].id);
					this.areas = this.address.filter(item => item.level === 3 && item.pid === this.citys[0].id);

					this.addressData[1] = this.citys.map(item => item.name);
					this.addressData[2] = this.areas.map(item => item.name);

					this.addressIndex.splice(1, 1, 0);
					this.addressIndex.splice(2, 1, 0);


				} else if (column === 1) {
					this.areas = this.address.filter(item => item.level === 3 && item.pid === this.citys[val].id);
					this.addressData[2] = this.areas.map(item => item.name);

					this.addressIndex.splice(2, 1, 0);
				} else if (column === 2) {
					this.addressIndex.splice(2, 1, val);
				}

				// let areaStr = "";
				// let data = [this.provinces, this.citys, this.areas];

				// this.areaCode = [];
				// this.addressIndex.forEach((item, index) => {
				//	areaStr += data[index][item].name;
				//	this.areaCode.push(data[index][item].id);
				// });
				// this.addressText = areaStr;
			},
        
        
        	/**
			 * @function
			 * @description  由于初始默认的时候，如果不进行下拉则没有值，同时进行数据的追寻，找到省市区所在位置
			 * **/
			defaultArea() {
				if (this.type === 'add' && this.areaCode.length === 0) {
					this.areaCode = [this.provinces[0].id, this.citys[0].id, this.areas[0].id];
					this.addressText = this.areaCode.map(item => this.address.find(ii => ii.id === item).name).join(',');
				} else {
					this.citys = this.address.filter(item => item.level === 2 && item.pid == this.areaCode[0]);
					this.areas = this.address.filter(item => item.level === 3 && item.pid == this.areaCode[1]);

					this.addressData[1] = this.citys.map(item => item.name);
					this.addressData[2] = this.areas.map(item => item.name);

					let index1 = this.provinces.findIndex(item => item.id == this.areaCode[0]);
					let index2 = this.citys.findIndex(item => item.id == this.areaCode[1]);
					let index3 = this.areas.findIndex(item => item.id == this.areaCode[2]);

					this.addressIndex = [index1, index2, index3];
				}
			},

    },
}

实现效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9yC1hfyZ-1628925415567)(https://z3.ax1x.com/2021/08/14/fy2oQg.gif)]