uview2.x u-picker省市区三级联动
<u-picker
ref="addressPicker"
:show="showAddressPicker"
:columns="adsColumnsData"
@confirm="adsConfirm"
@cancel="showAddressPicker = false"
@change="changeAddress"
></u-picker>
// 接口数据结构
data() {
return {
adsData: [],
adsColumnsData: [],
showAddressPicker: false,
form: {
address: ''
}
}
}
// 初始化
async init() {
const { data } = await fetchAreaList()
this.adsData = data
// 赋初值
this.adsColumnsData[0] = this.adsData.map((e) => {
return e.name
})
this.adsColumnsData[1] = this.adsData[0].children.map((e) => {
return e.name
})
this.adsColumnsData[2] = this.adsData[0].children[0].children.map((e) => {
return e.name
})
const picker = this.$refs.addressPicker
picker.setColumns(this.adsColumnsData)
},
// 选择改变
changeAddress(e) {
const {
columnIndex,
value,
values,
index,
indexs,
picker = this.$refs.addressPicker,
} = e
// 改变第一项
if (columnIndex === 0) {
let items = this.adsData[index].children.map((e) => {
return e.name
})
picker.setColumnValues(1, items)
items = this.adsData[index].children[0].children.map((e) => {
return e.name
})
picker.setColumnValues(2, items)
}
// 改变第二项
if (columnIndex === 1) {
let items = this.adsData[indexs[0]].children[index].children.map(
(e) => {
return e.name
}
)
picker.setColumnValues(2, items)
}
},
// 确认选择
adsConfirm(e) {
const { indexs, values, value } = e
this.form.address = value.join('-')
this.showAddressPicker = false
},