# 前言
使用
Vant
的picker
级联选择返回多个字段数据信息
# 官方文档
# 修改onConfirm
事件
//data返回数据数组,index返回索引数组
onConfirm(data,index)
{
let vm = this;
let str = ""; // 呈现页面显示 /xxx/xxx/xxx
for(let i = 0;i < data.length; i ++){
if(i>0){
str += "/" + data[i];
}
else{
str +=data[i];
}
}
// 获取一级分类
vm.form.oneCategoryId = vm.columns[index[0]].id;
vm.form.oneCategoryName = vm.columns[index[0]].name;
// 获取二级分类
if(vm.columns[index[0]].children !== undefined){
vm.form.twoCategoryId =vm.columns[index[0]].children[index[1]].id;
vm.form.twoCategoryName =vm.columns[index[0]].children[index[1]].Name;
}
this.form.kind = str;
this.showPicker = false
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<van-field readonly clickable placeholder="一二级分类" :value="form.kind" @click="showPicker = true" />
<van-popup v-model="showPicker" position="bottom" :duration="0">
<van-picker show-toolbar title="分类选择" :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" @change="onChange" />
</van-popup>
1
2
3
4
2
3
4
# 控制台debugger
调试
- 数据源
- 效果