数据大概得结构:
html:
<view class="invite"> <u-cell title="点击选则" isLink :value="value" @click="shows=true"></u-cell> <u-picker :show="shows" ref="uPicker" :columns="columns" @confirm="confirm" @cancel="shows=false" @change="changeHandler"></u-picker> </view>
js:
shows: false, columns: [], origiData: [], value: "",
async branchAppov() { const res = await branchAppov() this.origiData = res.data this.handelData(); }, //初始化开始数据 handelData() { // console.log(this.origiData.value)) let sheng = []; let shi = []; let qu = []; this.origiData.forEach(item => { sheng.push(item.name); // 设置出初始化的数据 if (item.name == '董事会') { item.children.forEach(child => { shi.push(child.name); if (child.name == '项目部') { child.children.forEach(el => { qu.push(el.name); }); } }); } }); this.columns.push( JSON.parse(JSON.stringify(sheng)), JSON.parse(JSON.stringify(shi)), JSON.parse(JSON.stringify(qu)) ); }, changeHandler(e) { console.log(e, 333); const { columnIndex, value, values, // values为当前变化列的数组内容 index, // 微信小程序无法将picker实例传出来,只能通过ref操作 picker = this.$refs.uPicker } = e; // 当第一列值发生变化时,变化第二列(后一列)对应的选项 if (columnIndex == 0) { // console.log(value) // picker为选择器this实例,变化第二列对应的选项 this.origiData.forEach(item => { if (value[0] == item.name) { let shi = []; let flag = item.children[0]; if(flag == undefined){ picker.setColumnValues(1, shi); picker.setColumnValues(2, []); return } item.children.forEach((val, ol) => { shi.push(val.name); if (shi[0] == flag.name) { //设置默认开关(选择省份后设置默认城市) flag = ''; let qu = []; val.children.forEach(vol => { qu.push(vol.name); }); picker.setColumnValues(2, qu); } }); picker.setColumnValues(1, shi); } }); } //当第二列变化时,第三列对应变化 if (columnIndex == 1) { this.origiData.forEach(item => { if (value[0] == item.name) { let shi = []; item.children.forEach((val, ol) => { shi.push(val.name); if (value[1] == val.name) { let qu = []; val.children.forEach(vol => { qu.push(vol.name); }); picker.setColumnValues(2, qu); } }); } }); } }, // 确认选中的数据 confirm(e) { console.log('confirm', JSON.stringify(e)); this.value = e.namae[0] + e.namae[1] + e.namae[2] this.shows = false; },