Only when the data of the village is selected, the data of the group will be available. The following
is the return format of the interface. First, click the input box to pop up the u-picker component. The main code is as follows:
<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>
The following is the most important data processing event. Since the data of the village group is in an interface, the data of the village group is only displayed according to the pid, and the data of 0 returning to the village is passed, and the data of 1 returning to the group is passed. I extracted the event separately. , because it can be used in the callback event of the popup component later.
//获取村组信息
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]);
});
},
Confirmed and canceled events
// 回调参数为包含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
},