uni-app实现三级联动

首先拿到后台返回的数据结构如下

[
        {
          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]];
            },