uni小程序中 picker选择器的使用，如省市区样式的多列选择实现

uni小程序中 picker选择器的使用，如省市区的样式 多列选择器

uni.app���带的滚动选择器。一共有五种方式，通过mode来区分,分别是：普通选择器、多列选择器、日期选择器、事件选择器和省市区选择器。 本文展示 多列选择器的使用

对你有用就给个赞。。。赞。。。赞。。

1：先看效果

这里只显示选中的第二级数据，如果显示其他级的数据，填写下标即可

  // 这里只展示下标1的数据，根据需求选择增加{{ multiArray[1][multiIndex[1]] }}  

变量定义

multiIndex: [0, 0], // 选择器默认值multiArray:[],  sendDate:{sysid:''},typedata:[]

接口数据格式，数据处理方式

this.typedata = [{year: '2022',  value: 1,  children: [{ name: '2022秋季', value: 1.1, sysid: '' },{ name: '2022夏季', value: 1.2, sysid: '' },  ],},{  year: '2023',  value: 2,  children: [{ name: '2023秋季', value: 2.1, sysid: '' },{ name: '2023夏季', value: 2.2, sysid: '' },  ],},]var column1 = [];var column2 = [];this.multiArray = [];this.typedata.forEach((item, index) => {    column1.push(item.year);if (index == 0) {item.children.forEach((item2, index2) => {column2.push(item2.name);if (index2 == 0) {this.sendDate.sysid = item2.sysid;// console.log('获取的数据',item2)}});}});this.multiArray.push(column1);this.multiArray.push(column2);

滚动时选中的数据变化处理

bindMultiPickerColumnChange(e) {console.log('修改的列为：' + e.detail.column + '，当前行为：' + e.detail.value);this.multiIndex[e.detail.column] = e.detail.value;var column2 = [];// console.log('this.multiIndex[0]',this.multiIndex[0]); //第一列的当前行// console.log('this.multiIndex[1]',this.multiIndex[1]); //第二列的当前行 this.typedata.forEach((item, index) => {// console.log('item',item)if (index == this.multiIndex[0]) {item.children.forEach((item2, index2) => {column2.push(item2.cjname);if (index2 == this.multiIndex[1]) {this.sendDate.sysid = item2.sysid;// console.log('获取的数据',item2)}//拖动第一列后第二列对应的数据行数小于拖动前第二列的当前行if (this.multiIndex[1] > item.children.length-1) {this.sendDate.sysid = item.children[0].sysid;//第二列的行回到第一行this.multiIndex.splice(1, 1, 0);}});}});this.multiArray[1] = column2;this.$forceUpdate();  // 重新渲染},btnevt(){console.log(this.sendDate)},