uniapp picker mode=“multiSelector“ 实现省市区三级联动-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp picker mode=“multiSelector“ 实现省市区三级联动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用的数据如下格式：

[
    {
        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>

文章来源地址https://www.toymoban.com/news/detail-501930.html

<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
				}
			},

        }

    }

到了这里，关于uniapp picker mode=“multiSelector“ 实现省市区三级联动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！