首先拿到后台返回的数据结构如下
[
{
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:
{{select}}
data:
multiIndex:[0,0,0],
newCategotyDataList:[[],[],[]],
categoryArr:[],
select:"请选择职业类别",
selectObj:{}
获取数据并生成uni-app组件支持的数据格式
for(let i=0; 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]];
},