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>
           

1. 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)]