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

这篇具有很好参考价值的文章主要介绍了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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端Vue自定义简单通用省市区选择器picker地区选择器picker 收获地址界面模版

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月10日
    浏览(65)
  • 【uniapp】省市区下拉列表组件

    2024年04月11日
    浏览(46)
  • uniapp:H5定位当前省市区街道信息

    高德地图api,H5定位省市区街道信息。 由于uniapp的 uni.getLocation 在H5不能获取到省市区街道信息,所以这里使用高德的逆地理编码接口地址接口,通过传key和当前经纬度,获取到省市区街道数据。 这里需要注意的是: **高德地图API 申请的key,必须是WEB服务端** ,才可以使用逆

    2024年02月15日
    浏览(53)
  • 支付宝实现省市区三级联动my.multiLevelSelect(附带省市区js数据)

    可以供用户选择所在位置、喜好位置。可用于根据用户所选位置给用户提供该位置的特色美食,附近的电影院,周边环境等。 视频 支付宝省市区三级联动 图片 点击按钮button,让其弹框。用户可在弹框中选择位置,选中后让其显示在第三个view标签里 select 。 provinceAndCity.js数

    2024年02月09日
    浏览(102)
  • uniapp在H5获取当前定位信息不需要SDK可直接获取城市(包括经纬度省市区和市区编码)

    最近在做获取用户当前定位信息的时候,发现uniapp官方提供的uni.getLocation(OBJECT)兼容性并不是特别好,光注意事项都是密密麻麻一大堆,在实际使用场景下,效果并不理想,也不是很稳定。于是便重新封装了一下腾讯地图的一些东西,提高了下兼容度!下边我会把我用的封装

    2024年02月07日
    浏览(66)
  • Vue------实现省市区三级联动

    本篇将用,vue框架实现省市区三级联动 三个下拉框,分别代表省、市、区 下面的任务就是,分别绑定 省、市、区三个下拉框: 点击省会出现所有的省份 点击对应的省份,市下拉框会对应出现对应的市 点击市会出现所有的市 点击对应的市,区下拉框会对应出现对应的区。

    2023年04月24日
    浏览(72)
  • element ui 下拉菜单组件 结合springboot 实现省市区简易三级联动 动态查询 并修改地点的省市区

    目录 前言: 一.数据库表结构:  二.下拉菜单组件 2.1 效果展示 2.2下拉菜单的组件代码: 本篇博客,通过官网的学习,实现下拉菜单动态数据的传递与点击事件,如果只是按部就班的按照官网来,官网下拉菜单模板所提供的事件只能传死数据,很多博主都是照虎画猫,传递

    2024年02月12日
    浏览(76)
  • vue实现省市区三级联动地址选择组件

    昨天收到一个新的需求,需要选择地址,因此就要做一个省市区三级联动的组件来使用,在网上找了一些资源,然后进行了尝试,没想到就这么成功了!要记录一下方便后续使用。 效果如下:  下面就记录一下代码叭! 后面因为需要动态绑定,以及处理回显问题,就需要进

    2024年02月12日
    浏览(78)
  • 【JavaScript】原生js实现省市区联动效果

    😉博主:初映CY的前说(前端领域) ,📒本文核心:用原生js实现省市区联动 【前言】今日在复习省市县三级联动的时候,有点忘了原生的js应该怎么样处理省市县的联动,特此写下来再次复习下 1.获取相对应的DOM对象 2.写省市县接口获取到接口信息 3.写下change事件,有变化时调

    2023年04月24日
    浏览(53)
  • POI实现Excel省市区三级联动java实现

    2003版Excel 2007版Excel 时间校验2003版 数据校验2007版

    2024年02月06日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包