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); // 选中的值 }