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

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

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

页面组件

1.                 <uni-data-picker placeholder="请选择"
2.                         v-model="jiduvalue"
3.                         :localdata="jidurange"
4.                         @change="changejidu"
5.                         :step-searh="false"
6.                         :preload="true">
7.                 </uni-data-picker>
9.                

复制代码

接口数据

1.                 jiduvalue:0,
2.                 jidurange: [],
3.                 data: [
4.                         {
5.                         year: '2022',
6.                           value: 1,
7.                           children: [
8.                                 { name: '2022秋季', value: 1.1, cjsysid: '' },
9.                                 { name: '2022夏季', value: 1.2, cjsysid: '' },
10.                           ],
11.                         },
12.                         {
13.                           year: '2023',
14.                           value: 2,
15.                           children: [
16.                                 { name: '2023秋季', value: 2.1, cjsysid: '' },
17.                                 { name: '2023夏季', value: 2.2, cjsysid: '' },
18.                           ],
19.                         },
20.                 ]

复制代码

接口数据以及处理方式

1.        
2.                
3.                 <----------------------------------------------->
4.                 数据处理
5.                         console.log(res.data.data)
6.                         let fenji = res.data.data
7.                         _this.jidurange = fenji.map((item, index) => ({
8.                           text: item.year,
9.                           value: index + 1,
10.                           children: item.children.map((child, childIndex) => ({
11.                             text: child.name,
12.                             value: parseFloat(`${index + 1}.${childIndex + 1}`),
13.                             cjsysid: child.sysid
14.                           }))
15.                         }));
18.        

复制代码

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

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

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。