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

小刘码秃了2023-11-18 14:45

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

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，用来去请求下一级数据