uniapp picker mode=“multiSelector“ 实现省市区三级联动

最新推荐文章于 2024-09-20 19:53:42 发布

清音啊

最新推荐文章于 2024-09-20 19:53:42 发布

阅读量1.8k

点赞数 1

分类专栏： uniapp 前端文章标签： uni-app

本文链接：https://blog.csdn.net/qq_38839887/article/details/131306985

版权

前端同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

uniapp

20 篇文章 0 订阅

订阅专栏

文章描述了一个Vue组件的使用，该组件用于处理多级地址选择，如省份-城市-区县。数据以特定格式存储，通过API获取初始省份数据，并在用户选择时动态更新城市和区县列表。组件监听change和columnchange事件以响应用户操作。

摘要由CSDN通过智能技术生成

使用的数据如下格式：

[
    {
        label:'北京市',
        value:'1',
        children:[
            {
                label:'北京市',
                value:'5026',
                children:[
                    {
                        label:'东城区',
                        value:'37',
                    },
                    {
                        label:'西城区',
                        value:'38',
                    }
                ]
            }
        ]
    }
]

<picker mode="multiSelector" :value="multiIndex" :range="newAddressList" range-key="label" @change="pickerChange" @columnchange="pickerColumnchange">
	<view class="uni-input">
		{{newAddressList[0][multiIndex[0]].label}}-{{newAddressList[1][multiIndex[1]].label}}-{{newAddressList[2][multiIndex[2]].label}}
	</view>
</picker>

<script>
	
	export default {
		data() {
			return {
				oldAddressList: [],
				newAddressList:[
					[],[],[]
				],
				multiIndex: [0,0,0]
            }
		},
        mounted() {
			// 初始化省份数据
			// this.handleProvinceChange(0);
			var that = this;
			var url = '你的接口';
			var data = {
				
			}
			that.util.asynRequest(url, data, 'post',
			function(res) {
				console.log(res.data);
				that.oldAddressList = res.data;
				that.initAddress();
			},
			function(err) {
				console.log(JSON.stringify(err));
				that.util.showToast(err.message);
			})
		    
		},
        methods: {
			initAddress(){
				this.newAddressList[0] = this.oldAddressList.map((item,index)=>{
					// console.log('item:',item);
					var obj = {
						label:item.label,
						value:item.value
					}
					return obj
				})
				this.newAddressList[1] = this.oldAddressList[this.multiIndex[0]].children.map((item,index)=>{
					// console.log('item:',item);
					var obj = {
						label:item.label,
						value:item.value
					}
					return obj
				})
				this.newAddressList[2] = this.oldAddressList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
					// console.log('item:',item);
					var obj = {
						label:item.label,
						value:item.value
					}
					return obj
				})
				
				console.log('this.newAddressList:',this.newAddressList);
			},
			pickerChange(e){
				console.log('pickerChange:',e);
			},
			pickerColumnchange(e){
				console.log('pickerColumnchange:',e);
				// 第几列滑动
				// console.log(e.detail.column);
				// 第几列滑动的下标
				// console.log(e.detail.value)
				// 第一列滑动
				if(e.detail.column === 0){
					this.multiIndex[0] =  e.detail.value;
					
					this.newAddressList[1] = this.oldAddressList[this.multiIndex[0]].children.map((item,index)=>{
						// console.log('item:',item);
						var obj = {
							label:item.label,
							value:item.value
						}
						return obj
					})
					this.newAddressList[2] = this.oldAddressList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
						// console.log('item:',item);
						var obj = {
							label:item.label,
							value:item.value
						}
						return obj
					})
					
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				if(e.detail.column === 1){
					this.multiIndex[1] =  e.detail.value
					this.newAddressList[2] = this.oldAddressList[this.multiIndex[0]].children[this.multiIndex[1]].children.map((item,index)=>{
						// console.log('item:',item);
						var obj = {
							label:item.label,
							value:item.value
						}
						return obj
					})
					
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				if(e.detail.column === 2){
					this.multiIndex[2] =  e.detail.value
				}
			},

        }

    }