uniapp 使用 uni-data-picker级联选择器，自定义展示，uni小程序
uniapp 使用 uni-data-picker级联选择器，多级选择，自定义展示先看效果是不是你要的效果
https://img-blog.csdnimg.cn/3680369be38f4f6c9b1363c4b6c2e952.jpeg#pic_center
页面组件
<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.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);//选中的值
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]