uniapp 使用 uni-data-picker级联选择器,自定义展示,uni小程序
温馨提示:这篇文章已超过395天没有更新,请注意相关的内容是否还可用!
uniapp 使用 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); // 选中的值
}
免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

