uniapp 使用 uni-data-picker级联选择器，自定义展示，uni小程序

uniapp 使用 uni-data-picker级联选择器，多级选择，自定义展示

先看效果是不是你要的效果

页面组件

<uni-data-picker placeholder="请选择" v-model="jiduvalue" :localdata="jidurange" @change="changejidu" :step-searh="false" :preload="true"></uni-data-picker>

接口数据

jiduvalue:0,jidurange: [],data: [{year: '2022',  value: 1,  children: [{ name: '2022秋季', value: 1.1, cjsysid: '' },{ name: '2022夏季', value: 1.2, cjsysid: '' },  ],},{  year: '2023',  value: 2,  children: [{ name: '2023秋季', value: 2.1, cjsysid: '' },{ name: '2023夏季', value: 2.2, cjsysid: '' },  ],},]

接口数据以及处理方式

<----------------------------------------------->数据处理console.log(res.data.data)let fenji = res.data.data_this.jidurange = fenji.map((item, index) => ({  text: item.year,  value: index + 1,  children: item.children.map((child, childIndex) => ({    text: child.name,    value: parseFloat(`${index + 1}.${childIndex + 1}`),    cjsysid: child.sysid  }))}));

选中后的数据处理，拿到选中的值

changejidu(e){console.log(e.detail.value)const selec = e.detail.value[1].text const matchedObject = this.jidurange.find(obj =>   obj.children.find(fruit => fruit.text === selec) );const matct = matchedObject.children.find(obj => obj.text === selec); console.log(matct);  //  选中的值}

来源地址：https://blog.csdn.net/m0_57611486/article/details/134310005