首先拿到后台返回的数据结构如下
[
{
name: "一般行业",
value: "A",
child:[
{
name:"机关团体公司行号",
value:"A01",
child:[
value:"A01001",
name:"内勤人员（不参与生产作业）",
flag:'1'
]
}
]
},
{
name: "农牧业"
value: "B",
child:[
{
name:"农业",
value:"B01",
child:[
name:"农场经营者/负责人（不亲自作业）",
value:"B01001",
flag:"拒保"
]
},
{
name:"畜牧业",
value:"B02",
child:[
name:"畜牧场经营者（不亲自作业）",
value:"B02001",
flag:"2"
]
}
]
},
{
name: "渔业",
value: "C",
child:[
{
}
]
}
]
template：
<view class="input" type="text" placeholder="请选择职业类别">
<picker class="pickerList" mode="multiSelector"
:range="newCategotyDataList"
:value="multiIndex"
range-key="name"
@change="bindPickerChange"
@columnchange="pickerColumnchange">
<!-- <view>{{newCategotyDataList[0].name}}--{{newCategotyDataList[0].child[0].name}}--{{newCategotyDataList[0].child[0].child[0].name}}</view> -->
<view class="">{{select}}</view>
</picker>
</view>
data:
multiIndex:[0,0,0],
newCategotyDataList:[[],[],[]],
categoryArr:[],
select:"请选择职业类别",
selectObj:{}
获取数据并生成uni-app组件支持的数据格式
for(let i=0; i<this.categoryArr.length; i++){
// console.log(this.categoryArr[i].name);
this.newCategotyDataList[0].push(this.categoryArr[i].name);
}
for(let i=0; i<this.categoryArr[0].child.length; i++){
// console.log(this.categoryArr[0].city[i].name)
this.newCategotyDataList[1].push(this.categoryArr[0].child[i].name);
}
for(let i=0; i<this.categoryArr[0].child[0].child.length; i++){
// console.log(this.categoryArr[0].city[0].area)
this.newCategotyDataList[2].push(this.categoryArr[0].child[0].child[i]);
}
绑定picker 组件事件
pickerColumnchange(e){
// 第几列滑动
// console.log(e.detail.column);
// 第几列滑动的下标
// console.log(e.detail.value)
// 第一列滑动
if(e.detail.column === 0){
this.multiIndex[0] = e.detail.value
// console.log('第一列滑动');
// this.newCategotyDataList[1] = [];
this.newCategotyDataList[1] = this.categoryArr[this.multiIndex[0]].child.map((item,index)=>{
// console.log(item)
return item.name
})
// console.log(this.multiIndex)
if(this.categoryArr[this.multiIndex[0]].child.length === 1){
this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].child[0].child.map((item,index)=>{
// console.log(item)
return item
})
}else{
this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].child[this.multiIndex[1]].child.map((item,index)=>{
// console.log(item)
return item
})
}
// 第一列滑动 第二列 和第三列 都变为第一个
this.multiIndex.splice(1, 1, 0)
this.multiIndex.splice(2, 1, 0)
}
// 第二列滑动
if(e.detail.column === 1){
this.multiIndex[1] = e.detail.value
// console.log('第二列滑动');
// console.log(this.multiIndex)
this.newCategotyDataList[2] = this.categoryArr[this.multiIndex[0]].child[this.multiIndex[1]].child.map((item,index)=>{
// console.log(item)
return item
})
// 第二列 滑动 第三列 变成第一个
this.multiIndex.splice(2, 1, 0)
}
// 第三列滑动
if(e.detail.column === 2){
this.multiIndex[2] = e.detail.value
// console.log('第三列滑动')
// console.log(this.multiIndex)
}
},
bindPickerChange(e){
this.multiIndex = e.detail.value;
// 数组内的下标
// console.log(this.multiIndex);
// 获取一级类目
// console.log(this.newCategotyDataList[0][this.multiIndex[0]])
// 获取二级类目
// console.log(this.newCategotyDataList[1][this.multiIndex[1]])
// 获取三级类目
// console.log(this.newCategotyDataList[2][this.multiIndex[2]])
this.select = `${this.newCategotyDataList[2][this.multiIndex[2]].name}`;
this.selectObj=this.newCategotyDataList[2][this.multiIndex[2]];
},
