本文只贴最终实现代码不作任何解释,如果你不太理解此代码,请先阅读我上篇文章点击穿越
结合服务端返回json(这个json你要跟后台约束好,前端进行处理)实现三级联动效果,最终代码
Page({
data: {
columns: [],
one: [],
two: {},
three: {}
},
onLoad() {
//模拟后台返回json
let json = [
[
{ id: 111, fatherId: 0, 'name': '杭州' },
{ id: 222, fatherId: 0, 'name': '宁波' }
],
[
{ id: 11100, fatherId: 111, 'name': '国杭州' },
{ id: 22201, fatherId: 111, 'name': '国宁波' },
{ id: 11102, fatherId: 222, 'name': '中杭州' },
{ id: 22203, fatherId: 222, 'name': '中宁波' },
{ id: 33304, fatherId: 222, 'name': '中温州' }
],
[
{ id: 1110000, fatherId: 11100, 'name': 'aaa' },
{ id: 2220101, fatherId: 11100, 'name': 'bbb' },
{ id: 1110102, fatherId: 22201, 'name': 'ccc' },
{ id: 2220103, fatherId: 22201, 'name': 'ddd' },
{ id: 3330104, fatherId: 22201, 'name': 'eee' },
{ id: 1110205, fatherId: 11102, 'name': 'fff' },
{ id: 2220206, fatherId: 11102, 'name': 'ggg' },
{ id: 3330207, fatherId: 11102, 'name': 'hhh' },
{ id: 1110308, fatherId: 22203, 'name': 'www' },
{ id: 2220309, fatherId: 22203, 'name': 'ttt' },
{ id: 3330310, fatherId: 22203, 'name': 'yyy' },
{ id: 1110411, fatherId: 33304, 'name': 'jjj' },
{ id: 2220412, fatherId: 33304, 'name': 'kkk' },
{ id: 3330413, fatherId: 33304, 'name': 'ppp' }
]
]
//构造第一列
let one = json[0]
//构造第二列
let two = json[1]
let twoResult = {}
for (let i = 0; i < two.length; i++) {
for (let j = 0; j < one.length; j++) {
let fatherObj = one[j]
let childObj = two[i]
if (fatherObj.id == childObj.fatherId) { //说明是一类
if (twoResult[fatherObj.name] == undefined) { //没有初始化,可直接赋值
twoResult[fatherObj.name] = [childObj]
} else { //已经初始化,直接追加新值
twoResult[fatherObj.name][twoResult[fatherObj.name].length] = childObj
}
}
}
}
//构造第三列,同理,跟构造第二列一样玩法
let three = json[2]
let threeResult = {}
for (let k = 0; k < three.length; k++) {
for (let n = 0; n < two.length; n++) {
let fatherObj = two[n]
let childObj = three[k]
if (fatherObj.id == childObj.fatherId) {
if (threeResult[fatherObj.name] == undefined) {
threeResult[fatherObj.name] = [childObj]
} else {
threeResult[fatherObj.name][threeResult[fatherObj.name].length] = childObj
}
}
}
}
this.setData({
columns: [
{
values: one, //可以是数组,或者对象数组
className: 'column1' //选择器的第一列
},
{
values: twoResult[one[0].name], //默认选中two对象中的第一项
className: 'column2', //选择器的第二列
},
{
values: threeResult[twoResult[one[0].name][0].name], //默认选中three对象中的第一项
className: 'column3', //选择器的第三列
}
],
one: one,
two: twoResult,
three: threeResult
})
},
onConfirm(event) {
let value = event.detail.value
//将选中的文字和对应的id拿出来使用
wx.showModal({
title: '',
content: '您选中了“' + value[0].name + ',' + value[1].name + ',' + value[2].name + '”, id为“'
+ value[0].id + ',' + value[1].id + ',' + value[2].id + '”',
showCancel: false
})
},
onChange(event) {
let one = this.data.one
let two = this.data.two
let three = this.data.three
//在change 第一列的时候,动态更改第二列的数据
//setColumnValues是vant自带的实例方法
//第一个参数是列数,从0开始;第二个参数是第二列应该显示的数据
let picker = event.detail.picker
let value = event.detail.value
let index = event.detail.index
picker.setColumnValues(1, two[value[0].name]);
//此处vant-picker有一个bug,当只滑动第一级时,返回的value数据是错误的,需要我们自己根据第二级计算,去获取第三级数据
if (index == 0) {
picker.setColumnValues(2, three[(two[value[0].name][0]).name]);
} else {
picker.setColumnValues(2, three[value[1].name]);
}
},
onCancel() {
}
})