uniapp实现村组数据多级联动

选择了村的数据才会有组的数据，下面为接口的返回格式

首先是点击输入框 弹出u-picker组件，下面是主要代码：

<view class="form-item d_flex a_c" @click="show = true" >
	<view class="label d_flex a_c">
		村组
		<view class="req red">*</view>
	</view>
	<view class="int flex">
		<view class="city-box" v-if="fieldValue">{
    
    {
    
    fieldValue}}</view>
		<view class="city-box" style="color: rgb(128, 128, 128);" v-else>点击选择</view>
	</view>
	<text class="iconfont"></text>
</view>

<u-picker 
	title="请选择村组" 
	:show="show" 
	ref="uPicker" 
	:columns="options" 
	@confirm="confirm" 
	@change="changeHandler"
	@cancel="cancel"
	immediateChange
	keyName="name"
></u-picker>

下面是最主要的数据处理事件,由于村组的数据是在一个接口中，只是根据pid展示村组的数据,传0返村的数据，传1返组的数据，我把事件单独抽取了出来，因为在后面的弹出组件回调事件中能用到。

//获取村组信息
async getcList() {
    
    
	//一开始展示0和1的村组数据
	this.getGroup(0)
	this.getGroup(1)
},
// 实现村组多列联动
async getGroup(pid) {
    
    
	this.options[0] = []
	this.options[1] = []
	let res = await this.$http.get('/house/villages', {
    
    
		pid: pid
	})
	if(res.code == 0) {
    
    
		if(pid == 0) {
    
    
			this.options[0] = res.data
		} else if(pid == 1) {
    
    
			this.options[1] = res.data
		} else {
    
    
			this.options[1] = res.data
		}
	}
},
//这是我点击组件会发生改变的事件
async changeHandler(e) {
    
    
	const {
    
    
		columnIndex,
		value,
		values, // values为当前变化列的数组内容
		index,
		picker = this.$refs.uPicker
	} = e
	await this.getGroup(e.value[0].id)
	//当第一列值发生变化时，变化第二列(后一列)对应的选项
	uni.$u.sleep(100).then(() => {
    
    
		picker.setColumnValues(1, this.options[1]);
	});
},

确认和取消的事件

	// 回调参数为包含columnIndex、value、values
	confirm(e) {
    
    
		this.fieldValue = e.value[0].name + '/' + e.value[1].name
		this.form.village_id = e.value[0].id;
		this.form.group_id = e.value[1].id;
		this.getGroup(0)
		this.getGroup(1)
		this.show = false
	},
	cancel() {
    
    
		this.getGroup(0)
		this.getGroup(1)
		this.show = false
	},