uview2.0省市区联动,以前后端交互为例

具体思路的话,其一是需要先对组件的数据进行初始化,其二呢是需要在用户进行滚动的时候去进行请求,来返回具体的数据,这么一来的话,就需要写一个递归函数来处理相应的逻辑了,直接上代码

html 复制代码
<u-picker ref="uPicker" :show="areaShow" :columns="columns" @cancel='areaShow=false' @confirm='areaSelet'
			@change='change' :defaultIndex='[0,0,0]' keyName="area_name"></u-picker>
                        
javascript 复制代码
async getarealist(id = 0, index = 0) {
	this.article.address = ''
        if (index >= 3) return
	    const picker = this.$refs.uPicker
		const res = await getAreaList({
			parent_id: id
		})
	picker.setColumnValues(index, res.data)
	if (res.data.length !== 0) {
		this.getarealist(res.data[0].area_id, index + 1)
	}
},

由于我这边是编译到微信小程序中,由于微信小程序的一些限制,我这边采用的是导出组件实例,使用picker.setColumnValues对组件中的数据进行添加,如果是uniapp的话可以直接使用columns去进行初始化,这里替换一下就行,思路就是初始化地区id,以及index,这里的地区就不用过多说明了,我们这里定义的第一级id为0,至于index,就需要去具体说明了,这里的index是数据源的长度,因为在uview中,数据源是一个二维数组,子数组是每一项的具体数据,这里详细说明可以去查看uview的文档view-picker,同时这里的index也是出口,这是最主要的。 接下来就是要处理在滚动的时候进行请求下一级数据了,这里我们使用他的change事件来进行处理:

javascript 复制代码
change(e) {
	const {columnIndex} = e
	this.getarealist(e.value[columnIndex].area_id, columnIndex + 1)
}

这里我们先解构出来当前滚动的下标,以及当前项的地区id,然后再调用我们最开始写的递归函数,去请求,至于这里为什么要让columnIndex+1,是要去请求他的下一级,而第一个参数就是当前项的地区id,用来去请求下一级数据

相关推荐
福兮说3 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
郑州光合科技余经理4 小时前
海外版外卖加盟:总站与分站配送规则怎么分开管
java·开发语言·前端·后端·uni-app·php·ai编程
小呆呆6665 小时前
副业搞起来,小说,漫画,漫剧的成本优化思路
前端·后端·面试
Dovis(誓平步青云)5 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan5 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_6 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒6 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技6 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端
yivifu7 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub
默_笙8 小时前
🛴 从散件到整机:DeepAgents 与 Agent 身上预留的那些"插槽"(前置介绍)
前端·javascript