uniapp实现村组数据多级联动

桃扇骨 2024-03-31 13:45 68阅读 0赞

![在这里插入图片描述][19ae9a1d23a94367bd93ccff639b0a7c.png]  
选择了村的数据才会有组的数据，下面为接口的返回格式  
![在这里插入图片描述][c886eca8b0844f69841614feb72049dd.png]  
首先是点击输入框 弹出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>

![在这里插入图片描述][e6f2f89bd3b74b748b931d270a2cfda3.png]  
下面是最主要的数据处理事件,由于村组的数据是在一个接口中，只是根据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
    	},

[19ae9a1d23a94367bd93ccff639b0a7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/11884034ae9847c8868abe27ac82c954.png
[c886eca8b0844f69841614feb72049dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/72996f4a1d114e9e85950a80b70ea28b.png
[e6f2f89bd3b74b748b931d270a2cfda3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/f062bd8ddc394ce19ab7b434a8b4d569.png