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
	},