选择了村的数据才会有组的数据,下面为接口的返回格式
首先是点击输入框 弹出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
},