数据大概得结构:
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.datathis.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;},