uniapp制作h5小程序中双列下拉查询
<view class="cu-form-group">
<view class="title">地址</view>
<picker mode="multiSelector" @change="MultiChange" @columnchange="MultiColumnChange"
:value="multiIndex" :range="multiArray">
<view class="picker" v-if="multiArray[0] && istrue == true">
{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}}
</view>
<view class="picker" v-else>
请选择地址
</view>
</picker>
</view>
data:
// ---------
multiArray: [],
firstnoe: "",
firPull: [],
secPull: [],
multiIndex: [0, 0],
istrue: false,
onShow() {
this.getevent()
},
// --------
MultiChange(e) {
console.log(3)
// 选择了
this.istrue = true
this.multiIndex = e.detail.value
this.submit.place = this.secPull[this.multiIndex[1]].name
console.log(this.submit.place)
},
async MultiColumnChange(e) {
let data = {
multiArray: this.multiArray,
multiIndex: this.multiIndex
};
data.multiIndex[e.detail.column] = e.detail.value;
this.tourName = this.firPull[data.multiIndex[0]]
await this.getTower_name(this.firPull[data.multiIndex[0]])
this.multiArray = data.multiArray;
this.multiIndex = data.multiIndex;
console.log(this.multiArray)
this.$forceUpdate()
},
// 根据楼层获取展厅
async getTower_name(name) {
var arr = []
var that = this
await $api.getTower_name({
tower: name
}).then(res => {
that.secPull = res.content
res.content.forEach(item => {
arr.push(item.name)
// this.$set(this.multiArray[1],this.multiArray[1],arr);
})
that.multiArray[1] = arr
})
return arr
},
getevent() {
$api.geteventType().then(res => {
console.log(res)
this.examinationTypeArray = res.data
// 设定一个默认事件
if (this.examinationTypeArray.length != 0) {
this.examinationTypeIndex = 0;
this.examinationTypeArrayType = this.examinationTypeArray[this.examinationTypeIndex]
.typeName
this.submit.eventType = this.examinationTypeArray[this.examinationTypeIndex].id
}
})
},