行业知识
uniapp 使用 uni-data-picker级联选择器,自定义展示,uni小程序
2026-11-05 14:06:52
来源:互联网转载
uniapp 使用 uni-data-picker级联选择器,多级选择,自定义展示
先看效果是不是你要的效果
页面组件
接口index.php/tags-301.html" >数据
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); // 选中的值}
上一篇:优秀网络文案怎么写?
下一篇:18款超看好纯css 标题栏