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: '' },
],
},
]
接口数据以及处理方式文章来源:https://www.toymoban.com/news/detail-752775.html
<----------------------------------------------->
数据处理
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
}))
}));
选中后的数据处理,拿到选中的值文章来源地址https://www.toymoban.com/news/detail-752775.html
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); // 选中的值
}
到了这里,关于uniapp 使用 uni-data-picker级联选择器,自定义展示,uni小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!