小工具知识网

当前位置: 首页 > 行业知识 > uniapp 使用 uni-data-picker级联选择器,自定义展示,uni小程序

行业知识

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 标题栏