uniapp的picker标签实现多级联动

 <picker class="form-item-picker" mode="multiSelector" 
      //设置picker打开展示的内容列
	  :range="newCategotyDeptList"
      //控制选择行的下标 
	  :value="multDeptIndex"
      //设置picker内容展示的是name的值
	  range-key="name"
      //监听每列的滚动
	  @columnchange="pickerColumnDept"
      //选择picker的一项确定选择按钮
	  @change="bindPickerChange"  >
	  <view class="classes">
	     <view class="uni-input">{{ item.facultyName?item.facultyName:'请选择'}}</view>
		 <image src="/static/arrow.png" mode=""></image>
	  </view>
 </picker>

 声明的值

data(){
  return{
    multDeptIndex:[0,0],
    newCategotyDeptList:[[],[]],
	//获取数据的列表
	deptList:[]    
  }
} 

 首先设置picker应该展示的值

this.deptList=data;
let sunz;
for(let i=0;i<data.length;i++){ 
    for(let t=0;t<data[i].children.length;t++){
    	let son=data[i].children;
		sunz=data[i].children;
		this.newCategotyDeptList[0].push({id:son[t].id,name:son[t].deptName}) 
	}
} 
for(let j=0;j<sunz[0].children.length;j++){
	let sz=sunz[0].children; 
	this.newCategotyDeptList[1].push({id:sz[j].id,name:sz[j].deptName})
}

//老师院系部门的三级联动触发
bindPickerChange(e){ 
 if(this.isTeacher){
	this.multDeptIndex=e.detail.value;
	this.parentListInfo[0].facultyName=`${this.newCategotyDeptList[1[this.multDeptIndex[1]].name}`;
this.parentListInfo[0].facultyId=`${this.newCategotyDeptList[1[this.multDeptIndex[1]].id}`;
	this.$set(this.parentListInfo[0], 'facultyName',this.parentListInfo[0].facultyName)
	this.$set(this.parentListInfo[0], 'facultyId',this.parentListInfo[0].facultyId)
			 console.log('我是获取到的最终值');
			 console.log(this.parentListInfo[0]);
}

滚动事件触发 

	pickerColumnDept(e){
		console.log(e);
		if(e.detail.column==0){
			this.multDeptIndex[0]=e.detail.value;
			let init =this.deptList[0]; 
			this.newCategotyDeptList[1]=this.deptList[0].children[this.multDeptIndex[0]].children.map((item,index)=>{ 
				return {name:item.deptName,id:item.id};
			})
			//当根据第一列选中的内容，查出第二列的数据，如果第二列数据选择的是第二行内容，
			//怎么让他复位，可以通过切换this.multDeptIndex值的方式，此值绑定的是picker的value就相当于选中行的下表值
			//从而修改multDeptIndex即可控制选中第几行
			/*注意有坑**当选择第二列已经滚动到第二行时，滚动第一列时首先查出第二列的内容，
			 然后再将第二列本来已经滚动到大于第一行的位置复位为第一行
			 注意：由于滚动第一行时是需要查出第二行的内容所以中间有一个第二列内容为空的空挡，所以因为这个空挡让本该
			 this.multDeptIndex的值的第二个下标是大于0（代表第二列下标处于的位置处于第一行为0）的这个下表变为了等于0，
			 但是picker的动作却保存在了第大于第一行的位置，所以解决方式
			 注意：声明一个公共值接收滚动第二列时的下标位置，当滚动第一列时查询新的第二列数据后先执行动作让查出来的值恢复
			 在picker大于第一行的位置，就是将公共下标值赋予以下this.multDeptIndex然后等待100毫秒后，再赋给第二列的下标值为0，
			 这样就正确完成了第二列的值滚到第一行
			 */
			this.$set(this.newCategotyDeptList[1]) 
			this.multDeptIndex.splice(1,1,this.pickerInitR)
			let timern=setTimeout(()=>{					
				this.multDeptIndex.splice(1,1,0)
				this.multDeptIndex=this.multDeptIndex;
				clearTimeout(timern);
			},100) 
		}else{
			this.pickerInitR=e.detail.value;
			this.multDeptIndex[1]=e.detail.value;
		}
	},

借鉴了,注意此组件有bug，只能实现两级联动，所以可以使用自己封装的组件推荐地址

小程序3级级联选择器 - DCloud 插件市场

uni-app实现三级联动 - 简书